cari

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

Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-03 20:57:08975semak 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 itu sendiri, yang boleh diperolehi daripada id elemen itu sendiri menggunakan Bdocument.dget. 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 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>
    • output

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