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

我已列出评论以显示我所了解的情况。如果我有什么问题，如果有人能更好地向我解释，我会喜欢它。

测试时，程序绘制线条，但它所做的只是从其他一些看起来随机的位置绘制一条线条到鼠标位置。所以我认为这个问题与矩阵有关。

我很感激任何帮助，我可以得到，我一直在看这一段时间，它只是不点击。谢谢。

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

}