javascript - Transformación de perspectiva de un objeto relleno con imagen en fabricjs

Tenemos algunos objetos llenos con fuente de imagen. ¿Es posible lograr una transformación de perspectiva de la imagen rellena ajustando las posiciones de la cuadrícula rectangular en Fabric JS?

Estoy intentando lograr algo similar a la imagen de arriba en Fabric JS...

Respuesta #1

Las verdaderas distorsiones de perspectiva no son posibles con FabricJS u otras bibliotecas de canvas 2D.

El contexto 2D de Canvas no realizará transformaciones de perspectiva.

La mayoría de las bibliotecas de canvas, incluyendo fabricJS, usan contextos 2D.

Hay un contexto 3D de canvas -- webGL que hará una buena imitación de las transformaciones de perspectiva.

La biblioteca threeJS de mrdoob es una buena biblioteca de contexto 3D:

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

[ adición: es posible el sesgado no perspectívico (los resultados siempre son paralelos al original) ]

En fabricJS tienes control total sobre la matriz de transformación.

Puedes usar esa matriz para hacer sesgado solo en paralelo.

Aquí hay un Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

Cómo :

fabricObject.transformMatrix toma un arreglo de 6 elementos, con cada elemento representando las partes de una matriz de transformación afín.

En esa matriz, el segundo y el tercer elemento representan el SkewY y el SkewX.

Entonces, para crear tu skewY, podrías crear un rect así:

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

Respuesta #2

Encontré una solución para FabricJS, usando polígono y PHP-Imagemagick. Puedes combinar ambos.