Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?
Bagaimana untuk mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-25 10:13:07994semak imbas
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)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>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!