javascript - Perspektiivimuunnos kuvalla täytetylle objektille fabricjs:ssä

Meillä on joitakin objekteja, jotka on täytetty kuvalla. Onko mahdollista saavuttaa kuvan perspektiivinen muunnos säätämällä suorakulmaisen ruudukon paikkoja Fabric.js:ssä?

Yritän saavuttaa jotain samanlaista kuin yllä olevassa kuvassa Fabric JS:ssä...

Vastaus #1

Todelliset perspektiivivääristymät eivät ole mahdollisia FabricJS:llä tai muilla 2D-kangas-kirjastoilla.

Canvasin 2D-konteksti ei tee perspektiivimuunnoksia.

Suurin osa kankaan kirjastoista, mukaan lukien fabricJS, käyttää 2D-konteksteja.

On olemassa kangas 3D-konteksti -- WebGL, joka tekee hyvän jäljittelyn perspektiivimuunnoksista.

mrdoobin threeJS-kirjasto on hyvä 3D-kontekstikirjasto:

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

[ lisäys: perspektiivin vääristymättömät siirrot ovat mahdollisia (tulokset ovat aina alkuperäisen kanssa rinnakkaisia) ]

FabricJS:ssä sinulla on täydellinen hallinta muunnosmatriisiin.

Voit käyttää tuota matriisia tehdäksesi vain rinnakkaista vinouttamista.

Tässä on Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

Kuinka :

fabricObject.transformMatrix ottaa 6 elementin taulukon, jossa jokainen elementti edustaa osaa affiinisen muunnosmatriisin osista.

Siinä matriisissa toinen ja kolmas alkio edustavat SkewY:tä ja SkewX:ää.

Joten luodaksesi skewY:n, voit luoda suorakulmion näin:

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

Vastaus #2

Löysin ratkaisun FabricJS:lle käyttämällä monikulmiota ja PHP-ImageMagickia. Voit yhdistää molemmat.