javascript - EaselJS、Matrix2D 和包装图像

Question

我写这篇文章是为了询问您对哪个 JS 库更好或可以完成这项工作的看法我已经展示了。由于不允许我在这里这样做，因此我进行了研究并尝试使用 EaselJS 来完成这项工作。所以我的问题现在变了。

我有这段代码:

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();
}

其中变量 a、b、c、tx 和 ty 是单应矩阵的值，

0.880114 0.067979298 37.4898
-0.053145 0.954348 -16.5202
-0.000344 1.0525-006 1

正如您在附件中看到的那样，我很好地绘制了一个变形的矩形，但图像仍然没有包裹创建的形状。任何人都知道我该怎么做？有更好的方法吗？我做错了什么？

感谢您的宝贵时间。

编辑:更具体地说，我添加了其他图像以查看我想要的内容。

Answer 1

您正在尝试使用 3x3 矩阵执行类似于透视变换的操作。

Canvas 的 2D 上下文以及扩展的 EaselJS 仅支持 2x3 矩阵的仿射变换 - 边界矩形的相对边缘保持平行的变换。例如，缩放、旋转、倾斜和平移。

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

您可以使用多个倾斜的对象来伪造它(这在 Flash 中被广泛用于伪造透视变换)，或者您可能需要研究其他解决方案。