Bagaimana untuk mengekalkan lebar lejang elips apabila menskala menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengekalkan lebar lejang elips apabila menskala menggunakan FabricJS?

王林

Lepaskan： 2023-08-30 19:25:11

ke hadapan

1188 orang telah melayarinya

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

Salin selepas log masuk

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< /strong>

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>

Salin selepas log masuk

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!