Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah sengkang pada sempadan kawasan pilihan pada kanvas menggunakan FabricJS?

Bagaimana untuk menambah sengkang pada sempadan kawasan pilihan pada kanvas menggunakan FabricJS?

PHPzke hadapan: 2023-09-06 18:25:02603semak imbas

如何使用 FabricJS 将破折号添加到画布上选择区域的边框？

Dalam artikel ini, kita akan belajar cara menambah sempang pada sempadan kawasan pilihan pada kanvas menggunakan FabricJS. Kita boleh mencapai ini dengan menggunakan sifat SelectionDashArray. Ia membolehkan kami menetapkan sempadan kawasan pemilihan kepada garis putus-putus.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: Object)

Parameters

Element - Parameter ini ialah elemen
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Menggunakan parameter ini, anda boleh menukar banyak atribut yang berkaitan dengan kanvas, seperti warna, kursor dan lebar sempadan, antaranya selectionDashArray ialah satu atribut. Ia menerima tatasusunan yang menentukan corak sempang yang kita mahu.

Contoh 1

Melalui SelectionDashArray sebagai kunci kepada kelas strong>

selectionDashArray membolehkan kami menetapkan sempadan kawasan pemilihan kepada garis putus-putus. Cara untuk menentukan corak sempang adalah dengan menentukan panjang sengkang dalam tatasusunan. Dalam contoh di bawah, kami mengambil tatasusunan [7,6]. Ini bermakna, akan ada garisan panjang 7px, diikuti dengan jurang 6px, dan seterusnya.

<!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>Adding dashes to the border of a selection area on a canvas</h2>
   <p>Select an area around the object. The border of the selection area would have dashed lines.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionDashArray: [7, 6],
         selectionBorderColor: "red"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Menggunakan selectionDashArray dengan selectionLineWidth dan selectionBorderColor

selectionDashArray sifat boleh digunakan dalam pelbagai cara. Satu cara ialah menggunakannya bersama dengan selectionLineWidth dan selectionBorderColor, yang masing-masing menentukan lebar dan warna sempadan pilihan.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menambah sengkang pada sempadan kawasan pilihan pada kanvas 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：Bagaimana untuk mencari saiz asal imej menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mencari saiz asal imej menggunakan FabricJS?

Artikel berkaitan

Lihat lagi