FabricJS - Bagaimana untuk mendapatkan kedudukan objek Imej berbanding dengan asal?

Dalam tutorial ini, kita akan belajar cara mendapatkan kedudukan objek Imej berbanding asalnya menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contohfabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mendapatkan kedudukan objek Imej berbanding dengan asal, kami menggunakan kaedahgetPointByOrigin.

Tatabahasa

getPointByOrigin(originX: String, originY: String): fabric.Point

Parameter

• originX- Parameter ini menerimaStringyang menyatakan asal mendatar. Nilai yang mungkin adalah "kiri", "tengah", atau "kanan".

• originY- Parameter ini menerimaStringmewakili asal menegak. Nilai yang mungkin adalah "Atas", "Pusat", atau "Bawah".

GunakangetPointByOriginkaedah

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedahgetPointByOrigin. KaedahgetPointByOriginmengembalikan koordinat objek asal yang ditentukan pengguna. Dalam contoh ini, kami juga menggunakan kaedahgetCenterPointsupaya anda boleh melihat titik tengah sebenar objek Imej yang diberikan. Dan apabila menggunakan kaedahgetPointByOrigin, kita menggunakan titik kiri bawah sebagai asal, jadi output yang direkodkan ialah x= 110 dan y= 132.

     
  
Using getPointByOrigin method
 
 You can open console from dev tools and see that the logged output contains the coordinates 
     

Gunakan kaedahgetPointByOrigindengan nilai yang berbeza

Contoh

Dalam contoh ini, kami menggunakan kaedahgetPointByOriginuntuk mendapatkan koordinat objek Imej apabila titik tengah mendatar dan menegak adalah 'kanan' dan 'atas'. Ini bermakna titik kanan atas akan dianggap sebagai pusat.

     
  
Using getPointByOrigin method with different values
 
 You can open console from dev tools and see that the logged output contains the coordinates 
     

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk mendapatkan kedudukan objek Imej berbanding dengan asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!