Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendayakan penskalaan berpusat pada kanvas menggunakan FabricJS?

Bagaimana untuk mendayakan penskalaan berpusat pada kanvas menggunakan FabricJS?

王林ke hadapan: 2023-08-29 13:29:02893semak imbas

如何使用 FabricJS 在画布上启用居中缩放？

Dalam artikel ini, kita akan belajar cara mendayakan penskalaan berpusat pada kanvas menggunakan FabricJS. Dalam FabricJS, apabila objek diseret dari sudut, objek berubah secara berkadar. Kita boleh menggunakan sifat centeredScaling untuk menggunakan pusat sebagai asal usul transformasi.

Sintaks

new fabric.Canvas(element: HTMLElement|String, { centeredScaling: 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. Anda boleh menggunakan parameter ini untuk menukar banyak atribut yang berkaitan dengan kanvas, seperti warna, kursor dan lebar jidar, antaranya centeredScaling ialah satu atribut. Ia menerima nilai Boolean yang menentukan sama ada objek harus menggunakan titik tengah sebagai asal transformasi. Nilai lalai ialah Palsu.
Contoh 1

<!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>Enabling centered scaling in canvas using FabricJS</h2>
   <p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         centeredScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Melalukan kunci Penskalaan berpusat ke kelas dengan nilai True#🎜🎜🎜 lalai,##🎜 Kekunci # 🎜🎜#centeredScaling

ditetapkan kepada palsu. Oleh itu, kita perlu menghantar kunci kepada kelas dan memberikannya nilai sebenar supaya objek boleh menggunakan pusatnya sebagai asal usul transformasi.

<!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>Enabling centered scaling in canvas using FabricJS</h2>
   <p>Here we have set <b>centeredScaling</b> to True. Select the object and try to resize it by its corners. The object will scale uniformly from its center. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         centeredScaling: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mendayakan penskalaan berpusat pada kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menukar nombor kepada tatasusunan dalam JavaScript?Artikel seterusnya：Bagaimana untuk menukar nombor kepada tatasusunan dalam JavaScript?

Artikel berkaitan

Lihat lagi