資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 建立帶有虛線邊框的三角形？
在本教程中，我們將學習如何使用 FabricJS 建立一個帶有虛線邊框的三角形。三角形是 FabricJS 提供的各種形狀之一。為了建立三角形，我們需要建立一個 fabric.Triangle 類的例項並將其新增到畫布上。
我們可以使用 borderDashArray 屬性更改邊框虛線的樣式。但是，為了使該屬性生效，我們的三角形物件必須具有邊框。如果 hasBorders 屬性被設定為 false，則此屬性將無效。
語法
new fabric.Triangle({ borderDashArray: Array }: Object)引數
選項（可選） - 此引數是一個 物件，它為我們的三角形提供額外的自定義功能。使用此引數，可以更改與 borderDashArray 屬性相關的物件的屬性，例如顏色、游標、筆觸寬度等。
選項鍵
borderDashArray - 此屬性接受一個 陣列，該陣列透過陣列指定間隔來指定虛線樣式。
示例 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>Select the triangle 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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderDashArray: [7, 10],
});
// Add it to the canvas
canvas.add(triangle);
</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>Select the triangle and observe that its 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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderDashArray: [7, 10],
hasBorders: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
更新於: 2022-06-24
209 次瀏覽
廣告