FabricJS - Bagaimana untuk melumpuhkan berbilang titik kawalan khusus objek Line?-tutorial js-php.cn

FabricJS - Bagaimana untuk melumpuhkan berbilang titik kawalan khusus objek Line?

WBOY

Lepaskan： 2023-08-24 20:17:06

ke hadapan

1179 orang telah melayarinya

FabricJS – 如何禁用 Line 对象的多个特定控制点？

Dalam tutorial ini, kita akan belajar cara untuk melumpuhkan berbilang titik kawalan khusus objek Line 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 contoh Fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk melumpuhkan berbilang titik kawalan khusus objek Line, kami menggunakan kaedah setControlsVisibility.

Syntax

 setControlsVisibility(options: Object): fabric.Object

Salin selepas log masuk

Parameter

Options - Parameter ini menerima nilai objek yang menetapkan kawalan. Nilai yang mungkin adalah -
- 'tl' - Sifat ini menerima nilai Boolean yang mendayakan atau melumpuhkan kawalan kiri atas.
- 'tr' - Sifat ini menerima nilai Boolean yang mendayakan atau melumpuhkan kawalan kanan atas.
- 'br' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan kanan bawah. . kawalan kiri bawah.
- 'mt' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan pertengahan atas.
- 'mr' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan tengah-kanan. < /p>
- 'mb' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan tengah-bawah.
- 'mtr' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan putaran pertengahan atas.
  < /li>
- Menggunakan setControlsVisibilitymethod
- Mari kita lihat contoh kod untuk melihat output apabila menggunakan setControlsVisibility Kaedah setControlsVisibility menetapkan keterlihatan berbilang kawalan yang ditentukan. Dalam kes ini, memandangkan kami memberikan nilai palsu kepada kawalan "tl" dan "bl", kawalan kiri atas dan kiri bawah akan dilumpuhkan.
```
<!DOCTYPE html>
<html>
<head>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the bottom-left and top-left controls have been disabled
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>
```
  Salin selepas log masuk
setControlsVisibility

Contoh Dalam contoh ini, kami akan menggunakan kaedah

setControlsVisibility

untuk melumpuhkan kawalan "mtr", yang juga dikenali sebagai kawalan putaran pertengahan atas .

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the middle-top-rotate control has been disabled
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         'mtr': false,
      });
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk melumpuhkan berbilang titik kawalan khusus objek Line?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!