Bagaimana untuk mendayakan penskalaan berpusat pada kanvas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mendayakan penskalaan berpusat pada kanvas menggunakan FabricJS?

王林

Lepaskan： 2023-08-29 13:29:02

ke hadapan

949 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

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

Lepaskan kunci Penskalaan berpusat dengan nilai palsu#🎜# #🎜🎜🎜🎜🎜🎜 #Mari kita lihat contoh kod untuk melihat cara objek berskala apabila centeredScaling ditetapkan kepada False.

<!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>

Salin selepas log masuk

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>  <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>
Salin selepas log masuk
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!