Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyesuaikan port pandangan kanvas menggunakan FabricJS?

Bagaimana untuk menyesuaikan port pandangan kanvas menggunakan FabricJS?

王林ke hadapan: 2023-09-03 10:13:05613semak imbas

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

Syntax

new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: Object)

Parameters

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].

Contoh 1

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>

Contoh 2

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.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan port pandangan kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 canvas

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menyemak jenis pembolehubah atau objek dalam JavaScript?Artikel seterusnya：Bagaimana untuk menyemak jenis pembolehubah atau objek dalam JavaScript?

Artikel berkaitan

Lihat lagi