Bagaimana untuk menetapkan ketinggian elips menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan ketinggian elips menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 15:05:07

ke hadapan

983 orang telah melayarinya

如何使用 FabricJS 设置椭圆的高度？

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)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek< /em> 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 membolehkan kita menentukan ketinggian objek. Nilai yang ditetapkan menentukan ketinggian.

Contoh 1

tinggiTingkah laku lalai harta< /strong>

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>

Salin selepas log masuk

Contoh 2

Melalui atribut height sebagai kunci

Oleh kerana saiz elips ditentukan oleh jejari mendatar dan menegak, tidak akan ada perubahan dalam saiznya.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!