EaselJS, Matrix2D and wrapper
I made this post asking for your opinion on which JS library is better or might do the job that I have shown. Since I'm not allowed to do this here, I did some research and tried EaselJS to get the job done. So my question has now changed.
I have this piece of code:
function handleImageLoad(event) {
var img = event.target
bmp = new createjs.Bitmap(img);
/*Matrix2D Transformation */
var a = 0.880114;
var b = 0.0679298;
var c = -0.053145;
var d = 0.954348;
var tx = 37.4898;
var ty = -16.5202;
var matrix = new createjs.Matrix2D(a, b, c, d, tx, ty);
var polygon = new createjs.Shape();
polygon.graphics.beginStroke("blue");
polygon.graphics.beginBitmapFill(img, "no-repeat", matrix).moveTo(37.49, -16.52).lineTo(336.27, -36.20).lineTo(350.96, 171.30).lineTo(50.73, 169.54).lineTo(37.49, -16.52);
stage.addChild(polygon);
stage.update();
}
where the variables a, b, c, tx and ty are the values from the homography matrix,
0.880114 0.067979298 37.4898
-0.053145 0.954348 -16.5202
-0.000344 1.0525-006 1
As you can see in the attached files, I draw the distorted rectangle well, but the image still doesn't wrap around the created shape. Does anyone know how I can do this? Is there a better way to do this? Am I doing something wrong?
Thank you for your time.
Edit: To be more specific, I added another image to see what I want.
source to share
You are trying to do something similar to a perspective transform using a 3x3 matrix.
The Canvas 2D context and the EaselJS extension only support 2x3 matrix affine transformations - transformations where the opposite edges of the bounding box remain parallel. For example, scaling, rotation, skewing and translation.
http://en.wikipedia.org/wiki/Affine_transformation
You may be able to fake this with a few objects that have been distorted (this was widely used in Flash to fake perspective transformations), or you might have to look for another solution.
source to share