javascript - 在fabricjs中填充图像的对象的透视变换

Question

我们有一些用图像源填充的对象。是否可以通过调整fabric js中的矩形网格位置来实现填充图像的透视变换？

我试图在fabric js中实现类似于上面的图像......

Answer 1

FabricJS 或其他 2d 画布库无法实现真正​​的透视变形。

Canvas 的 2d 上下文不会进行透视变换。

大多数画布库，包括 fabricJS，都使用 2d 上下文。

有一个画布 3d 上下文——webGL 可以很好地模仿透视变换。

mrdoob 的threeJS 库是一个很好的3d 上下文库：

http://mrdoob.github.io/three.js/

[补充：非透视倾斜是可能的（结果总是与原始平行）]

在 fabricJS 中，您可以完全控制转换矩阵。

您可以使用该矩阵进行仅并行倾斜。

这是一个小提琴：http: //jsfiddle.net/m1erickson/Rq7hk/

如何：

fabricObject.transformMatrix 采用 6 个元素的数组，每个元素代表仿射变换矩阵的各个部分。

在该矩阵中，第 2 和第 3 个元素代表 SkewY 和 SkewX。

所以要创建你的 skewY，你可以像这样创建一个矩形：

var rect = new fabric.Rect({
  left: 150,
  top: 150,
  width: 75,
  height: 50,
  fill: 'green',
  angle: 0,
  padding: 10,
  transformMatrix:[1,.30,0,1,0,0]
});

Answer 2

我使用多边形和 php-imagemagick 找到了 fabricjs 的解决方案。你可以将两者结合起来。