Bagaimana untuk menetapkan kunci tersuai untuk mendayakan/melumpuhkan penskalaan bersatu pada kanvas FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan kunci tersuai untuk mendayakan/melumpuhkan penskalaan bersatu pada kanvas FabricJS?

PHPz

Lepaskan： 2023-09-07 11:57:08

ke hadapan

982 orang telah melayarinya

如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放？

Dalam artikel ini, kita akan belajar cara menetapkan kunci tersuai untuk mendayakan/melumpuhkan penskalaan bersatu dalam FabricJS. Dalam FabricJS, apabila objek diseret dari sudut, objek berubah secara berkadar. Ini dipanggil penskalaan seragam. Walau bagaimanapun, kami boleh mendayakan/melumpuhkan tingkah laku ini menggunakan uniScaleKey.

Syntax

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

Salin selepas log masuk

Parameter

elemen#🎜🎜🎜🎜🎜 Parameter ini 🎜# Elemen itu sendiri boleh diperoleh daripada Dokumen. getElementById() atau id elemen itu sendiri. Kanvas FabricJS akan dimulakan pada elemen ini.

Pilihan (pilihan)

- Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada kanvas kami. Menggunakan parameter ini, anda boleh menukar banyak atribut yang berkaitan dengan kanvas, seperti warna, kursor dan lebar jidar, antaranya uniScaleKey ialah satu atribut. Ia menerima nilai rentetan yang menentukan kunci yang menogol penskalaan bersatu. Nilai lalainya ialah shiftKey. Contoh 1

Melepasi atribut uniScaleKey dengan nilai "altKey"

#🎜 Mari lihat uniScaleKey atribut yang digunakan dalam contoh Kod untuk kunci tersuai yang melumpuhkan penskalaan bersatu dalam FabricJS. Di sini kami menetapkan uniScaleKey kepada "altKey".

<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
   <p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
   // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: true,
         uniScaleKey: "altKey"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // 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

Lulus atribut uniScaleKey dengan nilai "ctrlKey"

#🎜🎜🎜 juga boleh lulus "🎜🎜 # 🎜🎜#ctrlKey”

’ sebagai nilai sifat uniScaleKey kerana ia juga merupakan kunci pengubah suai. Jika nilai NULL atau kunci yang bukan kunci pengubah ditentukan untuk uniScaleKey, fungsinya akan dilumpuhkan.

Dalam contoh ini, uniformScaling

telah diberikan nilai palsu, yang bermaksud ciri itu telah dilumpuhkan. Sebaik sahaja kami menekan

ctrlKey, penskalaan seragam akan didayakan semula.

<!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>Setting a custom key to enable/disable uniform scaling on a canvas </h2>
   <p>Hold the <b>ctrl</b> key and stretch the object diagonally. It will scale uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: false,
         uniScaleKey: "ctrlKey"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // 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 menetapkan kunci tersuai untuk mendayakan/melumpuhkan penskalaan bersatu pada kanvas FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!