Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?

Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?

WBOYke hadapan: 2023-09-03 20:57:08872semak imbas

如何使用 FabricJS 禁用画布中的统一缩放？

Dalam artikel ini, kita akan belajar cara melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS. Dalam FabricJS, apabila objek diseret dari sudut, objek berubah secara berkadar. Walau bagaimanapun, kami boleh melumpuhkan tingkah laku ini menggunakan atribut uniformScaling.

Syntax

new fabric.Canvas(element: HTMLElement|String, { uniformScaling: Boolean }: Object)

Parameters

Element - Parameter ini ialah elemen

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Menggunakan parameter ini, anda boleh menukar sifat berkaitan kanvas seperti warna, kursor, lebar jidar dan banyak sifat lain, yang mana uniformScaling ialah sifat. Ia menerima nilai Boolean yang menentukan sama ada objek harus diskalakan secara berkadar. Nilai lalainya ialah Benar. . Bermula dengan FabricJS versi 4, sifat uniScaleTransform telah dialih keluar dan digantikan dengan uniformScaling. . Mari lihat rupa kod itu -

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
      // UniformScaling is disabled
         uniformScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penskalaan bersatu dalam 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：Semak sama ada rentetan dalam JavaScript boleh menjadi palindromArtikel seterusnya：Semak sama ada rentetan dalam JavaScript boleh menjadi palindrom

Artikel berkaitan

Lihat lagi