FabricJS - Bagaimana untuk menetapkan saiz sudut kawalan garisan?-tutorial js-php.cn

FabricJS - Bagaimana untuk menetapkan saiz sudut kawalan garisan?

WBOY

Lepaskan： 2023-08-25 12:21:14

ke hadapan

967 orang telah melayarinya

FabricJS – 如何设置线的控制角的大小？

Dalam tutorial ini, kita akan belajar cara menetapkan saiz sudut kawalan Garisan 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 boleh menukar saiz menggunakan harta cornerSize. p>

Syntax

 new fabric.Line( points: Array, { cornerSize: Number }: Object)

Salin selepas log masuk

Parameter

points - Parameter ini menerima tatasusunan titik yang menentukan (x1, y1) dan (x2, y2) yang merupakan nilai permulaan dan garis masing-masing koordinat paksi-x dan koordinat paksi-y.
pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek kami. Menggunakan parameter ini, anda boleh menukar asal objek, lebar lejang dan banyak sifat lain yang berkaitan dengan sifat cornerSize.

Kekunci Pilihan

cornerSize - Sifat ini menerima nombor yang membolehkan kami memanipulasi saiz sudut kawalan objek yang dipilih. Nilai lalainya ialah 13.

Saiz lalai sudut kawalan

Contoh

Mari kita lihat contoh yang menerangkan saiz lalai sudut kawalan apabila objek garisan dipilih secara aktif.

<!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 size of the controlling corners</h2>
   <p>You can select the line object to see the default size of controlling corners</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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Salin selepas log masuk

Lulus saiz sudut sebagai kunci dengan nilai tersuai

Contoh

Dalam contoh ini, kami melepasi atribut cornerSize sebagai kunci dengan nilai 17. Kita dapat melihatnya apabila objek garis dipilih.

<!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 cornerSize as key with a custom value</h2>
   <p>You can select the line object to see the size of controlling corners</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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "#87a96b",
         cornerSize: 17,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk menetapkan saiz sudut kawalan garisan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!