資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 為三角形新增虛線描邊？
在本教程中，我們將學習如何使用 FabricJS 為三角形新增虛線描邊。三角形是 FabricJS 提供的各種形狀之一。為了建立三角形，我們將必須建立一個`fabric.Triangle`類的例項並將其新增到畫布中。`strokeDashArray`屬性允許我們為物件的描邊指定虛線圖案。
語法
new fabric.Triangle( { strokeDashArray: Array }: Object)引數
options (可選) − 此引數是一個物件，它為我們的三角形提供了額外的自定義選項。使用此引數，可以更改與物件相關的屬性，例如顏色、游標、描邊寬度以及許多其他屬性，其中`strokeDashArray`就是一個屬性。
選項鍵
strokeDashArray − 此屬性接受一個陣列，允許我們為物件的描邊指定虛線圖案。例如，如果我們傳入一個值為[2,3]的陣列，則表示2畫素的線段和3畫素的間隙，並無限重複此圖案。
示例 1
物件的描邊預設外觀
讓我們來看一個程式碼示例，它描述了三角形物件的描邊預設外觀。由於我們沒有使用`strokeDashArray`屬性，因此沒有顯示任何虛線圖案。
<!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 an object's stroke</h2>
<p>You can see there is no dash pattern in the stroke</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 triangle object
var triangle = new fabric.Triangle({
left: 150,
top: 30,
width: 90,
height: 80,
fill: "#b0e0e6",
stroke: "#5f9ea0",
strokeWidth: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>示例 2
將strokeDashArray屬性作為鍵傳遞
在這個例子中，我們將`strokeDashArray`屬性的值設定為[9,2]。這意味著將建立一個虛線圖案，其中包含一條9畫素長的線段，然後是一個2畫素的間隙，然後再次繪製一條9畫素長的線段，依此類推。
<!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 strokeDashArray property as key</h2>
<p>You can see there is a dash pattern in the stroke now</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 triangle object
var triangle = new fabric.Triangle({
left: 150,
top: 30,
width: 90,
height: 80,
fill: "#b0e0e6",
stroke: "#5f9ea0",
strokeWidth: 7,
strokeDashArray: [9, 2],
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
更新於：2022年6月24日
99 次瀏覽
廣告