Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?
Bagaimana untuk melumpuhkan beberapa titik kawalan khusus objek imej menggunakan FabricJS?
- 王林ke hadapan
- 2023-08-22 12:45:071376semak imbas
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 setControlsVisibilityTatabahasa
setControlsVisibility(options: Object): fabric.Object
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>
Gunakan kaedah setControlsVisibility untuk melumpuhkan putaran atas tengah
Terjemahan control ialah: controlContoh
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>
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!