Bagaimana untuk melumpuhkan titik kawalan tertentu objek Imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan titik kawalan tertentu objek Imej menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 15:25:02

ke hadapan

1513 orang telah melayarinya

如何使用 FabricJS 禁用 Image 对象的特定控制点？

Dalam tutorial ini kita akan belajar bagaimana untuk melumpuhkan titik kawalan tertentu imej Objek 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 dan banyak lagi. Untuk melumpuhkan khusus Untuk titik kawalan objek Imej, kami menggunakan kaedah setControlVisible.

Tatabahasa

setControlVisible(controlKey: String, visible: Boolean): fabric.Object

Salin selepas log masuk

Parameter

controlKey - Parameter ini menerima nilai String yang menentukan 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 di penjuru kanan sebelah atas.
- 'br' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan sudut kanan bawah.
- 'bl' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan sudut kiri bawah.
- 'ml' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan tengah-kiri.
- 'mt' - Hartanah ini menerima nilai boolean untuk mendayakan atau melumpuhkan kawalan pertengahan atas.
- 'mr' - Sifat ini menerima nilai boolean yang mendayakan atau melumpuhkan kawalan tengah-kanan.
- '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. < /p>
visible - Parameter ini menerima nilai Boolean, ditetapkan apabila "true" Menentukan sama ada kawalan kelihatan dan tidak kelihatan dengan "palsu".

Gunakan setControlVisiblekaedah

Contoh

Mari kita lihat contoh kod untuk melihat output apabila menggunakan kaedah setControlVisible. Kaedah setControlVisible menetapkan keterlihatan kawalan yang ditentukan. dalam kes ini, Memandangkan kami telah melepasi kawalan "br" kepada nilai yang salah, kawalan di sudut kanan bawah tidak akan Tidak kelihatan lagi.

<!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 setControlVisible method</h2>
   <p>
      You can select the image object to see that the bottom-right control is not visible
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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 setControlVisible method
      image.setControlVisible("br", false);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah setControlVisible untuk melumpuhkan putaran pertengahan atas Kawalan

Contoh

Dalam contoh ini, kami menggunakan kaedah setControlVisible untuk melumpuhkan kawalan "mtr", yang Juga dipanggil kawalan putaran atas-tengah.

<!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 setControlVisible method to disable the middle-top-rotate control
   </h2>
   <p>
      You can select the Image object to see that the middle-top-rotate control is not visible
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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 setControlVisible method
      image.setControlVisible("mtr", false);
   </script>
</body>
</html>

Salin selepas log masuk

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