数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 FabricJS 绘制虚线？
我们可以通过创建 fabric.Polyline 的实例来创建一个 Polyline 对象。Polyline 对象可以由一组连接的直线段来表征。由于它是 FabricJS 的基本元素之一，我们也可以通过应用角度、不透明度等属性轻松地对其进行自定义。
我们可以使用 strokeDashArray 属性来创建带有 Polyline 的虚线。
语法
new fabric.Polyline(points: Array, { strokeDashArray: Array }: Object)
参数
points − 此参数接受一个数组，表示构成 polyline 对象的点数组。
options (可选) − 此参数是一个对象，它为我们的文本提供额外的自定义选项。使用此参数可以更改与对象的 strokeDashArray 属性相关的颜色、光标、笔划宽度以及许多其他属性。
选项键
strokeDashArray − 此属性接受一个数组，通过数组指定间隔来指定虚线图案。例如，如果我们传递一个值为 [2,3] 的数组，则表示 2px 的虚线和 3px 的间隙，并无限重复此图案。
示例 1：创建 fabric.Polyline() 的实例并将其添加到我们的画布
让我们来看一个代码示例，说明我们如何首先将 polyline 对象添加到我们的画布。唯一需要的参数是 points 数组，而第二个参数是可选的 options 对象。
<!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>Creating an instance of fabric.Polyline() and adding it to our canvas </h2>
<p>You can see that the polyline object has been added</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a points array
var points = [
{ x: 30, y: 500 },
{ x: 0, y: 0 },
{ x: 600, y: 0 },
];
// Initiating a polyline object
var polyline = new fabric.Polyline(points, {
left: 100,
top: 40,
fill: "white",
strokeWidth: 4,
stroke: "pink",
});
// Adding it to the canvas
canvas.add(polyline);
</script>
</body>
</html>
示例 2：使用 strokeDashArray 添加虚线图案
正如我们在这个示例中看到的，我们将使用 strokeDashArray 属性向我们的 Polyline 添加虚线。
<!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>Using the strokeDashArray to add the dotted pattern</h2>
<p>You can see that the polyline object has been added with dotted line</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a points array
var points = [
{ x: 30, y: 500 },
{ x: 0, y: 0 },
{ x: 600, y: 0 },
];
// Initiating a polyline object with strokeDashArray
var polyline = new fabric.Polyline(points, {
left: 100,
top: 40,
fill: "white",
strokeWidth: 4,
stroke: "pink",
strokeDashArray: [7, 10],
});
// Adding it to the canvas
canvas.add(polyline);
</script>
</body>
</html>
更新于：2023年2月16日
637 次浏览
广告