将自定义的 Sprite 保存为图像到本地磁盘

Question

我的 Action Script 3 代码有问题。 我要让用户在 spBoard 中绘制任何 he/she 想要的东西，然后我想让 him/her 能够将它保存在本地磁盘中。 这是代码，但此代码只能保存 spBoard，而不会被用户淹没。

import com.adobe.images.JPGEncoder;
import com.adobe.images.PNGEncoder;

 var lineSize: Number = 7;
 var currentColor: Number;

 var spBoard: Sprite = new Sprite();
 this.addChild(spBoard);
 spBoard.x = 280;
 spBoard.y = 23;
 drawBoard();

 var shDrawing: Shape = new Shape();
 this.addChild(shDrawing);
 shDrawing.x = 280;
 shDrawing.y = 23;

 var shMask: Shape = new Shape();
 this.addChild(shMask);
 shMask.x = 280;
 shMask.y = 23;
 drawMask();
 shDrawing.mask = shMask;
 var doDraw: Boolean = false;

 function drawBoard(): void {
 spBoard.graphics.lineStyle(1, 0x000000);
 spBoard.graphics.beginFill(0xFFFFFF);
 spBoard.graphics.drawRect(0, 0, 250, 250);
 spBoard.graphics.endFill();
 spBoard.filters = [new DropShadowFilter()];
 }

function drawMask(): void {
shMask.graphics.lineStyle(1, 0x000000);
shMask.graphics.beginFill(0xFFFFFF);
shMask.graphics.drawRect(1, 1, 249, 249);
shMask.graphics.endFill();
}


spBoard.addEventListener(MouseEvent.MOUSE_DOWN, boardDown);
spBoard.addEventListener(MouseEvent.MOUSE_UP, boardUp);

function boardDown(e: MouseEvent): void {
var curX: Number = shDrawing.mouseX;
var curY: Number = shDrawing.mouseY;
doDraw = true;
shDrawing.graphics.lineStyle(5, 0x000066);

shDrawing.graphics.lineStyle(lineSize, currentColor);
shDrawing.graphics.moveTo(curX, curY);
}

function boardUp(e: MouseEvent): void {
doDraw = false;
}

spBoard.addEventListener(MouseEvent.MOUSE_MOVE, boardMove);

function boardMove(e: MouseEvent): void {
var curX: Number = shDrawing.mouseX;
var curY: Number = shDrawing.mouseY;
if (doDraw) {
    shDrawing.graphics.lineTo(curX, curY);
}
e.updateAfterEvent();
}


save_image.addEventListener(MouseEvent.CLICK, save_image_function);
function save_image_function(event:MouseEvent):void
{
var bmd:BitmapData = new BitmapData(50,50);
bmd.draw(spBoard);
var encorder:PNGEncoder   = new PNGEncoder();
var bytes:ByteArray = PNGEncoder.encode( bmd );
var file:FileReference    = new FileReference();
file.save( bytes, "Image.png" );
}

Answer 1

您正在 shDrawing 绘图，然后保存 spBoard !! spBoard 还不包含任何绘制的图形！ 你必须在保存之前将 Draw graphics 复制到 spBoard sprite 中。
我还在 save function[=20] 中使用了 250x250 大小的位图数据=] 覆盖整个绘图板。

---

function save_image_function(event:MouseEvent):void
{
    var _filters:Array = spBoard.filters;
    var defaultHolder:Sprite = new Sprite();
    defaultHolder.graphics.copyFrom(spBoard.graphics);
    spBoard.filters = [];
    spBoard.graphics.copyFrom(shDrawing.graphics);
    // above lines just for getting a back up of spBoard


    var bmd:BitmapData = new BitmapData(250, 250);
    bmd.draw(spBoard);
    var encorder:PNGEncoder   = new PNGEncoder();
    var bytes:ByteArray = PNGEncoder.encode( bmd );
    var file:FileReference    = new FileReference();
    file.save( bytes, "Image.png" );

    // now retrieve default spBoard to what that was before the save process
    spBoard.filters = _filters;
    spBoard.graphics.clear();
    spBoard.graphics.copyFrom(defaultHolder.graphics);
}