cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mengekalkan lebar lejang elips apabila menskala menggunakan FabricJS?

Bagaimana untuk mengekalkan lebar lejang elips apabila menskala menggunakan FabricJS?

王林
王林ke hadapan
2023-08-30 19:25:111194semak imbas

如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？

Dalam tutorial ini, kita akan belajar cara mengekalkan lebar lejang elips apabila menskala menggunakan FabricJS. Secara lalai, lebar lejang bertambah atau berkurang berdasarkan nilai skala objek. Walau bagaimanapun, kami boleh melumpuhkan tingkah laku ini dengan menggunakan atribut StrokeUniform.

Syntax

new fabric.Ellipse({ strokeUniform: Boolean }: Object)

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang styleUniform ialah sifat.

Options Keys

  • Stroke Uniform - Sifat ini menerima nilai boolean yang membolehkan kita menentukan sama ada lebar lejang akan berskala dengan objek. Nilai lalainya ialah Salah.

Contoh 1

Kemunculan lalai lebar lejang semasa menskala objek

Contoh berikut menerangkan rupa lalai lebar lejang objek elips yang diskalakan. Memandangkan kami tidak menggunakan atribut tripUniform, lebar lejang juga akan dipengaruhi oleh penskalaan objek. 

<!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>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
         });
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2

Melalui StrokeUniform atribut sebagai kunci

Dalam contoh ini, kita lulus StrokeUniform atribut sebagai kunci. Oleh itu, sapuan objek tidak lagi bertambah atau berkurang apabila objek berskala. Dalam contoh ini, atribut StrokeUniform telah diberikan nilai "true", yang akan memastikan bahawa lejang sentiasa sepadan dengan saiz piksel tepat yang dimasukkan untuk lebar lejang.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mengekalkan lebar lejang elips apabila menskala 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 menggunakan SolverJS?Artikel seterusnya：Bagaimana untuk menggunakan SolverJS?

Artikel berkaitan

Lihat lagi