折线
创建
使用 new fabric.Polyline(array, object)
方法创建折线
属性
Polyline()
方法接收2个参数,第一个参数是折线的坐标集合;第二个参数是描述折线属性的对象。
坐标集合是一个元素为对象的数组,每个子元素都需要提供 x 和 y 坐标。
需要注意的是,创建折线时,最好将填充色 fill 设置为透明。折线默认会带有黑色填充色。同时也需要设置描边颜色,不然折线就显示不出来了
show code
// 折线
let polyline1 = new fabric.Polyline(
[
{ x: 30, y: 30 },
{ x: 150, y: 100 },
{ x: 80, y: 100 },
{ x: 100, y: 30 },
],
{
fill: 'transparent', // 如果画折线,需要填充透明
stroke: '#6639a6', // 线段颜色:紫色
strokeWidth: 5, // 线段粗细 5
}
)
// 折线
let polyline2 = new fabric.Polyline(
[
{ x: 30, y: 30 },
{ x: 150, y: 100 },
{ x: 80, y: 100 },
{ x: 100, y: 30 },
],
{
left: 140,
fill: '#f00', // 如果画折线,需要填充透明
stroke: '#6639a6', // 线段颜色:紫色
strokeWidth: 5, // 线段粗细 5
}
)
// 将折线添加到画布中
canvas.add(polyline1, polyline2)