Bagaimana untuk mengunci pergerakan menegak Segitiga menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara mengunci pergerakan menegak segitiga menggunakan FabricJS. Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek segi tiga dalam kanvas, kita juga boleh menentukan sama ada kita mahu ia bergerak hanya pada paksi X. Ini boleh dilakukan menggunakan atribut lockMovementY.

Syntax

 new Fabric.Triangle({ lockMovementY: Boolean }: Object)

Parameter

• Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang lockMovementY ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Kunci pilihan

• lockMovementY Hartanah ini menerima nilai boolean. Jika kita memberikannya nilai "benar", objek itu tidak lagi dapat bergerak secara menegak. . "nilai.

  
  
  
  
  
  
  画布中 Triangle 对象的默认行为
  您可以选择三角形并将其拖动。请注意，您可以在水平和垂直方向上移动对象。
  
  
  // 启动画布实例
  var canvas = new Fabric.Canvas("canvas");
  canvas.setWidth(document.body.scrollWidth);
  画布.setHeight(250);
  
  // 初始化一个三角形对象
  var triangle = new Fabric.Triangle({
  左：105，
  顶部：70，
  宽度：90，
  身高：80，
  填写：“#ffc1cc”，
  笔划：“#fbaed2”，
  笔划宽度：5，
  });
  
  // 将其添加到画布中
  canvas.add(三角形);
  
  
  

Contoh 2
Melalui lockMovementY sebagai kunci dengan nilai "true"

Dalam contoh ini kita akan melihat bagaimana kita boleh mengunci pergerakan menegak objek segi tiga. Dengan memberikan nilai "benar" pada sifat

lockMovementY

, kita pada dasarnya menghentikan pergerakan menegak. rreeee

Atas ialah kandungan terperinci Bagaimana untuk mengunci pergerakan menegak Segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!