EaselJS, Matrix2D and wrap Image

Question

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

@apsillers Well I see it and here my main problem is wrap a image. Drawing a shape isnt hard, as you mentioned but I didnt find any way to fit the image to that shape. Thank you for your answers. — Wazhup, Sep 23 '14 at 19:49
@user3995789 nah, i dont want it, i want to fit the image. What you have said will make the imagen repeat. — Wazhup, Sep 24 '14 at 18:42

score 1 · Answer 1 · answered Oct 24 '14 at 06:22

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.

EaselJS, Matrix2D and wrap Image

1 Answers1