Bagaimana untuk menambah sengkang pada sempadan kawasan pilihan pada kanvas menggunakan FabricJS?-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-09-06 18:25:02

ke hadapan

624 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

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

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>

Salin selepas log masuk

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!