Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-03 20:57:08

ke hadapan

896 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!