Bagaimana untuk membuat segi empat tepat dengan warna sempadan menggunakan FabricJS?-tutorial js-php.cn

Jadual Kandungan

Syntax

Parameter

Kunci pilihan

Contoh 2

Rumah

hujung hadapan web

tutorial js

Bagaimana untuk membuat segi empat tepat dengan warna sempadan menggunakan FabricJS?

Sep 09, 2023 pm 08:53 PM

如何使用 FabricJS 创建带有边框颜色的矩形？

Dalam tutorial ini, kami akan mencipta segi empat tepat dengan warna sempadan menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas fabric.Rect dan menambahkannya pada kanvas.

Memandangkan FabricJS sangat fleksibel, kami boleh menyesuaikan objek segi empat tepat kami dalam apa jua cara yang kami suka. Salah satu sifat yang disediakan oleh FabricJS ialah borderColor, yang membolehkan kita memanipulasi warna sempadan apabila objek itu aktif.

Syntax

1	`new` `fabric.Rect({ borderColor: String }: Object)`

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang borderColor ialah atribut.

Kunci pilihan

borderColor - Sifat ini menerima rentetan yang menyatakan warna jidar apabila memilih objek segi empat tepat. Nilai lalainya ialah rgb(178,204,255).

Contoh 1

Melalui kunci warna sempadan menggunakan nilai rentetan

Mari kita lihat contoh kod untuk memahami cara menetapkan nilai pada sifat borderColor. Kami telah memberikan nilai "biru" kepada kekunci borderColor, yang membantu mencipta sempadan biru apabila memilih objek segi empat tepat.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Passing borderColour key with a String value&lt;/h2&gt;
   &lt;p&gt;Select the rectangle to see the border colour&lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
 
      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: &quot;#cf1020&quot;,
         borderColor: &quot;blue&quot;,
         padding: 9,
      });
 
      // Add it to the canvas
      canvas.add(rect);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Contoh 2

Melalukan nilai RGBA ke kekunci borderColor

Daripada menghantar nama warna ringkas sebagai rentetan, kita juga boleh menggunakan nilai RGBA yang komponennya menentukan Jumlah Merah, Hijau, Biru dan Alpha daripada , dengan alfa mewakili kelegapan. Dalam contoh ini kami menggunakan rgb(128,0,128) iaitu nilai rgb untuk ungu.

Atas ialah kandungan terperinci Bagaimana untuk membuat segi empat tepat dengan warna sempadan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn