CODEWITHSUNDEEP
javascriptimagetransformationshapeseaseljs
Wazhup
Wazhup

Reputation: 97

EaselJS, Matrix2D and wrap Image

I did this post asking your opinion about what JS library is better, or can do the work that I have shown. Since I'm not allowed to do that here I did a research and tried out EaselJS to do the work. So my question now have 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 values from a 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 attached files, I draw well a deformed rectangle but the image still doesn´t wrap the shape created. Anyone know how can I do it? There is a way better do to this? I'm doing something wrong?

Thanks for your time.

Edit: To be more specific I have added other image to see what I want.

enter image description here enter image description here

Upvotes: 3

Views: 1390

Answers (1)

gskinner
gskinner

Reputation: 2488

You are attempting to do something similar to a perspective transform, using a 3x3 matrix.

Canvas's 2D context, and by extension EaselJS, only supports affine transformations with a 2x3 matrix - transformations where the opposite edges of the bounding rectangle remain parallel. For example, scaling, rotation, skewing, and translation.

http://en.wikipedia.org/wiki/Affine_transformation

You might be able to fake this with multiple objects that have been skewed (this was used extensively in Flash to fake perspective transforms), or you may have to look into another solution.

Upvotes: 1

Related Questions