首頁 >web前端 >js教程 >如何在使用 FabricJS 縮放時保持橢圓的筆畫寬度？

如何在使用 FabricJS 縮放時保持橢圓的筆畫寬度？

王林轉載: 2023-08-30 19:25:111182瀏覽

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

在本教程中，我們將學習如何在使用 FabricJS 縮放時保持橢圓的筆畫寬度。預設情況下，描邊寬度會根據物件的比例值增大或減少。但是，我們可以透過使用 StrokeUniform 屬性來停用此行為。

語法

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

參數

#選項（可選）- 此參數是一個提供額外自訂的物件到我們的橢圓。使用此參數，可以變更與 styleUniform 為屬性的物件相關的顏色、遊標、描邊寬度和許多其他屬性。

Options Keys

#中風統一 - 這個屬性接受一個布林值，允許我們指定是否描邊寬度是否會隨物件一起縮放。其預設值為 False。

範例1

在縮放物件時描邊寬度的預設外觀

以下範例描述了正在縮放的橢圓物件的描邊寬度的預設外觀。由於我們沒有使用 tripUniform 屬性，因此筆畫寬度也會受到物件縮放的影響。

<!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>

範例2

將StrokeUniform 屬性作為鍵傳遞

在此範例中，我們將傳遞StrokeUniform 屬性作為鍵。因此，物件的筆劃將不再隨著物件的縮放而增加或減少。在此範例中，StrokeUniform 屬性已被指定為「true」值，這將確保筆劃始終與為筆劃寬度輸入的精確像素大小相符。

<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
      <p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied 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,
            strokeUniform: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

以上是如何在使用 FabricJS 縮放時保持橢圓的筆畫寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用SolverJS？下一篇：如何使用SolverJS？

看更多