Flash位图技术研究篇:扫描像素点
转自: http://blog.csdn.net/hero82748274/archive/2010/11/09/5998642.aspx
今晚抽了点时间写个无聊的野,这部分会涉及到位图方面的扫描操作。最近发现了通过扫描位图的像素能够做出很多意想不到效果。
基本原理:通过扫描像素点,并将我们所需要的像素点记录下来,我们可以以粒子的方式看待这些像素,通过粒子运动的表现,我们实现很多不错的技巧。
今晚,所做一个效果就是通过输入一个文本,生成我们想要的图案。我们会预先扫描像素,并将每一个像素点位置进行放大。这样我们就可以实现一种放大的像素点效果。
在实现过程当中,我们会创建一个文本输入,这个输入文本会提供我们输入的方式,同时我们通过位图对这个文本进行复制:
var bmpdata:BitmapData=new BitmapData(txt.width,txt.height,false,0x0);//创建位图复制文本
bmpdata.draw(txt);
有了这个位图之后,接下来我们就可以玩很多变化了。通过两个循环结构对像素进行每一个点扫描一次。
1 for (var i:int=0; i<bmpdata.width; i++)
2 {
3 for (var j:int=0; j<bmpdata.height; j++)
4 {
5 var color:uint=bmpdata.getPixel(i,j);//获取每一个点的值
6 }
7 }
在扫描过程当中,这个程序会扫描全部的点,不过是不是所有的点都是我们所需要的?答案是否,我们只是需要这个文本的周边的像素点的位置值。也就是说,获取的时候,还是需要加以判断。
1 var red:uint=(color>>16 )&0xff;
2 if (red>0)
3 {
4 //记录我们所想的值,并通过数组来保存
5 }
获取到除黑色之外的颜色值,这样我们就可以得到在范围内的预想像素点。通过保存位置,后面的事情我们就可以轻松了。
至于用什么保存?我们可以用point 类记录这些点,但是也可以使用我们自定义的模型结构来实现记录。方式很多种。记录之后,通过数组来保存下来。那么扫描之后,我们就能获取到我们所想的点了。
我们记录的点有几多?我们就可以使用几多个粒子来来放置到相应的位置,我们可以看待这些像素点是放大之后的效果。
代码
1 //扫描像素
2 for (var i:int=0; i<bmpdata.width; i++)
3 {
4 for (var j:int=0; j<bmpdata.height; j++)
5 {
6 var color:uint=bmpdata.getPixel(i,j);
7 var red:uint=(color>>16 )&0xff;
8 if (red>0)
9 {
10 var px:Number=i*stage_w/bmpdata.width;
11 var py:Number=j*stage_h/bmpdata.height;
12 var box:Box=new Box();
13 box.x=Math.random()*550;
14 box.y=Math.random()<0.5?0 :stage_h;
15 box.filters=[new GlowFilter(),new BlurFilter(1,1)];
16 var p:Particle=new Particle();
17 p.x=px;
18 p.y=py;
19 p.obj=box;
20 contain.addChild(box);
21 arrayList.push(p);
22 }
23 }
24 }
好,大概就是这样。累死了
总的代码效果如下:
代码
1 package
2 {
3 //扫描像素
4 import flash.display.Sprite;
5 import flash.display.Bitmap;
6 import flash.display.*;
7 import flash.display.BitmapData;
8 import flash.events.*;
9 import flash.text.*;
10 import flash.geom.*;
11 import flash.filters.*;
12 import com.greensock.TweenMax;
13 import com.greensock.easing.*;
14 public class Main extends Sprite
15 {
16 private var str:String="360";
17 private var arrayList:Array=[];//保存粒子
18 private var contain:Sprite=new Sprite();//容器
19 private var key:Boolean=false;
20 private var stage_w:Number=0;//舞台宽度
21 private var stage_h:Number=0;//舞台高度
22 private var txt:TextField;
23 private var input:TextInput;
24 public function Main()
25 {
26 addChild(contain);
27 stage_w=stage.stageWidth;
28 stage_h=stage.stageHeight;
29 stage.addEventListener(Event.RESIZE,onResizeHandler);//缩放监听
30 txt=new TextField();
31 txt.defaultTextFormat=new TextFormat("Arial",20,0xffff00);
32 txt.autoSize=TextFieldAutoSize.LEFT;
33 init();
34
35 }
36
37 //初始化组件
38 private function init():void
39 {
40 //标签
41 var label=new Label();
42 label.text="输入字母:";
43 label.x=10;
44 label.y=20;
45 addChild(label);
46
47 //创建按钮
48 var button:Button=new Button();
49 button.buttonMode=true;
50 addChild(button);
51 button.label="生 成";
52
53 button.creatButton([0x333333,0x999999],100,30);
54 button.textPosition(26,4);
55 button.x=300;
56 button.y=18;
57 button.addEventListener(MouseEvent.CLICK,onClick);
58
59 //创建输入文本
60 input=new TextInput(160,25);
61 input.x=100;
62 input.y=18;
63 input.textField.background=true;
64 addChild(input);
65
66 }
67
68
69 //缩放的时候监听
70 private function onResizeHandler(event:Event):void
71 {
72 stage_w=stage.stageWidth;
73 stage_h=stage.stageHeight;
74 trace("宽:"+stage.stageWidth+"高:"+stage.stageHeight);
75 }
76
77 private function onClick(event:MouseEvent):void
78 {
79 if(input.text!="")
80 {
81 clearAll();
82 drawSprite(input.text);
83 }
84 }
85
86 //描绘图案
87 private function drawSprite(str:String):void
88 {
89
90 txt.text=str;
91 var bmpdata:BitmapData=new BitmapData(txt.width,txt.height,false,0x0);//创建位图复制文本
92 bmpdata.draw(txt);
93 //扫描像素
94 for (var i:int=0; i<bmpdata.width; i++)
95 {
96 for (var j:int=0; j<bmpdata.height; j++)
97 {
98 var color:uint=bmpdata.getPixel(i,j);
99 var red:uint=(color>>16 )&0xff;
100 if (red>0)
101 {
102 var px:Number=i*stage_w/bmpdata.width;
103 var py:Number=j*stage_h/bmpdata.height;
104 var box:Box=new Box();
105 box.x=Math.random()*550;
106 box.y=Math.random()<0.5?0 :stage_h;
107 box.filters=[new GlowFilter(),new BlurFilter(1,1)];
108 var p:Particle=new Particle();
109 p.x=px;
110 p.y=py;
111 p.obj=box;
112 contain.addChild(box);
113 arrayList.push(p);
114 }
115 }
116 }
117
118 bmpdata.dispose();//释放位图
119 bmpdata=null;
120 render();
121 contain.addEventListener(MouseEvent.CLICK,onClickHandler);
122 }
123 //清除
124 private function clearAll():void
125 {
126 while(contain.numChildren>0)contain.removeChildAt(0);
127 while(arrayList.length>0)arrayList.shift();
128
129 }
130
131
132 //渲染效果
133 private function render( ):void
134 {
135 for (var i:int=0; i<arrayList.length; i++)
136 {
137 TweenMax.to(arrayList[i].obj,Math.random()*2+1,{x:arrayList[i].x,y:arrayList[i].y});
138 }
139 //
140 }
141 //随机移动
142 private function randomMove():void
143 {
144 for (var i:int=0; i<arrayList.length; i++)
145 {
146 TweenMax.to(arrayList[i].obj,Math.random()*2+1,{x:Math.random()*550,y:Math.random()*400});
147 }
148 }
149 private function onClickHandler(event:MouseEvent):void
150 {
151 if (!key)
152 {
153 key=true;
154
155 randomMove();
156 }
157 else
158 {
159 key=false;
160 render();
161 }
162 }
163
164 }
165 }
166 //简单的粒子模型
167 internal class Particle
168 {
169 public var x:Number;
170 public var y:Number;
171 public var z:Number;
172 public var radius:Number=0;//半径
173 public var color:uint;//颜色
174 public var obj:*;//对象
175 public var angle:Number;//角度
176 public function Particle()
177 {
178 }
179 }
180 //方块的的创建
181 import flash.display.Sprite;
182 import flash.text.*;
183 internal class Box extends Sprite
184 {
185 public function Box(color:uint=0xffff00)
186 {
187 this.graphics.lineStyle(0);
188 this.graphics.beginFill(color);
189 this.graphics.drawRect(0,0,10,10);
190 this.graphics.endFill();
191 }
192 //设置坐标
193 public function move(x:Number,y:Number):void
194 {
195 this.x=x;
196 this.y=y;
197 }
198 }
199 //按钮的创建
200 import flash.display.*;
201 import flash.events.*;
202 import flash.filters.*;
203 import flash.geom.*;
204 import flash.text.*;
205 internal class Button extends Sprite
206 {
207 private var _label:String="";//标签
208 private var _labelTextField:TextField;
209 public function Button()
210 {
211
212 }
213
214 //通过渐变效果和绘制矩形的办法,来创建按钮,同时添加发光的效果
215 public function creatButton(colors:Array,width:Number,height:Number,fontSize:int=15):Sprite
216 {
217 var shape:Sprite=new Sprite();
218 shape.addEventListener(MouseEvent.ROLL_OVER,onRollOverHandler);
219 shape.addEventListener(MouseEvent.ROLL_OUT,onRollOutHandler);
220 var colors:Array=colors;
221 var alphas:Array=[1,1];
222 var ratios:Array=[0,255];
223 var matrix:Matrix=new Matrix();
224 matrix.createGradientBox(width,height,-Math.PI /2);
225 //创建渐变填充
226 shape.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix);//渐变按钮
227 shape.graphics.drawRoundRect(0,0,width,height,15,15);
228 shape.graphics.endFill();
229 shape.graphics.beginFill(0xffffff,0.15);
230 shape.graphics.drawRoundRect(0,0,width,height/2,15,15);
231 shape.graphics.endFill();
232 shape.filters=[new DropShadowFilter(2,45,0,0.5,2,2)];
233 //创建按钮文本标签
234 _labelTextField=new TextField();
235 _labelTextField.defaultTextFormat=new TextFormat("黑体",fontSize,0xffffff,true);
236 _labelTextField.autoSize=TextFieldAutoSize.CENTER;
237 _labelTextField.text=this.label;
238
239 _labelTextField.selectable=false;
240 _labelTextField.mouseEnabled=false;
241 _labelTextField.x=shape.width*0.4;
242 _labelTextField.y=shape.height*0.2;
243 addChild(shape);
244 shape.addChild(_labelTextField);
245 return shape;
246 }
247
248 private function onRollOverHandler(event:MouseEvent):void
249 {
250 this.filters=[new GlowFilter(0x00ff00)];
251 }
252
253 private function onRollOutHandler(event:MouseEvent):void
254 {
255 this.filters=null;
256 }
257
258 //设置按钮标签
259 public function set label(str:String):void
260 {
261 _label=str;
262 }
263
264 public function get label():String
265 {
266 return _label;
267 }
268
269 //设置标签位置,用于微调
270 public function textPosition(x,y:Number):void
271 {
272 _labelTextField.x=x;
273 _labelTextField.y=y;
274 }
275
276
277 }
278
279 //文本输入创建,用于创建文本
280 internal class TextInput extends Sprite
281 {
282 private var _input:TextField;
283 private var _width:Number;//宽度
284 private var _height:Number;//高度
285 public function TextInput(width:Number,height:Number)
286 {
287 this._width=width;
288 this._height=height;
289 addChildren();
290 }
291
292 private function addChildren():void
293 {
294 _input=new TextField();
295 _input.defaultTextFormat=new TextFormat("Arial",15);
296 _input.width=_width;
297 _input.height=_height;
298 _input.type=TextFieldType.INPUT;
299 _input.border=true;
300 addChild(_input);
301 }
302
303 //设置和获取文本
304 public function set text(value:String):void
305 {
306 _input.text=value;
307 }
308
309 public function get text():String
310 {
311 return _input.text;
312 }
313
314 //获取文本
315 public function get textField():TextField
316 {
317 return _input;
318 }
319 }
320
321 //标签
322 internal class Label extends Sprite
323 {
324 private var _label:TextField;
325 public function Label()
326 {
327 addChildren();
328 }
329
330 private function addChildren():void
331 {
332 _label=new TextField();
333 _label.defaultTextFormat=new TextFormat("Arial",15,0x999999);
334 _label.autoSize=TextFieldAutoSize.LEFT;
335 _label.type=TextFieldType.DYNAMIC;
336 addChild(_label);
337 }
338
339 //设置和获取文本
340 public function set text(value:String):void
341 {
342 _label.text=value;
343 }
344
345 public function get text():String
346 {
347 return _label.text;
348 }
349
350 //获取文本
351 public function get textField():TextField
352 {
353 return _label;
354 }
355
356 }