Fabric.js: Feature Request / Suggestion - 2d Perspective Projections with Quadrilateral Interpolation

[gschoppe]

Could the effect seen here: http://jsfiddle.net/rjw57/CJy24/ (quadrilateral interpolation) be used to enable perspective controls for shapes and images?

[asturur]

yes why not.
Is not that easy to implement properly in fabric.... i like it a lot to be honest.

[gschoppe]

As reference, here are some other examples of accomplishing the same perspective warp with images:

This is a great example of triangular subdivision that has a "blur" option that can help to hide the seams between triangles:

https://codepen.io/infernalmaster/pen/lbpfF

This is an alternative method that uses vertical slices of the image, rather than triangles... the math is simpler for the actual transform, since all the slices are rectangles, but it falls apart if you need to render perspective shifts in both axes:

https://codepen.io/infernalmaster/pen/fgFuj

This one is the most advanced option, which rather than using triangles or slices, actually implements a full 3x3 transformation matrix on the image in javascript. It's a cool proof of concept, and is certainly more "pure", but the performance is very low compared to the other two.

http://www.leven.ch/canvas/perspective.html

I have the knowledge to understand these at a high level, but not enough to implement into Fabric.js. However, draggable perspective on images would be an amazing feature for the core, and would make real image compositing possible.

[asturur]

the point is that fabric should not be considered an image editor.
Anyway i need to look into it, if i found a viable way to make it work i can merge it, if not you can still have the code, not a problem.

[asturur]

I find the first example the most interesting and pratical for fabric.

[gschoppe]

I completely agree, and thanks for taking the time to look into it 😃

[gonzag]

Hi @asturur, any updates in this feature ?

[karthickvkumar]

Hi @asturur, any updates in this feature ?

[kordix]

Hi @asturur, any updates in this feature ?
I join to that question

[asturur]

no. I implemented it privately. Does not work great, i cannot share the code.