hujung hadapan web
tutorial js
Bagaimana untuk melumpuhkan interaktiviti kanvas menggunakan FabricJS?
Bagaimana untuk melumpuhkan interaktiviti kanvas menggunakan FabricJS?
Sep 02, 2023 pm 03:33 PM
Dalam artikel ini, kita akan belajar cara melumpuhkan interaktiviti kanvas dalam FabricJS. Lapisan interaksi di atas setiap objek adalah salah satu ciri unik FabricJS. Sebaik sahaja kita memulakan kanvas, kita boleh memilih objek, menyeretnya atau memanipulasi pilihan kumpulan. Walau bagaimanapun, semua ini boleh dibuat asal dengan menyatakan sifat interaksi sebagai Palsu.
Sintaks
new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)Parameter
#🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜# - Parameter ini ialah elemen itu sendiri, yang boleh diperoleh daripada id elemen itu sendiri menggunakan document.getElementById() atau #🎜 🎜#. Kanvas FabricJS akan dimulakan pada elemen ini.
Pilihan (pilihan)- - Parameter ini ialah objek yang menyediakan akses kepada kanvas kami Buat tambahan penyesuaian. Menggunakan parameter ini, adalah mungkin untuk menukar sifat yang berkaitan dengan kanvas seperti warna, kursor, lebar sempadan dan banyak sifat lain, antaranya Interaktif ialah sifat yang membolehkan kita memutuskan sama ada kita mahukan kanvas interaktif atau tidak. Nilai lalai sifat ini ialah Benar.
Contoh 1
Apabila atribut interaktif didayakan
<!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>Disabling the interactivity of canvas</h2>
<p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: true,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Salin selepas log masuk
Contoh 2<!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>Disabling the interactivity of canvas</h2>
<p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: true,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Meluluskan kunci interaksi ke kelas
#🎜 lihat contoh kod untuk melihat cara melumpuhkan interaktiviti kanvas. Kita boleh menetapkan nilai Palsu pada sifat interaksi, yang akan menghapuskan lapisan interaksi di atas objek dalam kanvas.
<!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>Disabling the interactivity of canvas</h2>
<p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b>
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: false,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan interaktiviti kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Ganti aksara rentetan dalam javascript
Mar 11, 2025 am 12:07 AM
Ganti aksara rentetan dalam javascript
jQuery mendapatkan padding/margin elemen
Mar 01, 2025 am 08:53 AM
jQuery mendapatkan padding/margin elemen
HTTP Debugging dengan Node dan HTTP-Console
Mar 01, 2025 am 01:37 AM
HTTP Debugging dengan Node dan HTTP-Console
Tutorial Persediaan API Carian Google Custom
Mar 04, 2025 am 01:06 AM
Tutorial Persediaan API Carian Google Custom
