資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何在 FabricJS 中使用 IText 設定文字對齊方式？
在本教程中，我們將學習如何在 FabricJS 中使用 IText 設定文字的對齊方式。IText 類是在 FabricJS 1.4 版本中引入的，它擴充套件了 fabric.Text，用於建立 IText 例項。IText 例項使我們能夠自由地選擇、剪下、貼上或新增新文字，無需額外的配置。它還支援各種快捷鍵和滑鼠/觸控組合，使文字具有互動性，而這些功能在 Text 中並未提供。
然而，基於 IText 的文字框允許我們調整文字矩形的大小並自動換行。這對於 IText 來說並不適用，因為高度不會根據換行進行調整。我們可以使用各種屬性來操作 IText 物件。類似地，我們也可以使用 textAlign 屬性來設定其文字對齊方式。
語法
new fabric.IText(text: String , { textAlign : String }: Object)
引數
text − 此引數接受一個字串，即我們要顯示的文字字串。
options (可選) − 此引數是一個物件，它為我們的 IText 物件提供額外的自定義功能。使用此引數可以更改與物件相關的許多屬性，例如顏色、游標、邊框寬度等等，其中 textAlign 就是一個屬性。
選項鍵
textAlign − 此屬性接受一個字串作為值，允許我們控制文字對齊方式的可能值。其預設值為左對齊。其他可能的值為“center”（居中），“right”（右對齊），“justify”（兩端對齊），“justify-left”（左對齊），“justify-center”（居中對齊）和“justify-right”（右對齊），如下所述。
center − 將文字居中對齊。
right − 將文字右對齊。
justify − 拉伸文字行，使每行與 IText 物件的左右邊緣的距離相同。
justify-left − 拉伸文字行，使每行與 IText 物件的左邊緣的距離相同。
justify-center − 將每行居中，使每行與左右邊緣的距離不同。
justify-right − 拉伸文字行，使每行與 IText 物件的右邊緣的距離相同。
示例 1
IText 物件的預設外觀
讓我們來看一個程式碼示例，看看當不使用 textAlign 屬性時，IText 物件是什麼樣的。在這種情況下，我們的文字將左對齊。
<!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>Default appearance of the IText object</h2> <p>You can see that the text alignment is towards left</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 an itext object var itext = new fabric.IText( "Add sample text here.
Lorem ipsum dolor sit amet",{ width: 300, left: 210, top: 70, fill: "#6b55da", } ); // Add it to the canvas canvas.add(itext); </script> </body> </html>
示例 2
將 textAlign 屬性作為鍵值對傳遞
在此示例中，我們將看到將值賦給 textAlign 屬性如何改變畫布中 IText 物件內文字的對齊方式。由於我們傳遞的值為“right”，因此文字現在將右對齊。
<!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 the textAlign property as key with a value</h2> <p>You can see that the text alignment is towards right</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 an itext object var itext = new fabric.IText( "Add sample text here.
Lorem ipsum dolor sit amet",{ width: 300, left: 210, top: 70, fill: "#6b55da", textAlign: "right", } ); // Add it to the canvas canvas.add(itext); </script> </body> </html>
644 次檢視
