用刷子PNG图像图案AS3引出配线(AS3 drawing line with brush PNG

2019-10-31 16:55发布

此功能存在于桌面程序,如Adobe Illustrator或画家。

您可以选择画笔是图像的模式。 开始绘制在画布上显示从一组不同的尺寸和旋转的图像的创建的线(或任何图案)。 我在画面大致如何描绘(红线是刷运动的路径)。

是否已有一个库这样的效果,或者如何才能最好地实现?

Answer 1:

倾听MouseEvent.MOUSE_DOWN绘图画布上,一旦触发,添加Event.ENTER_FRAME开始画。 该图本身是非常简单的 - 每一帧你把mouseX和mouseY的价值,并与该特定图像的任何变换(缩放,旋转,阿尔法)的确切位置添加在画布上的PNG图像。 这里有一个简单的例子:

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


文章来源: AS3 drawing line with brush PNG images pattern