首頁 > 文章 > web前端 > 如何使用 FabricJS 設定橢圓的高度？

如何使用 FabricJS 設定橢圓的高度？

WBOY轉載: 2023-08-24 15:05:07946瀏覽

如何使用 FabricJS 设置椭圆的高度？

在本教學中，我們將學習如何使用 FabricJS 設定橢圓的高度。橢圓形是 FabricJS 提供的各種形狀之一。為了建立一個橢圓，我們將建立一個 Fabric.Ellipse 類別的實例並將其新增到畫布中。我們可以透過改變橢圓物件的位置、不透明度、描邊及其尺寸來操縱橢圓物件。 FabricJS 允許我們使用 width 和 height 屬性來控制物件的尺寸。

語法

new fabric.Ellipse({ height: Number }: Object)

參數

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

選項鍵

#高 - 此屬性接受數字 strong> 允許我們指定物件的高度。分配的值決定高度。

範例1

height 屬性的預設行為

讓我們舉個例子來了解height 屬性的預設行為。

<!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 set the height of an Ellipse using FabricJS?</h2>
      <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</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: 100,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

範例2

將height 屬性作為鍵傳遞

由於橢圓的尺寸由其水平和高度決定垂直半徑，其大小不會有任何變化。

<!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 set the height of an Ellipse using FabricJS?</h2>
      <p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. </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({
            top: 100,
            left: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            height: 90,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // 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刪除

上一篇：解釋 React Native 中模態視窗的工作原理下一篇：解釋 React Native 中模態視窗的工作原理

看更多