6

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....

Community
  • 1
  • 1
user2571818
  • 273
  • 4
  • 9
  • 1
    Not directly but you can use [affine transformation](https://en.wikipedia.org/wiki/Affine_transformation) or [projection](https://en.wikipedia.org/wiki/3D_projection) on the pixel buffer. –  Oct 03 '13 at 19:03
  • Also see this answer http://stackoverflow.com/questions/3836036/mode7-like-perspective-transform-in-canvas?rq=1 –  Oct 03 '13 at 19:07
  • See https://groups.google.com/forum/#!topic/fabricjs/fKUNRYlJVAs – John Oct 04 '13 at 03:07

2 Answers2

6

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]
});
markE
  • 102,905
  • 11
  • 164
  • 176
  • I am not looking to implement 3d perspective but perspective feel like skewing. I have seen many links using plain canvas for skewing effect. 1. http://jsbin.com/etecay/913/edit 2. http://jsfiddle.net/dTyRG/ 3. http://jsfiddle.net/UHSKL/ Is it possible to implement similar skewing effect with Fabric JS? – user2571818 Oct 04 '13 at 06:06
  • FabricJS can do plain (parallel) skewing. Your examples #1 & #3 uses SkewY to draw the skewed image. I have added code on how to do this in fabricJS to my answer above. Your example#2 uses SkewY and image slicing to create a perspective effect. That would be more difficult, but not impossible in fabricJS. You could fill a group with many skewed-one-pixel-slices of an image until the whole image was presented in a "perspective-like" display. Here's a link on how image slicing works: http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html#jumpto – markE Oct 04 '13 at 17:00
  • I am trying to implement "perspective-like" feature as shown in my example 2. As of now i am generating a "perspective-like" image on a plain canvas(not fabric one) and then i am filling my fabric object with the generated image. I have some usability and performance issues with this approach. So i am looking for a better solution. Could you please describe the exact steps or algorithm to implement this feature in fabric JS.. – user2571818 Oct 07 '13 at 06:07
  • Hmmm...I would have used a similar method--creating a sliced image in native canvas and then importing to fabricJS. I would also anticipate a performance hit based on the need to slice/draw many sub-images--especially if your slices are 1 pixel wide. You might try balancing resolution vs performance by using wider slices. Could you post code and more details about your usability / performance concerns? – markE Oct 07 '13 at 15:20
0

i found a solution for fabricjs, using polygon and php-imagemagick. you can combine both.

Wael
  • 455
  • 1
  • 4
  • 17