資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 建立帶有邊框顏色的矩形？
在本教程中，我們將使用 FabricJS 建立一個帶有邊框顏色的矩形。矩形是 FabricJS 提供的各種形狀之一。為了建立矩形，我們將必須建立一個 fabric.Rect 類的例項並將其新增到畫布上。
由於 FabricJS 非常靈活，因此我們可以根據自己的喜好自定義矩形物件。FabricJS 提供的一個屬性是 borderColor，它允許我們在物件處於活動狀態時操作邊框的顏色。
語法
new fabric.Rect({ borderColor: String }: Object)引數
選項（可選） - 此引數是一個 物件，它為我們的矩形提供了額外的自定義。使用此引數，可以更改與物件的 borderColor 屬性相關的顏色、游標、筆劃寬度和許多其他屬性。
選項鍵
borderColor - 此屬性接受一個字串，用於指定選擇矩形物件時邊框的顏色。其預設值為 rgb(178,204,255)。
示例 1
傳遞帶有字串值的 borderColour 鍵
讓我們看一個程式碼示例，說明如何為 borderColor 屬性賦值。我們將值“藍色”分配給 borderColor 鍵，這有助於在選擇矩形物件時建立藍色邊框。
<!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 borderColour key with a String value</h2>
<p>Select the rectangle to see the border colour</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: "blue",
padding: 9,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>示例 2
將 RGBA 值傳遞給 borderColor 鍵
除了傳遞簡單的顏色名稱作為字串之外，我們還可以使用 RGBA 值，其元件指定紅色、綠色、藍色和 Alpha 的數量，其中 alpha 表示不透明度。在本例中，我們使用了 rgb(128,0,128)，它是紫色顏色的 rgb 值。
<!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 an RGBA value to the borderColor key</h2>
<p>Select the rectangle to see the border colour</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)",
padding: 9,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
更新於：2022年6月28日
251 次檢視
廣告