cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan kunci tersuai untuk mendayakan/melumpuhkan penskalaan bersatu pada kanvas FabricJS?

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

PHPz
PHPzke hadapan
2023-09-07 11:57:08968semak imbas

如何设置自定义键以启用/禁用 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)

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>

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>

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!

NULL 字符串 对象
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Cari hipotenus nombor dalam TypeScriptArtikel seterusnya：Cari hipotenus nombor dalam TypeScript

Artikel berkaitan

Lihat lagi