【发布时间】：2013-10-03 12:19:17
【问题描述】：
我们有一些用图像源填充的对象。是否可以在fabric js中通过调整矩形网格位置来实现填充图像的透视变换？
我正在尝试在fabric js中实现类似于上面的图像......
【问题讨论】：
-
不能直接使用，但您可以在像素缓冲区上使用affine transformation 或projection。
标签： javascript html fabricjs perspective
【发布时间】：2013-10-03 12:19:17
【问题描述】：
FabricJS 或其他 2d 画布库无法实现真正的透视扭曲。
Canvas 的 2d 上下文不会进行透视变换。
大多数画布库，包括 fabricJS，都使用 2d 上下文。
有一个画布 3d 上下文——webGL 可以很好地模仿透视变换。
mrdoob 的threeJS 库是一个不错的3d 上下文库：
http://mrdoob.github.io/three.js/
[补充：非透视倾斜是可能的（结果总是与原始平行）]
在 fabricJS 中，您可以完全控制转换矩阵。
您可以使用该矩阵进行仅并行倾斜。
这是一个小提琴：http://jsfiddle.net/m1erickson/Rq7hk/
如何：
fabricObject.transformMatrix 采用由 6 个元素组成的数组，每个元素代表仿射变换矩阵的各个部分。
在该矩阵中，第二个和第三个元素代表 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]
});
【讨论】：
-
我不打算实现 3d 透视，但透视感觉像歪斜。我已经看到许多使用普通画布实现倾斜效果的链接。 1.jsbin.com/etecay/913/edit 2.jsfiddle.net/dTyRG 3.jsfiddle.net/UHSKL 是否可以用 Fabric JS 实现类似的倾斜效果？
-
FabricJS 可以进行普通（平行）倾斜。您的示例 #1 和 #3 使用 SkewY 来绘制倾斜的图像。我在上面的答案中添加了有关如何在 fabricJS 中执行此操作的代码。您的示例#2 使用 SkewY 和图像切片来创建透视效果。这在fabricJS中会更困难，但并非不可能。您可以用图像的许多倾斜的单像素切片填充一个组，直到整个图像以“类似透视”的显示方式呈现。这是一个关于图像切片如何工作的链接：subshell.com/en/subshell/blog/…
-
我正在尝试实现“类透视”功能，如示例 2 所示。截至目前，我正在普通画布（不是织物）上生成“类透视”图像，然后我正在用生成的图像填充我的织物对象。这种方法存在一些可用性和性能问题。所以我正在寻找更好的解决方案。您能否描述在fabric JS中实现此功能的确切步骤或算法..
-
嗯...我会使用类似的方法——在原生画布中创建切片图像，然后导入到 fabricJS。我还预计基于切片/绘制许多子图像的需要会影响性能 - 特别是如果您的切片是 1 像素宽。您可以尝试通过使用更宽的切片来平衡分辨率与性能。您能否发布有关您的可用性/性能问题的代码和更多详细信息？
我使用多边形和 php-imagemagick 找到了 fabricjs 的解决方案。你可以将两者结合起来。
【讨论】：
-
如何结合这个？能否请您详细解释一下。