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

Answer 2

我找到了fabricjs的解決方案，使用polygon和php-imagemagick。 你可以兩者結合起來。