Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan ketinggian elips menggunakan FabricJS?
Bagaimana untuk menetapkan ketinggian elips menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-24 15:05:07909semak imbas
Dalam tutorial ini, kita akan belajar cara menetapkan ketinggian elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kami akan mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh memanipulasi objek elips dengan menukar kedudukannya, kelegapan, lejang dan saiznya. FabricJS membolehkan kami mengawal saiz objek menggunakan sifat lebar dan tinggi.
Syntax
new fabric.Ellipse({ height: Number }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang tingginya ialah harta.
Kunci Pilihan
Ketinggian - Hartanah ini menerima nombor strong> membolehkan kita menentukan ketinggian objek. Nilai yang ditetapkan menentukan ketinggian.
Contoh 1
tinggiTingkah laku lalai harta
Mari kita ambil contoh untuk memahami tingkah laku lalai harta tinggi.
<!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>How to set the height of an Ellipse using FabricJS?</h2>
<p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 100,
top: 100,
fill: "white",
rx: 100,
ry: 60,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Contoh 2
Melalui atribut height sebagai kunci
Oleh kerana saiz elips ditentukan oleh jejari mendatar dan menegak, tidak akan ada perubahan dalam saiznya.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!