資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 設定三角形的旋轉角度？
在本教程中，我們將學習如何使用 FabricJS 設定三角形的旋轉角度。三角形是 FabricJS 提供的各種形狀之一。為了建立一個三角形，我們必須建立一個fabric.Triangle類的例項並將其新增到畫布中。
FabricJS 中的angle屬性定義了物件的二維旋轉角度。我們還有一個centeredRotation屬性，它允許我們使用三角形的中心點作為變換的原點。
語法
new fabric.Triangle({ angle: Number, centeredRotation: Boolean }: Object)引數
選項 (可選) - 此引數是一個物件，它為我們的三角形提供了額外的自定義設定。使用此引數，可以更改與三角形相關的許多屬性，例如顏色、游標、筆劃寬度等等，其中angle和centeredRotation是屬性。
選項鍵
angle - 此屬性接受一個數字，它以度為單位指定三角形的旋轉角度。
centeredRotation - 此屬性接受一個布林值，它決定三角形的中心是否為變換的原點。
示例 1
傳遞 angle 作為鍵，並使用自定義值，同時停用三角形的居中旋轉
讓我們來看一個程式碼示例，演示如何在 FabricJS 中設定三角形的旋轉角度。負角度表示逆時針方向，正角度表示順時針方向。由於我們將centeredRotation賦值為 false，因此三角形在使用其角點作為旋轉中心時會旋轉。
<!DOCTYPE html> <html> <head> <!-- 新增 Fabric JS 庫 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>傳遞 angle 作為鍵，並使用自定義值，同時停用三角形的居中旋轉</h2> <p>旋轉三角形以檢視居中旋轉已被停用。</p> <canvas id="canvas"></canvas> <script> // 初始化畫布例項 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化三角形物件 var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", centeredRotation: false, angle: 15, }); // 將其新增到畫布 canvas.add(triangle); </script> </body> </html>示例 2
啟用三角形的居中旋轉
從這個例子中我們可以看到，透過將centeredRotation屬性設定為 true，我們的三角形現在使用其中心作為旋轉中心。在 1.3.4 版本之前，centeredScaling和centeredRotation包含在一個名為centerTransform的單個屬性中。
<!DOCTYPE html> <html> <head> <!-- 新增 Fabric JS 庫 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>啟用三角形的居中旋轉</h2> <p>旋轉三角形以檢視居中旋轉已被啟用。</p> <canvas id="canvas"></canvas> <script> // 初始化畫布例項 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化三角形物件 var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", centeredRotation: true, angle: 15, }); // 將其新增到畫布 canvas.add(triangle); </script> </body> </html>
更新於：2022年6月27日
瀏覽量：175
廣告