EaselJS, Matrix2D and wrap Image

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

如您在附加文件中所见，我很好地绘制了一个畸形的矩形，但图像仍然无法包裹创建的形状。有人知道我该如何做吗？有更好的方法吗？我做错了什么吗？

谢谢您的时间。

编辑：为了更具体，我已经添加了其他图像以展示我的想法。

- Wazhup

---

你为什么要贬低他们？ - Denis Kohl

@apsillers 嗯，我明白了。我的主要问题在于将图像包裹起来。根据你所说，绘制形状并不难，但我找不到任何方法来使图像适应这个形状。感谢你的回答。 - Wazhup

将“no-repeat”更改为“repeat”。 - user3995789

@user3995789 不，我不想这样做，我想要适应图像。你所说的会使图像重复。 - Wazhup

Answer 1

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

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

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

你可以使用多个被扭曲的对象来模拟这个效果（在Flash中，这种方法被广泛使用来模拟透视变换），或者你需要寻找其他解决方案。

- gskinner