AS3绘图线与画笔PNG图像模式

Question

此功能存在于桌面程序（如Adobe Illustrator或Painter）中。

您可以选择作为图像模式的画笔。开始在画布上绘画显示从一组不同大小和旋转的图像创建的线（或任何图案）。大概我在图片中描绘的方式（红线是画笔动作的路径）。

是否已存在此效果的库，或者如何最好地实现它？

Answer 1

在绘图画布上收听MouseEvent.MOUSE_DOWN，一旦触发，添加Event.ENTER_FRAME即可开始绘图。绘图本身非常简单 - 在每个帧上，您可以使用mouseX和mouseY值，并在画布上的PNG图像中添加特定图像的任何变换（缩放，旋转，alpha）。这是一个简单的例子：

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);
}