Dalam tutorial ini, kita akan belajar cara menetapkan nisbah minimum yang dibenarkan bagi Bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek bulat dengan menambahkan warna isian, mengalih keluar sempadannya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan atribut minScaleLimit untuk menetapkan skala minimum yang dibenarkan.
new fabric.Circle({ minScaleLimit : Number }: Object)#🎜#🎜 pilihan (pilihan #🎜#🎜) # - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar jidar dan banyak sifat lain yang dikaitkan dengan objek yang minScaleLimit ialah hartanya. < /em>
Kunci pilihannombor sebagai nilai yang membolehkan kami mengawal bahagian minimum bulatan yang dibenarkan. Contoh 1
Kemunculan objek bulat lalai<!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 the minimum allowed scale value of circle using FabricJS</h2>
<p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Contoh 2
Lulus atributminScaleLimit sebagai kunci dengan nilai tersuai ini ##🎜 kita akan melihat cara memberikan nilai kepada sifat minScaleLimit
mengubah nilai skala minimum yang dibenarkan untuk objek bulat dalam kanvas. Di sini kita menggunakan 0.8 sebagai nilai, yang bermaksud kita tidak akan dapat mengecilkan objek kepada jejari lebih kecil daripada 64 piksel, yang dikira dengan<!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 the minimum allowed scale value of circle using FabricJS</h2>
<p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original radius, beyond which you cannot scale it down any further. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 80,
fill: "#ff1493",
minScaleLimit: 0.8
});
// 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 nilai skala minimum yang dibenarkan untuk Bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
