位图数据 api，.draw 从转换后的 sprite

Question

我正在使用位图数据 api 来允许用户使用他们的网络摄像头捕捉图像，编辑它并将它保存到他们的硬盘。

我已经成功地使用变换矩阵裁剪了位图数据，但问题是应用于捕获图像的任何变换（使用 Senocular 的变换工具）都不会反映在保存的图像中。这显然与 .draw 命令有关，但我不知道是什么？

如何获取位图数据 .draw 以反映缩放和旋转变换，应用于捕获的图像？

您可以在以下位置查看应用程序：http://s46264.gridserver.com/dev/dave/pb-photo/index.html （只需单击捕获的图像即可启用缩放/旋转工具） 和源/类压缩在：http://s46264.gridserver.com/dev/dave/pb-photo/pb-photo.zip

任何澄清将不胜感激。

谢谢

代码是：

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.net.FileReference;
import com.adobe.images.JPGEncoder;
import com.senocular.display.transform.*;

// create container for captured image to apply Transform Tool to
var box:Sprite = new Sprite();
addChild(box);
box.graphics.beginFill(0xAACCDD);
box.graphics.drawRect(-160, -120, 320, 240); // xreg, yreg, width, height (x-y = width-height / 2 to set centered registration point)
box.x = 520;
box.y = 140;

// create the Transform Tool
var tool:TransformTool = new TransformTool(new ControlSetStandard());
addChild(tool);

// select the box with the transform tool when clicked. 
// deselect when clicking on the stage
box.addEventListener(MouseEvent.MOUSE_DOWN, tool.select);
stage.addEventListener(MouseEvent.MOUSE_DOWN, tool.deselect);

var snd:Sound = new camerasound(); //new sound instance for the "capture" button click

var bandwidth:int = 0; // Maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second.
var quality:int = 100; // This value is 0-100 with 1 being the lowest quality. 

var cam:Camera = Camera.getCamera();
cam.setQuality(bandwidth, quality);
cam.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area)
var video:Video = new Video();
video.attachCamera(cam);
video.x = 20;
video.y = 20;
addChild(video);

var bitmapData:BitmapData = new BitmapData(video.width,video.height);

var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = -160;
bitmap.y = -120;
box.addChild(bitmap);

capture_mc.buttonMode = true;
capture_mc.addEventListener(MouseEvent.CLICK,captureImage);

function captureImage(e:MouseEvent):void {
    snd.play();
    bitmapData.draw(video);
    save_mc.buttonMode = true;
    save_mc.addEventListener(MouseEvent.CLICK, onSaveJPG);
    save_mc.alpha = 1;
}

save_mc.alpha = .5;

var crop:Matrix = new Matrix();
crop.createBox(1, 1, 0, box.x-crop_mc.x, box.y-crop_mc.y);

function onSaveJPG(e:Event):void{

    var bmp:BitmapData = new BitmapData(crop_mc.width, crop_mc.height, true);
    bmp.draw(box, crop);

    var encoder:JPGEncoder = new JPGEncoder(100);

    // Save the encoded byte array to a local file.
    var f:FileReference = new FileReference();
    f.save( encoder.encode(bmp), "imagem.jpg" );

}

Answer 1

您有两个选择：1 - 将所有变换复制到矩阵，并将其作为第二个参数传递给 draw() 方法，2 - 绘制未变换的容器，而不是变换的位图。

第二种方法显然是简单的方法。但无论如何，我想你应该能够从一个容器中获取 transform.matrix，该容器在 senocular 的工具中转换对象（虽然从未使用过，所以无法分享细节）。

所以，first方式的一个例子：

import flash.display.Sprite;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.Bitmap;

// create some subject

var test:Sprite = new Sprite();
test.graphics.beginFill(0);
test.graphics.drawRect(0, 0, 100, 50);
test.graphics.endFill();

// transform

test.x = 50;
test.y = 50;
test.scaleX = 1.5;
test.scaleY = 0.5;
test.rotation = 45;

addChild(test);

// draw transformed subject

// test boundaries in test's parent coordinate space
var rect:Rectangle = test.getRect(test.parent);
var bmp:BitmapData = new BitmapData(rect.width, rect.height, false, 0xFFFF0000);

// copy transform matrix
var matrix:Matrix = test.transform.matrix;

// translate test's matrix to match it with bitmap
matrix.translate(-rect.x, -rect.y);

bmp.draw(test, matrix);

// show what we've got
var bitmap:Bitmap = new Bitmap(bmp);
bitmap.x = 200;
bitmap.y = 50;
addChild(bitmap);

第二种方式的示例：

import flash.display.Sprite;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.Bitmap;

// create some subject

var container:Sprite = new Sprite();

var test:Sprite = new Sprite();
test.graphics.beginFill(0);
test.graphics.drawRect(0, 0, 100, 50);
test.graphics.endFill();

// transform

test.x = 50;
test.y = 50;
test.scaleX = 1.5;
test.scaleY = 0.5;
test.rotation = 45;

container.x = 50;
container.y = 50;

addChild(container);
container.addChild(test);

// draw transformed subject

// container boundaries in it's own coordinate space.
// we assume, that container is not transformed.
var rect:Rectangle = container.getRect(container);
var bmp:BitmapData = new BitmapData(rect.width, rect.height, false, 0xFFFF0000);

// translate container's matrix to match it with bitmap
var matrix:Matrix = new Matrix();
matrix.translate(-rect.x, -rect.y);

bmp.draw(container, matrix);

// show what we've got
var bitmap:Bitmap = new Bitmap(bmp);
bitmap.x = 300;
bitmap.y = 100;
addChild(bitmap);

您可能想要动态创建一个容器，在其中添加主题，绘制并还原更改并处置容器。这取决于你。

Answer 2

来自BitmapData.draw参考：

源显示对象不使用 其应用的任何转换 这个电话。它被视为存在 在库或文件中，没有矩阵 变换，没有颜色变换，也没有 混合模式。绘制显示对象 （如影片剪辑）通过使用其 自己的变换属性，可以复制 其 transform 属性对象为 位图的 transform 属性 使用 BitmapData 的对象 对象。

所以你必须将框的变换属性复制到使用draw 命令创建的位图中。

Answer 3

我无法确定您的代码是否存在问题，但似乎没有... 您是否尝试过使用裁剪的 bitmapData 创建位图？

var bmp:BitmapData = new BitmapData(crop_mc.width, crop_mc.height, true);
bmp.draw(box, crop);
var bitmap = new Bitmap (bmp);
stage.addChild (bitmap);

那个位图是什么样子的？

如果它看起来仍然像未裁剪的版本，在我看来，您的问题可能是您绘制了错误的容器。您可以尝试将“盒子”剪辑移动到另一个容器中，并在保存图像时绘制该“外部”容器。

我不确定 senocular 的工具是如何工作的，但如果“工具”正在存储修改后的 BitmapData，您也可以尝试捕获该工具。

希望能给你一些想法...