在fabricjs中填充图像的对象的透视转换

Question

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

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

Answer 1

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

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

大多数canvas库，包括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的解决方案。您可以将两者结合起来。