資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何使用 FabricJS 建立帶有虛線邊框的文字框？
在本教程中，我們將學習如何使用 FabricJS 建立一個帶有虛線邊框的文字框。我們可以自定義、拉伸或移動文字框中的文字。為了建立一個文字框，我們必須建立一個 `fabric.Textbox` 類的例項並將其新增到畫布中。我們可以使用 `borderDashArray` 屬性來更改邊框虛線的樣式。但是，為了使此屬性生效，我們的文字框物件必須具有邊框。如果 `hasBorders` 屬性設定為 `false`，則此屬性將無效。
語法
new fabric.Textbox(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 textbox 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 textbox object
var textbox = new fabric.Textbox("Grow through what you go through.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
angle: 15,
borderColor: "red",
borderDashArray: [7, 10],
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>示例 2
使用值“false”傳遞 hasBorders 鍵
正如我們在這個例子中看到的，即使我們為 `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 textbox 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 textbox object
var textbox = new fabric.Textbox("Grow through what you go through.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
angle: 15,
borderColor: "red",
borderDashArray: [7, 10],
hasBorders: false,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
349 次瀏覽
