Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Perspective Transformation of object filled with image in fabricjs

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?

enter image description here

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

like image 315
user2571818 Avatar asked Oct 03 '22 19:10

user2571818


1 Answers

True perspective distortions are not possible with FabricJS or other 2d canvas libraries.

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

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

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

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

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

[ addition: non-perspective skewing are possible (results are always parallel to the original) ]

In fabricJS you have complete control over the transformation matrix.

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

Here's a Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

How:

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

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]
});
like image 54
markE Avatar answered Oct 07 '22 19:10

markE