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

}

AS3使用bitmapdata创建绘图应用程序

1 个答案: