在fabricjs中用图像填充对象的透视图转换 [英] Perspective Transformation of object filled with image in fabricjs

问题描述

我们有一些填充有图像源的对象.可以通过调整布料js中的矩形网格位置来实现填充图像的透视变换?

We have some objects filled with image source. Is it possible to achieve perspective transformation of the filled image with adjusting rectangular grid positions in fabric js?

我正在尝试在Fabric js中实现与以上图像类似的结果.

i am trying to achieve similar to the above image in fabric js....

推荐答案

FabricJS或其他2d canvas库无法实现正确的透视变形.

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

Canvas's 2d context will not do perspective transforms.

大多数画布库，包括fabricJS，都使用2d上下文.

Most canvas libraries, including fabricJS, use 2d contexts.

有一个canvas 3d上下文-webGL，它将很好地模仿透视变换.

There is a canvas 3d context -- webGL that will do a good imitation of perspective transforms.

mrdoob的threeJS库是一个很好的3d上下文库:

The threeJS library by mrdoob is a good 3d context library:

http://mrdoob.github.io/three.js/

[另外:可能会出现非透视性的倾斜(结果始终与原始倾斜)]

在fabricJS中，您可以完全控制转换矩阵.

In fabricJS you have complete control over the transformation matrix.

您可以使用该矩阵进行仅并行倾斜.

You can use that matrix to do parallel-only skewing.

这是一个小提琴: http://jsfiddle.net/m1erickson/Rq7hk/

方法:

fabricObject.transformMatrix包含6个元素组成的数组，每个元素代表仿射变换矩阵的各个部分.

fabricObject.transformMatrix takes an array of 6 elements with each element representing the parts of an affine transformation matrix.

在该矩阵中，第2个和第3个元素代表SkewY和SkewX.

In that matrix, the 2nd and 3rd elements represent the SkewY and SkewX.

因此要创建您的偏斜，您可以创建一个矩形，如下所示:

So to create your skewY, you could create an rect like this:

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

这篇关于在fabricjs中用图像填充对象的透视图转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！