{"id":334,"date":"2009-07-03T11:37:19","date_gmt":"2009-07-03T18:37:19","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1684"},"modified":"2009-07-03T11:37:19","modified_gmt":"2009-07-03T18:37:19","slug":"better-bitmapdata-brush","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=334","title":{"rendered":"Better BitmapData Brush"},"content":{"rendered":"
\r\nvar canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xCCCCCC);\r\naddChild(new Bitmap(canvas));\r\nvar prevX:Number;\r\nvar prevY:Number;\r\nvar brush:Shape = new Shape();\r\n\r\nstage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);\r\nstage.addEventListener(MouseEvent.MOUSE_UP, onUp);\r\nfunction onDown(evt:MouseEvent):void{\r\n\tprevX = mouseX;\r\n\tprevY = mouseY;\r\n\taddEventListener(Event.ENTER_FRAME, onLoop);\r\n}\r\n\r\nfunction onUp(evt:MouseEvent):void{\r\n\tremoveEventListener(Event.ENTER_FRAME, onLoop);\r\n}\r\n\r\nfunction onLoop(evt:Event):void {\r\n      brush.x = mouseX;\r\n\t  brush.y = mouseY;\r\n\t  with (brush.graphics){\r\n\t\t  clear();\r\n\t\t  lineStyle(3, 0x000000);\r\n\t\t  lineTo(prevX-mouseX, prevY-mouseY);\r\n\t  }\r\n\t  canvas.draw(brush, brush.transform.matrix);\r\n\t  prevX = mouseX;\r\n\t  prevY = mouseY;\r\n}\r\n<\/pre>\n
If you write a drawing program with the Graphics class alone, you’ll notice that eventually the flash player will start to slow down. This could take quite some time, but it will eventually happen. Because the Graphics class is entirely vector based, the flash player needs to keep track of every single point that makes up any line in your drawing. If you draw something and then erase it by drawing white vector lines over it, flash still needs to know about that thing that you erased. <\/p>\n
The snippet I wrote yesterday<\/a> reminded me of the technique used in the above snippet. In yesterdays post every line is drawn using the graphics class. As a result, eventually the flash player begins to choke. <\/p>\n
Today’s snippet draws a vector between the previous mouse location and the current mouse location – this vector is then drawn onto a BitmapData object and the vector is cleared. So rather than creating vector graphics that are continuously increasing in complexity, your just changing the color of pixels around on a BitmapData. <\/p>\n
To see a visual explanation take a look at the below swf. I slowed it down to 5fps, I tinted the vector red and scaled up the stage so you can differentiate between what’s vector and what’s bitmap:<\/p>\n

\nClick to see the swf…<\/p>\n
<\/a>