我们有一些填充了图像源的对象。是否可以通过调整fabric js中的矩形网格位置来实现填充图像的透视变换?
我正在尝试在fabric js中实现与上面的图像类似的效果。
发布于 2013-10-03 23:49:17
使用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,