Bitmap Data .draw() with transform matrix

Question

I'm working on a project wherein a user can take a snapshot of themselves using their webcam and then edit this image by transforming scale and rotation and save the result.

I've got most of it working, the user can take a snapshot of themselves, transform the object using Senocular's Transform Tool and i'm using .draw() to then save this transformed object. The problem is .draw() is only grabbing data from the top left corner of the stage. It is drawing the transformed object but only from the top left corner.

Why does it only draw from the top left corner and how can i get set the coordinates to only draw from the area where the captured image is set?

Thanks.

You can view the file as is at: http://s46264.gridserver.com/dev/dave/pb-photo/index.html

And i've zipped the FLA and relevant classes at 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);

// create bitmap to hold initial capture and addChild to transform box
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;

// save transformed bmp to new object and addChild to holder_mc
function onSaveJPG(e:Event):void{

    var m:Matrix = box.transform.matrix;
    trace(m);

    var bmp:BitmapData = new BitmapData(320, 240, true, 0xCCCCCCCC);
    bmp.draw(box, m);

    var newbmp:Bitmap = new Bitmap(bmp);
    holder_mc.addChild(newbmp);

}

shanethehat shanethehat · Accepted Answer · 2011-06-29T11:34:02

Funnily enough I'm working on something very similar at the moment. You can draw a certain area of your target by passing x and y offsets into draw as part of a matrix:

var bmd:BitmapData = new BitmapData(target.width,target.height,true,0);
var mat:Matrix = new Matrix(1,0,0,1,-target.x,-target.y);
bmd.draw(this,mat);

Note in particualr that the x and y passed into the matrix are set negative.

Bitmap Data .draw() with transform matrix

3 Answers