javascript - Transformasi Perspektif objek yang diisi dengan imej dalam fabricjs

Kami mempunyai beberapa objek yang diisi dengan sumber imej. Adakah mungkin untuk mencapai transformasi perspektif pada imej yang diisi dengan menyesuaikan posisi grid segi empat tepat dalam fabric js?

saya sedang cuba mencapai sesuatu yang serupa dengan imej di atas dalam fabric js....

Jawapan #1

Distorsi perspektif sebenar tidak mungkin dilakukan dengan FabricJS atau pustaka kanvas 2d yang lain.

Konteks 2d Canvas tidak akan melakukan transformasi perspektif.

Kebanyakan perpustakaan kanvas, termasuk fabricJS, menggunakan konteks 2D.

Terdapat konteks 3D kanvas -- webGL yang akan melakukan peniruan transformasi perspektif dengan baik.

Perpustakaan threeJS oleh mrdoob adalah perpustakaan konteks 3D yang baik:

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

[ penambahan: penyelewengan bukan perspektif adalah mungkin (keputusan sentiasa selari dengan yang asal) ]

Dalam fabricJS anda mempunyai kawalan sepenuhnya ke atas matriks transformasi.

Anda boleh menggunakan matriks itu untuk melakukan pemiringan hanya selari.

Berikut adalah Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

Bagaimana :

fabricObject.transformMatrix mengambil satu tatasusunan yang terdiri daripada 6 elemen di mana setiap elemen mewakili bahagian-bahagian matriks transformasi afine.

Dalam matriks itu, elemen ke-2 dan ke-3 mewakili SkewY dan SkewX.

Jadi untuk membuat skewY anda, anda boleh membuat sebuah segiempat seperti ini:

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

Jawapan #2

Saya menemui penyelesaian untuk fabricjs, menggunakan poligon dan php-imagemagick. Anda boleh menggabungkan kedua-duanya.