Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan jejari mendatar dan menegak elips menggunakan FabricJS?

Bagaimana untuk menetapkan jejari mendatar dan menegak elips menggunakan FabricJS?

PHPzke hadapan: 2023-09-12 09:25:02591semak imbas

如何使用 FabricJS 设置椭圆的水平和垂直半径？

Dalam tutorial ini, kita akan belajar cara menetapkan jejari mendatar dan menegak elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek elips dengan menyatakan kedudukan, warna, kelegapan dan saiznya. Walau bagaimanapun, sifat yang paling penting ialah rx dan ry, yang membolehkan kita menentukan jejari mendatar dan menegak elips.

Syntax

new fabric.Ellipse({ rx : Number, ry: Number }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, adalah mungkin untuk menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek dengan sifat rx dan ry.
li>

kunci pilihan

rx - Hartanah ini menerima nilai numeric. Nilai yang ditetapkan menentukan jejari mendatar objek elips.
ry - Hartanah ini menerima nilai numeric. Nilai yang ditetapkan menentukan jejari menegak objek elips.

Contoh 1Penampilan lalai apabila

rx dan ry tidak digunakan

Kod berikut menunjukkan cara objek elips akan muncul apabila rx dan property rx

Dalam contoh ini, kita dapat melihat bahawa kami menggunakan warna isian untuk menemui elips, yang tidak kelihatan kerana kami tidak menetapkan jejari mendatar dan menegak kepadanya.

<!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 horizontal and vertical radius of an Ellipse using FabricJS</h2>
      <p>Here we are getting a blank output because we have not assigned any horizontal and vertical radius.</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: 115,
            top: 50,
            fill: "red",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2

Melepasi atribut rx dan ry sebagai kunci

Dalam contoh ini, kami menghantar nilai 100 dan 70 kepada rx dan atribut masing-masing. Jadi objek elips kami mempunyai jejari mendatar 100 piksel dan jejari menegak 70 piksel. rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan jejari mendatar dan menegak elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Program JavaScript untuk menjana matriks yang jumlah subpepenjurunya adalah sama dengan kuasa dua sempurnaArtikel seterusnya：Program JavaScript untuk menjana matriks yang jumlah subpepenjurunya adalah sama dengan kuasa dua sempurna

Artikel berkaitan

Lihat lagi