用刷子PNG图像模式AS3绘图线 [英] AS3 drawing line with brush PNG images pattern

问题描述

这个功能存在于桌面程序，如Adobe Illustrator或画家。

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).

时已经有这种效果库，或者它如何才能最好地实现？

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

推荐答案

倾听的MouseEvent.MOUSE_DOWN 绘图画布上，一旦触发，添加 Event.ENTER_FRAME 开始绘制。该图本身是pretty的简单 - 在每一帧你把mouseX和mouseY的值，并添加PNG图像在画布上与该特定图像的任何变换（缩放，旋转，阿尔法）的确切地点。这里有一个简单的例子：

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

这篇关于用刷子PNG图像模式AS3绘图线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！