FabricJS - Bagaimana untuk menetapkan kedudukan objek Line berbanding dengan asal?

Dalam tutorial ini, kita akan belajar cara menetapkan kedudukan objek Line berbanding dengan asal menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contohfabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk menetapkan kedudukan objek Garis berbanding dengan asal, kami menggunakan kaedahsetPositionByOrigin.

Tatabahasa

setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): void

Parameter

• pos- Hartanah ini menerima nilaifabrik.Pointyang membolehkan kita menetapkan kedudukan baharu objek. < /p>

• originX- Hartanah ini menerima nilaiStringyang membolehkan kita menetapkan asal mendatar. Nilai yang mungkin adalah "kiri", "tengah", atau "kanan".

• originY- Hartanah ini menerima nilaiStringyang membolehkan kita menetapkan asal menegak. Nilai yang mungkin adalah "Atas", "Pusat", atau "Bawah".

Jangan gunakan kedudukan lalai kaedahsetPositionByOrigin

Contoh

Mari kita lihat contoh kod untuk melihat kedudukan lalai objek Line tanpa menggunakan kaedahsetPositionByOrigin.

     
  
Default position without using the setPositionByOrigin method 
 
You can see the default position of the line object
    

GunakansetPositionByOriginkaedah

Contoh

Mari lihat contoh kod untuk melihat rupa objek Line apabila menggunakan kaedahsetPositionByOrigin. Dalam contoh ini, kami menentukan kedudukan baharu objek dengan memulakan objek Titik dengan koordinat x dan y masing-masing 500 dan 100. Kami akan menetapkan kedudukan baharu objek garis, memikirkan asal mendatarnya sebagai "pusat" dan asal menegaknya sebagai "atas."

     
  
Using the setPositionByOrigin method
 
You can see the new position of the line object
    

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