问fabricjs中图像填充对象的透视变换

EN

使用FabricJS或其他2d画布库时，无法实现真正的透视失真。

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

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

有一个canvas 3d上下文-- webGL，它可以很好地模拟透视变换。

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

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

添加:非透视倾斜是可能的(结果始终与原始结果平行)

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

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

这里有一把小提琴：http://jsfiddle.net/m1erickson/Rq7hk/

方法：

fabricObject.transformMatrix接受一个由6个元素组成的数组，每个元素表示仿射变换矩阵的各个部分。

在该矩阵中，第二个和第三个元素表示SkewY和SkewX。

因此，要创建skewY，您可以像这样创建一个rect：

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

我找到了一个使用polygon和php-imagemagick来解决fabricjs的方法。您可以将两者结合使用。