Bagaimana untuk menetapkan lebar lejang bulatan kanvas menggunakan Fabric.js?-tutorial js-php.cn

Bagaimana untuk menetapkan lebar lejang bulatan kanvas menggunakan Fabric.js?

WBOY

Lepaskan： 2023-08-28 13:53:05

ke hadapan

686 orang telah melayarinya

如何使用 Fabric.js 设置画布圆的描边宽度？

Sifat lebar lejang dan lejang digunakan untuk menetapkan warna lejang dan lebar lejang bulatan kanvas. Kelas bulatan mengandungi sifat yang berbeza tetapi untuk menetapkan warna dan lebar lejang kita menggunakan sifat kelebaran lejang dan lejang. Sifat strokeWidth digunakan untuk menentukan lebar bulatan kanvas.

Fabric.js Kelas Bulatan digunakan untuk menyediakan bentuk bulat melalui objek Fabric.Circle. Objek bulatan digunakan untuk menyediakan bentuk bulat dan bulatan boleh digerakkan dan boleh diregangkan mengikut keperluan. Lejang, warna, lebar, tinggi dan warna isi bulatan semuanya boleh disesuaikan. Berbanding dengan kelas kanvas, kelas Bulatan menyediakan fungsi yang kaya.

tatabahasa

Berikut ialah sintaks objek teks -

fabric.Circle({
   radius: number,
   stroke: string,
   strokeWidth: number
});

Salin selepas log masuk

parameter

radius - digunakan untuk menentukan jejari bulatan

stroke - Nyatakan warna strok.

Lebar lejang - digunakan untuk menentukan lebar lejang

Langkah

Ikuti langkah yang diberikan di bawah untuk menetapkan kecondongan mendatar bulatan kanvas menggunakan Fabric.js -

Langkah 1 - Sertakan pustaka Fabric.js dalam fail HTML

Langkah 2 - Buat elemen kanvas baharu

dalam fail HTML

Langkah 3 - Mulakan elemen kanvas

dalam kod JavaScript

Langkah 4 - Buat objek kelas Fabric.js Circle baharu dan tetapkan sifat skewX kepada nilai bulatan yang dikehendaki

Langkah 5 - Tambahkan objek bulatan pada kanvas

Contoh

Mari lihat cara menggunakan Fabric.js untuk menetapkan warna lejang dan lebar lejang bulatan kanvas -

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: green, stoke width: 20</p>
      <canvas id="strokecanvas"></canvas>
      <script>
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('strokecanvas'); 
       
         // Create a instance of fabric.Circle Class
         var circle6 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 70,
            stroke: "green",
            strokeWidth: 20
         }); 
         
         // Adding the Canvas
         canvas.add(circle6);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script> 
   </body> 
</html>

Salin selepas log masuk

Kod ini akan mencipta elemen bulatan kanvas baharu dengan ID yang ditentukan, mencipta objek kelas Bulatan Fabric.js baharu dan menetapkan warna lejang dan lebar lejang bulatan menggunakan sifat lejang dan lejang serta menambah objek bulat ke kanvas. Bulatan akan kelihatan condong secara mendatar pada kanvas.

Contoh

Mari kita lihat contoh lain, kita boleh menetapkan warna lejang dan lebar lejang bulatan kanvas dengan menggunakan kaedah dan sifat lebar lejang dan lejang seperti kiri, atas, isi, jejari dan sebagainya.

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: blue, stoke width: 20</p>
      <canvas id="canvasstroke"></canvas>

      <script>
         var canvas = new fabric.Canvas('canvasstroke'); 
         var circle5 = new fabric.Circle({
            top: 60,
            left: 60,
            fill: "violet",
            radius: 70,
            stroke: "blue",
            strokeWidth: 20
         }); 
         
         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

Salin selepas log masuk

Kod ini akan mencipta elemen bulatan kanvas baharu dengan ID dan saiz yang ditentukan, mencipta objek kelas Bulatan Fabric.js baharu dan menggunakan sifat strokeWidth untuk menetapkan bulatan kanvas kepada warna lejang dan lebar lejang serta Objek daripada kelas ini ditambahkan pada kanvas. Bulatan akan muncul pada kanvas dengan dimensi yang kami takrifkan dalam contoh.

KESIMPULAN

Dalam artikel ini, kami menunjukkan melalui contoh cara menetapkan lebar lejang dan warna lejang bulatan kanvas. Kami melihat dua contoh berbeza di sini di mana kami menggunakan sifat lejang dan lebar lejang untuk menetapkan lebar lejang dan warna kanvas bulat. Dalam contoh pertama, kami menggunakan sifat Stroke dan StrokeWidth untuk menetapkan warna dan lebar bulatan kanvas. Untuk contoh kedua, kami menggunakan kaedah sifat Stroke dan StrokeWidth dengan pelbagai parameter saiz (seperti Kiri, Atas, Isi, dll.) untuk menetapkan lebar dan lejang warna kanvas bulat.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar lejang bulatan kanvas menggunakan Fabric.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!