在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,你可以像这样创建一个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]
});