CODEWITHSUNDEEP
actionscript-3drawing
Astraport
Astraport

Reputation: 1257

AS3 drawing line with brush PNG images pattern

This functionality exists in desktop programs such as Adobe Illustrator or Painter.

You can select a brush that is a pattern of images. Starting to paint on canvas displays a line (or any pattern) created from a set of images of different sizes and rotations. Approximately how I portrayed in the picture (the red line is a path of the brush motion).

enter image description here

Is there already a library for this effect, or how it can best be implemented?

Upvotes: 0

Views: 2479

Answers (1)

package
package

Reputation: 4801

Listen for MouseEvent.MOUSE_DOWN on your drawing canvas and once it fires, add a Event.ENTER_FRAME to begin drawing. The drawing itself is pretty straightforward - on every frame you take the mouseX and mouseY values and add the PNG image on the canvas in the exact place with any transformations (scaling, rotation, alpha) for that particular image. Here's a simple example:

private var PatternPNG:Class;
private var canvas:Sprite;

private function init() {
  canvas = new Sprite();
  addChild(canvas);
  canvas.graphics.beginFill(0xFFFFFF);
  canvas.graphics.drawRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
  canvas.graphics.endFill();
  canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onMouseDown(e:Event):void
{
  canvas.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
  canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  canvas.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onMouseUp(e:Event):void
{
  canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
  canvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  canvas.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(e:Event):void
{
  var patternPiece:DisplayObject = new PatternPNG();
  patternPiece.rotation = Math.random() * 360;
  patternPiece.alpha = Math.random();
  patternPiece.scaleX = patternPiece.scaleY = 0.2 + Math.random() * 0.8;
  patternPiece.x = mouseX;
  patternPiece.y = mouseY;
  canvas.addChild(patternPiece);
}

Upvotes: 2

Related Questions