数据结构
网络
关系数据库管理系统 (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 次浏览
广告