javascript - Transformacja perspektywiczna obiektu wypełnionego obrazem w fabricjs

Mamy kilka obiektów wypełnionych źródłem obrazu. Czy możliwe jest uzyskanie transformacji perspektywicznej wypełnionego obrazu poprzez dostosowanie pozycji prostokątnej siatki w fabric js?

Próbuję osiągnąć coś podobnego do powyższego obrazu w Fabric JS...

Odpowiedź #1

Prawdziwe zniekształcenia perspektywy nie są możliwe w FabricJS ani w innych bibliotekach 2D canvas.

Kontext 2D w Canvasie nie obsługuje transformacji perspektywicznych.

Większość bibliotek canvas, w tym fabricJS, używa kontekstów 2D.

Istnieje kontekst 3D na elemencie canvas — WebGL, który dobrze imituje przekształcenia perspektywiczne.

Biblioteka threeJS autorstwa mrdoob jest dobrą biblioteką kontekstu 3D:

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

[ dodatek: możliwe są zniekształcenia niezależne od perspektywy (wyniki są zawsze równoległe do oryginału) ]

W fabricJS masz pełną kontrolę nad macierzą transformacji.

Możesz użyć tej macierzy do przekształceń równoległych tylko wzdłuż skośnej.

Oto Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

Jak :

fabricObject.transformMatrix przyjmuje tablicę 6 elementów, z których każdy reprezentuje części macierzy transformacji afinicznej.

W tej macierzy drugi i trzeci element reprezentują SkewY i SkewX.

Aby więc stworzyć swoje skewY, możesz utworzyć prostokąt w ten sposób:

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

Odpowiedź #2

Znalazłem rozwiązanie dla fabricjs, używając poligonu i php-imagemagick. Możesz połączyć oba.