javascript - Perspektivtransformation av objekt fyllt med bild i fabricjs

Vi har några objekt fyllda med bildkälla. Är det möjligt att uppnå perspektivtransformation av den fyllda bilden genom att justera rektangulära rutnätspositioner i Fabric.js?

jag försöker uppnå något liknande som bilden ovan i fabric js....

Svar #1

Verkliga perspektivförvrängningar är inte möjliga med FabricJS eller andra 2D-canvasbibliotek.

Canvas 2D-kontext kommer inte att utföra perspektivtransformationer.

De flesta canvas-bibliotek, inklusive fabricJS, använder 2D-kontexter.

Det finns ett canvas 3D-kontext -- webGL som kommer att göra en bra imitation av perspektivtransformer.

ThreeJS-biblioteket av mrdoob är ett bra 3D-kontextbibliotek:

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

[ tillägg: icke-perspektivisk snedvridning är möjlig (resultaten är alltid parallella med originalet) ]

I fabricJS har du fullständig kontroll över transformationsmatrisen.

Du kan använda den matrisen för att göra parallell-endast snedvridning.

Här är en Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

Hur :

fabricObject.transformMatrix tar en array med 6 element där varje element representerar delarna av en affin transformationsmatris.

I den matrisen representerar det 2:a och 3:e elementet SkewY och SkewX.

Så för att skapa din skewY kan du skapa en rektangel så här:

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

Svar #2

Jag hittade en lösning för fabricjs, genom att använda polygon och php-imagemagick. Du kan kombinera båda.