Question

我试图制作一个Flash应用程序，用户可以使用笔刷（如轮胎痕迹）用鼠标绘制，但我无法获得任何体面。我现在使用的测试代码是：

var canvas:Sprite;
var canvasWidth:int = 1024;
var canvasHeight:int = 768;
var lastPoint:Array = [0, 0];

function init() {
  canvas = new Sprite();
  addChild(canvas);
  canvas.graphics.beginFill(0xCCCCCC);
  canvas.graphics.drawRect(0,0,canvasWidth,canvasHeight);
  canvas.graphics.endFill();
  canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

}

function onMouseDown(e:Event):void
{
  canvas.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
  canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  canvas.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

function onMouseUp(e:Event):void
{
  canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
  canvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  canvas.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}

function onEnterFrame(e:Event):void
{
  var patternPiece:DisplayObject = new TireTrail();

  var newPoint = [mouseX, mouseY];
  var angle:Number = rad2deg(getAngle(lastPoint[0], lastPoint[1], newPoint[0], newPoint[1]));
  lastPoint = newPoint;

  patternPiece.rotation = angle;
  patternPiece.alpha = Math.random();
  patternPiece.x = mouseX;
  patternPiece.y = mouseY;
  canvas.addChild(patternPiece);
}

function getAngle(x1:Number, y1:Number, x2:Number, y2:Number):Number
{
    var dx:Number = x2 - x1;
    var dy:Number = y2 - y1;
    return Math.atan2(dy,dx);
}

function rad2deg(radians:Number)
{
    return radians * 180 / Math.PI;
}

init();

TireTrail类只是库中的一个Sprite，包含一个短车轮轨迹的PNG图像。在我确定最终确定之前，我暂时使用此图片进行测试：http://www.clker.com/cliparts/s/R/3/U/W/V/tire-trail-md.png

每次移动鼠标指针时，使用getAngle函数我可以获得鼠标指针的前一个位置和新指针之间的度数，这会使画笔旋转，但结果看起来不像轮胎痕迹，因为我得到的是很多旋转的方形小径，而不是连续的平滑小径，好像是用车轮制成的。

理想情况下，用户应该能够使用鼠标绘制这样的波浪线： http://previews.123rf.com/images/katyart/katyart1107/katyart110700007/11473326-dirty-tire-tracks-Stock-Vector-tire-tread-motocross.jpg

关于如何实现这一目标的任何想法？

Answer 1

您需要一个无缝的可滚动图像作为画笔。这意味着将图像顶部附加到底部应该是平滑过渡，没有任何明显的间隙或不连续。
您必须处理像素级别，而不是整体添加一个DisplayObject。鼠标的移动可能比画笔长，因此您需要能够拍摄画笔的任意一小部分并绘制它们。要从画笔中检索像素，您必须使用BitmapData类。
您必须根据鼠标的移动（即之前的位置）扭曲画笔。 DisplacementMapFilter可以做到这一点。 drawTriangles()类的Graphics也可以执行此操作。

这是可能的，但与你现在所做的相比，它更加先进。

使用ActionScript 3的复杂画笔以编程方式绘制

1 个答案: