actionscript-3 - AS3用画笔画线PNG图像图案

Question

此功能存在于 Adob​​e 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);
}