資料結構
網路
關係資料庫管理系統 (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 物件。同樣，我們可以使用 pathStartOffset 屬性來指定文字的偏移量。
語法
new fabric.IText( text: String , { pathStartOffset: Number }: Object)
引數
text − 此引數接受一個字串，即我們想要顯示的文字字串。
options (可選) − 此引數是一個物件，它為我們的 IText 物件提供額外的自定義選項。使用此引數可以更改與 IText 物件相關的許多屬性，例如顏色、游標、描邊寬度等等，其中 pathStartOffset 就是一個屬性。
選項鍵
pathStartOffset − 此屬性接受一個數字值，它決定文字路徑起始位置的偏移量。
示例 1
文字物件的預設外觀
讓我們來看一個程式碼示例，看看在不使用 pathStartOffset 屬性時 itext 物件是什麼樣的。這裡，路徑已用藍色描邊突出顯示。我們可以看到，文字路徑的偏移量為 null。
<!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 text object</h2> <p>You can see that offset amount for text path is null</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 path instance var path = new fabric.Path("M 0 0 C 100 -100 150 -100 300 0", { strokeWidth: 1, stroke: "blue", fill: "white", strokeWidth: 4, }); // Initiate an itext object var itext = new fabric.IText("Add sample text here.", { width: 300, left: 110, top: 70, fill: "red", path: path, }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
示例 2
將 pathStartOffset 屬性作為鍵傳遞
在這個例子中，我們把 pathStartOffset 屬性作為鍵，值設為 18。因此，偏移量將為 18。
<!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 pathStartOffset property as key</h2> <p>You can see the offset amount for text path</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 path instance var path = new fabric.Path("M 0 0 C 100 -100 150 -100 300 0", { strokeWidth: 1, stroke: "blue", fill: "white", strokeWidth: 4, }); // Initiate an itext object var itext = new fabric.IText("Add sample text here.", { width: 300, left: 110, top: 70, fill: "red", path: path, pathStartOffset: 18, }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
更新於：2022年9月13日
288 次瀏覽
廣告