Dalam artikel ini, kita akan belajar cara menyesuaikan port pandangan kanvas menggunakan FabricJS. Port pandangan ialah kawasan kanvas yang boleh dilihat oleh pengguna. Kami boleh menyesuaikan viewport menggunakan sifat viewportTransform, yang membolehkan kami mengawal transformasi viewport
new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: Object)Element - Parameter ini ialah
berasal daripada id elemen itu sendiri. Kanvas FabricJS akan dimulakan pada elemen ini.Pilihan (pilihan)
- Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar sempadan dan banyak atribut lain yang berkaitan dengan kanvas, antaranya viewportTransform ialah atribut. Ia menerima tatasusunan 6 nilai yang digunakan untuk menentukan transformasi pada satah. Nilai lalai ialah canvas.viewportTransform = [1, 0, 0, 1, 0, 0].Melalukan atribut viewportTransform sebagai kunci kepada kelas
Mari kita lihat contoh kod untuk melihat cara menyesuaikan port pandangan kanvas. Dalam contoh ini, kami menggunakan nilai [0.7, 0.1, 0.5, 0.9, 20, 50] masing-masing untuk mewakili skalaX, condong, condongX, skalaY, terjemahan dan terjemahanY.
<!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>Customizing the viewport of the canvas using FabricJS </h2>
<p>Select an area around the object to see the viewports.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
viewportTransform: [0.7, 0.1, 0.5, 0.9, 20, 50]
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "red",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Lepaskan sifat viewportTransform sebagai kunci dengan nilai tersuai untuk mengecilkan objek
Mari kita lihat contoh kod lain yang menunjukkan perubahan yang berskala 80% dan kuali ke sudut kanan bawah tanpa menyengetkan.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk menyesuaikan port pandangan kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
