Bagaimana untuk mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-25 10:13:07

ke hadapan

1060 orang telah melayarinya

如何使用 FabricJS 通过角点非均匀地调整对象大小？

Dalam artikel ini, kita akan belajar cara mengubah saiz objek secara tidak seragam mengikut sudut menggunakan FabricJS. Dalam FabricJS, apabila objek diseret dari sudut, objek berubah secara berkadar. Walau bagaimanapun, kita boleh mengawal tingkah laku ini dengan menekan uniScaleKey.

Syntax

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

Salin selepas log masuk

Parameter

Element - Parameter ini ialah elemen
Pilihan (pilihan)
- Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi 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 menunjukkan kunci mana yang menogol penskalaan bersatu. Nilai lalainya ialah shiftKey. Nilai kunci yang mungkin adalah: altKey, shiftKey dan ctrlKey.
Contoh 1

Tekan kekunci shift untuk melumpuhkan penskalaan seragam

Apabila objek diubah dengan menyeret tepi sambil mengekalkan nisbah bidang, kita katakan objek itu berskala seragam. uniScaleKey membolehkan kami mengawal tingkah laku ini di tempat kejadian. Secara lalai, objek dalam FabricJS berskala secara berkadar. Mari lihat contoh kod untuk melihat cara objek berskala tidak seragam apabila kekunci shift ditekan.

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>shift</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // 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);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Tukar nilai uniScaleKey kepada ctrlKey

Walaupun nilai lalainya ialah shiftKey
, kita juga boleh menggunakan nilai:
'ctrlKey' dan '' Jika NULL atau sebarang kekunci lain ditentukan, ciri ini akan dilumpuhkan. rreeee
Atas ialah kandungan terperinci Bagaimana untuk mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!