actionscript-3 - AS3 ブラシ PNG 画像パターンで線を描く

Question

この機能は、Adobe Illustrator や Painter などのデスクトップ プログラムに存在します。

画像のパターンであるブラシを選択できます。キャンバスにペイントを開始すると、さまざまなサイズと回転の一連の画像から作成された線 (または任意のパターン) が表示されます。おおまかなイメージ通りです（赤線は筆の軌跡）。

この効果のライブラリは既にありますか、それともどのように実装するのが最適ですか?

Answer 1

描画キャンバスで をリッスンしMouseEvent.MOUSE_DOWN、起動したら a を追加し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);
}