Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?

王林

Lepaskan： 2023-08-22 12:45:07

ke hadapan

1397 orang telah melayarinya

Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?

Dalam tutorial ini kita akan belajar cara untuk melumpuhkan berbilang titik kawalan tertentu.

Cipta objek imej menggunakan FabricJS. Kita boleh mencipta objek imej dengan mencipta contoh fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk melumpuhkan berbilang Untuk objek imej titik kawalan tertentu, kami menggunakan kaedah setControlsVisibility

Tatabahasa

setControlsVisibility(options: Object): fabric.Object

Salin selepas log masuk

Parameter

pilihan − Parameter ini menerima nilai Objek, digunakan untuk menetapkan keadaan yang boleh dilihat kawalan. Nilai yang mungkin adalah −
- ‘tl’ − Hartanah ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan sudut kiri atas
- ‘tr’ − Hartanah ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan sudut kanan atas
- ‘br’ − Sifat ini menerima Nilai Boolean untuk mendayakan atau melumpuhkan kawalan sudut kanan bawah 'bl' - Sifat ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan sudut kiri bawah ‘ml’ − Sifat ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan kiri tengah
- ‘mt’ − Hartanah ini menerima Nilai Boolean untuk mendayakan atau melumpuhkan kawalan pertengahan atas
- ‘mr’ − Hartanah ini menerima Nilai Boolean untuk mendayakan atau melumpuhkan kawalan tengah-kanan ‘mb’ − Atribut ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan pertengahan bawah
- ‘mtr’ − Hartanah ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan putaran pertengahan atas

Gunakan kaedah setControlsVisibility

Contoh

Mari kita lihat contoh kod untuk melihat output apabila kaedah setControlsVisibility dipanggil guna. Kaedah setControlsVisibility menetapkan keterlihatan berbilang kawalan yang ditentukan. wujud Dalam kes ini, kerana kami menetapkan kawalan "tl" dan "bl" kepada nilai palsu, bahagian atas sebelah kiri Dan kawalan di bahagian bawah sebelah kiri akan dilumpuhkan.

<!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 image object to see that the bottom-left and top-left controls have been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah setControlsVisibility untuk melumpuhkan putaran atas tengah

Terjemahan control ialah: control

Contoh

Dalam contoh ini, kami akan menggunakan kaedah setControlsVisibility untuk melumpuhkan kawalan "mtr" Ini 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 to disable the middle-top-rotate control
   </h2>
   <p>
      You can select the image object to see that the middle-top-rotate control has been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         mtr: false,
      });
   </script>
</body>
</html>

Salin selepas log masuk

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