数据结构
网络
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 次查看
广告