資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 FabricJS 建立帶有虛線邊框的矩形？
在本教程中，我們將學習如何使用 FabricJS 建立一個帶有虛線邊框的矩形。矩形是 FabricJS 提供的各種形狀之一。要建立矩形，我們必須建立 fabric.Rect 類的例項並將其新增到畫布。
我們可以使用`borderDashArray`屬性來更改邊框虛線的樣式。但是，為了使此屬性生效，我們的矩形物件必須具有邊框。如果將`hasBorders`屬性設定為`false`，則此屬性將無效。
語法
new fabric.Rect({ borderDashArray: Array }: Object)引數
**options (可選)** - 此引數是一個物件，它為我們的矩形提供額外的自定義選項。使用此引數，可以更改與物件相關的許多屬性，例如顏色、游標、筆劃寬度以及`borderDashArray`屬性。
選項鍵
**borderDashArray** - 此屬性接受一個**陣列**，該陣列透過陣列指定間隔來指定虛線樣式。
示例 1
將 borderDashArray 作為鍵傳遞自定義值
讓我們來看一個使用 FabricJS 中的`borderDashArray`屬性建立虛線邊框的程式碼示例。在這個示例中，我們使用了`[7, 10]`陣列，這意味著圖案將透過繪製一條 7 畫素長的線，然後留出 10 畫素的間隙來建立。
<!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>Select the rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "rgb(128,0,128)",
borderDashArray: [7, 10],
padding: 9,
});
// Add it to the canvas
canvas.add(rect);
</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>Select the rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "rgb(128,0,128)",
borderDashArray: [7, 10],
padding: 9,
hasBorders: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
更新於：2022年6月24日
449 次瀏覽
廣告