資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 建立帶有虛線邊框的文字？
在本教程中，我們將使用 FabricJS 建立一個帶有虛線邊框的文字。我們可以透過新增 fabric.Text 的例項來在畫布上顯示文字。它不僅允許我們移動、縮放和更改文字的尺寸，還提供了額外的功能，例如文字對齊、文字修飾、行高，這些功能可以透過 textAlign、underline 和 lineHeight 屬性分別獲得。我們可以使用 borderDashArray 屬性更改邊框虛線的樣式。但是，我們的文字物件必須有邊框才能使此屬性生效。如果 hasBorders 屬性被賦予 false 值，則此屬性將不起作用。
語法
new fabric.Text(text: String , { borderDashArray: Array }: Object)
引數
text − 此引數接受一個 字串，即我們要顯示的文字字串。
options (可選) − 此引數是一個 物件，它為我們的文字提供額外的自定義功能。使用此引數，可以更改與 borderDashArray 屬性相關的物件的顏色、游標、描邊寬度以及許多其他屬性。
選項鍵
borderDashArray − 此屬性接受一個數組，透過陣列指定虛線樣式，表示間隔。例如，如果我們傳遞一個值為 [2,3] 的陣列，則表示 2px 的虛線和 3px 的間隙，並無限重複此模式。
示例 1
將 borderDashArray 作為鍵傳遞，並使用自定義值
讓我們來看一個使用 FabricJS 中的 borderDashArray 屬性建立虛線邊框的程式碼示例。在此示例中，我們使用了 [7,10] 陣列，它告訴我們該模式將透過繪製一條 7px 長的線，然後是 10px 的間隙，並重復相同的模式來建立。
<!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 borderDashArray as key with a custom value</h2> <p>You can select the text to see the dash pattern</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 text object var text = new fabric.Text("Add Sample Text Here", { backgroundColor: "#ffe5b4", width: 200, top: 70, left: 110, angle: 15, borderColor: "red", borderDashArray: [7, 10], }); // Add it to the canvas canvas.add(text); </script> </body> </html>
示例 2
將 hasBorders 鍵的值傳遞為“false”
正如我們在這個例子中看到的，即使我們為 borderColor 和 borderDashArray 屬性分配了正確的值，它們也不會生效，因為 hasBorders 屬性已被設定為 false。當設定為 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 hasBorders key with the value “false”</h2> <p>You can select the text to see that the borders have not been rendered</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 text object var text = new fabric.Text("Add Sample Text Here", { backgroundColor: "#ffe5b4", width: 200, top: 70, left: 110, angle: 15, borderColor: "red", borderDashArray: [7, 10], hasBorders: false, }); // Add it to the canvas canvas.add(text); </script> </body> </html>
238 次檢視
