cari

Rumah  >  Artikel  >  hujung hadapan web  >  FabricJS - Bagaimana untuk menetapkan saiz sudut kawalan garisan?

FabricJS - Bagaimana untuk menetapkan saiz sudut kawalan garisan?

WBOY
WBOYke hadapan
2023-08-25 12:21:141004semak imbas

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)

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>

    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>

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!

对象 ul
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menukar rentetan kepada terapung dalam JavaScript?Artikel seterusnya：Bagaimana untuk menukar rentetan kepada terapung dalam JavaScript?

Artikel berkaitan

Lihat lagi