AS3 使用位图数据创建绘图应用程序

Question

我正在尝试创建一个将矢量线渲染为位图的绘图应用程序。我已经阅读了有关 bitmapdata 的文档，并且对它应该如何工作有了基本的了解。但我遇到了一些麻烦。目前我的目标很简单，让用户用鼠标画线，这就是我想要的。问题出在我正在使用的矩阵的某个地方，有人可以帮助我吗？

import flash.display.Sprite;              //imports needed
import flash.events.Event;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.geom.Matrix;



var draw:Boolean = false;     //Boolean to determine when the mouse is down since bitmapdata doesnt receieve mouse events.

var brush:Sprite =new Sprite();    // Creating the "brush", determining the stroke it will make.
brush.graphics.lineStyle(0x000000);
brush.graphics.lineTo(mouseX,mouseY);

var data:BitmapData = new BitmapData(600,400, false); // Creating bitmapdata to allow the work with pixels.

var canvas:Bitmap = new Bitmap(data);
addChild(canvas);


stage.addEventListener(MouseEvent.MOUSE_DOWN, drawStart);  // Event listeners to determine when the mouse is up or down.
stage.addEventListener(MouseEvent.MOUSE_UP, drawStop);
stage.addEventListener(Event.ENTER_FRAME, render);

function drawStart(e:MouseEvent):void  // When the mouse is down we are drawing
{


draw= true;
}

function drawStop(e:MouseEvent):void // When the mouse is up we are not drawing
{
draw= false;
}

function render(e:Event):void  //Rendering the vector into bitmap
{
if(!draw) return;
var mat:Matrix=new Matrix();   // We need a matrix to get the correct mouse coordinates
mat.translate(mouseX,mouseY)


    data.draw(brush,mat);   // Then we draw the bitmap into vector.
} 

我列出了 cmets 以显示我所理解的正在发生的事情。如果我做错了什么，我希望有人能更好地向我解释。

在测试时，程序会画线，但它所做的只是从其他看似随机的位置画一条线到鼠标位置。所以我认为问题与矩阵有关。

我很感激我能得到的任何帮助，我已经看了一段时间了，只是没有点击。谢谢。

Answer 1

您的代码的主要问题是 您只在 bush.graphics 中画线一次（当您的应用启动时），在任何用户输入之前，然后将同一条线画到您的位图数据中只要鼠标按下，每一帧。

正确做事的一种方法是在用户按住鼠标键的同时每帧重绘该线。绘图应该在您的 Brush.graphics 中进行（现在更像是一个画布），最后，一旦用户释放鼠标，他绘制的线条应该呈现到位图数据中，这样您就可以重用您的 Brush.graphics 来绘制新的行。

var draw:Boolean = false;     //Boolean to determine when the mouse is down since bitmapdata doesnt receieve mouse events.
var brush:Sprite;
var canvas:Bitmap;
var data:BitmapData;
var start:Point = new Point();

brush = new Sprite(); // This will serve as a canvas
data = new BitmapData(600,400, false); // Creating bitmapdata to allow the work with pixels.

canvas = new Bitmap(data);
addChild(canvas);
addChild(brush); // Add to display list so we can see what we are drawing visually

stage.addEventListener(MouseEvent.MOUSE_DOWN, drawStart);  // Event listeners to determine when the mouse is up or down.
stage.addEventListener(MouseEvent.MOUSE_UP, drawStop);
stage.addEventListener(Event.ENTER_FRAME, render);

private function drawStart(e:MouseEvent):void  // When the mouse is down we are drawing
{
    draw = true;
    start.setTo(e.localX, e.localY); // Save mouse position at interaction start
}

private function drawStop(e:MouseEvent):void // When the mouse is up we are not drawing
{
    draw = false;
    data.draw(brush, null);   // User released the mouse and we can draw the result into bitmap
}

private function render(e:Event):void  //Rendering the vector into bitmap
{
    if(!draw) return;   

    // Redraw the line each frame as long as the mouse is down
    brush.graphics.clear();
    brush.graphics.lineStyle(0x000000);
    brush.graphics.moveTo(start.x, start.y);
    brush.graphics.lineTo(mouseX, mouseY);

}