如何使用FabricJS設定三角形在x軸上的傾斜角度？-js教程-PHP中文網

如何使用FabricJS設定三角形在x軸上的傾斜角度？

WBOY

發布： 2023-09-05 22:37:12

轉載

818 人瀏覽過

如何使用FabricJS設定三角形在x軸上的傾斜角度？

在本教程中，我們將學習如何使用FabricJS在三角形的x軸上設定傾斜角度。三角形是FabricJS提供的各種形狀之一。為了建立一個三角形，我們將需要建立一個fabric.Triangle類別的實例並將其新增至畫布上。

我們可以透過改變其尺寸、添加背景顏色或改變x軸上的傾斜角度來自訂我們的三角形物件。我們可以使用skewX屬性來實現這一點。

語法

new fabric.Triangle({ skewX: Number }: Objectscript">new fabric.Triangle({ skewX: Number }: Object )

登入後複製

參數

選項 (可選) − 此參數是一個物件，它提供了對我們的三角形進行額外自訂的選項。使用此參數，可以變更與skewX屬性相關的物件的顏色、遊標、描邊寬度和許多其他屬性。

選項鍵

skewX< /strong> − 此屬性接受一個數字值，確定物件在x軸上的傾斜角度。

範例1

當未應用skewX屬性時

<當未應用skewX屬性時

< ;p>讓我們看一個程式碼範例，了解當未應用skewX屬性時我們的三角形物件的外觀。在這種情況下，我們的三角形物件不會有任何角度的傾斜。

<!DOCTYPE html>
<html> 的中文翻譯為：<html>
<head>的中文翻譯為：<頭部>
   <!-- 新增Fabric JS函式庫 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>的中文翻譯為：</head>
<body>的中文翻譯為：<body>
   <h2>當未應用skewX屬性時</h2>
   <p>預設情況下，您可以看到三角形沒有任何角度的傾斜</p>
   <canvas id="canvas"></canvas>
   <script> 的中文翻譯為：   <script>
      // 初始化一個畫布實例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // 初始化一個三角形對象
      var triangle = new fabric.Triangle({

         left: 120,
         top: 70,
         width: 90,
         高度：80,
         fill: "#b7410e"，
         stroke: "#f5deb3",

（註：這是一段HTML程式碼，其中 表示空格）
         strokeWidth: 7,
      });

      // 將其加入到畫布中
      canvas.add(triangle);
   </script>
</body> 的中文翻譯為：</body>
</html>

登入後複製

範例2

將skewX作為鍵並為其指派自訂值。

在這個範例中，我們將看到如何為skewX屬性分配一個數值。傳遞的值將決定沿著X軸的傾斜程度。

<!DOCTYPE html>
<html> 的中文翻譯為：<html>
<head>的中文翻譯為：<頭部>
   <!-- 新增Fabric JS函式庫 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>的中文翻譯為：</head>
<body>的中文翻譯為：<body>
   <h2>Passing skewX as key and assigning it a custom value</h2>
   <p>You can see the triangle has skewed on x-axis at a 50 degree angle</p>
   <canvas id="canvas"></canvas>
   <script> 的中文翻譯為：   <script>
      // 初始化一個畫布實例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // 初始化一個三角形對象
      var triangle = new fabric.Triangle({

         left: 120,
         top: 70,
         width: 90,
         高度：80,
         fill: "#b7410e"，
         stroke: "#f5deb3",

（註：這是一段HTML程式碼，其中 表示空格）
         strokeWidth: 7,
         skewX: 50,
      });

      // 將其加入到畫布中
      canvas.add(triangle);
   </script>
</body> 的中文翻譯為：</body>
</html>

登入後複製

的中文翻譯為：

以上是如何使用FabricJS設定三角形在x軸上的傾斜角度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！