Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan corak sempang untuk sudut kawalan segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan corak sempang untuk sudut kawalan segi empat tepat menggunakan FabricJS?

WBOYke hadapan: 2023-08-30 15:21:031026semak imbas

如何使用 FabricJS 为矩形的控制角设置虚线图案？

Dalam tutorial ini, kita akan belajar cara melaksanakan corak bertitik yang mengawal bucu segi empat tepat menggunakan FabricJS. Sudut kawalan objek membolehkan kita menskala, meregangkan atau menukar kedudukannya.

Kami boleh menyesuaikan sudut kawalan dalam pelbagai cara, seperti menambah warna tertentu padanya, menukar saiznya, dsb. Kita juga boleh menggunakan atribut cornerDashArray untuk menentukan corak garis putus-putus yang mengawal penjuru.

Syntax

new fabric.Rect({ cornerDashArray: Array }: Object)

Parameter

#🎜🎜🎜##🎜🎜🎜#Pilihan ini parameter ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang cornerDashArray ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

cornerDashArray diterima#🎜 🎜#Array
, yang membolehkan kami menentukan corak bertitik yang mengawal sudut. Contohnya, jika kita melepasi tatasusunan dengan nilai [2,3], ia mewakili corak sempang 2px sengkang dan 3px jurang, dan corak ini berulang tanpa had. Contoh 1

#🎟

<!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>Default appearance of controlling corners</h2>
   <p>Select the rectangle to see the default appearance</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      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: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Contoh 2

Melalui sudutDashArray property sebagai kunci

#🎜🎜🎜🎜#🎜🎜 property sebagai key corner ini Lulus nilai [1,2,1]. ini Bermaksud corak bertitik akan dibuat dengan garisan panjang 1px diikuti dengan Jurang 2px, kemudian lukis garisan panjang 1px sekali lagi, selepas itu jurang 1px akan dilukis Pengeluaran dan banyak lagi.

<!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>Passing cornerDashArray property as key</h2>
   <p>Select the rectangle to see the appearance of the controlling corners with dash pattern</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      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: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
         cornerDashArray: [1, 2, 1],
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk menetapkan corak sempang untuk sudut kawalan segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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

Artikel sebelumnya：Bagaimanakah cara menukar rentetan untuk dipaparkan sebagai superskrip menggunakan JavaScript?Artikel seterusnya：Bagaimanakah cara menukar rentetan untuk dipaparkan sebagai superskrip menggunakan JavaScript?

Artikel berkaitan

Lihat lagi