資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 設定文字框的旋轉角度？
在本教程中，我們將學習如何使用 FabricJS 設定文字框的旋轉角度。我們可以自定義、拉伸或移動文字框中的文字。為了建立文字框，我們需要建立一個 fabric.Textbox 類的例項並將其新增到畫布上。FabricJS 中的 angle 屬性定義了物件的 2D 旋轉角度。我們還有 centeredRotation 屬性，它允許我們使用文字框的中心點作為變換的原點。
語法
new fabric.Textbox(text: String, { angle: Number, centeredRotation: Boolean }: Object)
引數
text − 此引數接受一個 字串，即我們希望在文字框中顯示的文字字串。
options (可選) − 此引數是一個 物件，它為我們的文字框提供了額外的自定義選項。使用此引數，可以更改與文字框相關的許多屬性，例如顏色、游標、描邊寬度等，其中 angle 就是一個屬性。
選項鍵
angle − 此屬性接受一個 數字，用於指定文字框的旋轉角度（單位為度）。
centeredRotation − 此屬性接受一個 布林值，用於確定文字框的中心是否為變換的原點。
示例 1
將 angle 作為鍵並傳遞自定義值，同時停用文字框的居中旋轉
讓我們看一個程式碼示例，演示如何在 FabricJS 中設定文字框的旋轉角度。負角度表示逆時針方向，正角度表示順時針方向。由於我們將 centeredRotation 設定為 False，因此文字框將在使用其角點作為旋轉中心時旋轉。
<!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>Passing angle as key with a custom value and disabling the centered rotation for the Textbox</h2> <p>You can select and rotate the textbox to verify that it uses its corner point as the center of rotation</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a textbox object var textbox = new fabric.Textbox("Peace begins with a smile.", { backgroundColor: "#b0e0e6", width: 400, top: 70, left: 110, centeredRotation: false, angle: 15, }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
示例 2
啟用文字框的居中旋轉
從本示例中可以看出，透過將 centeredRotation 屬性設定為 true，我們的文字框現在使用其中心作為旋轉中心。在 1.3.4 版本之前，centeredScaling 和 centeredRotation 包含在一個名為 centerTransform 的屬性中。
<!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>Enabling centered rotation for the textbox</h2> <p>You can select and rotate the textbox to verify that it now uses its center as center of rotation</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a textbox object var textbox = new fabric.Textbox("Peace begins with a smile.", { backgroundColor: "#b0e0e6", width: 400, top: 70, left: 110, centeredRotation: true, angle: 15, }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
更新於: 2022-08-02
252 次瀏覽
廣告