前端前端
fabric
算法
jsBlock
styleBlock
svgBlock
工具其他
Vue、React相关
webgl
GitHub
fabric
算法
jsBlock
styleBlock
svgBlock
工具其他
Vue、React相关
webgl
GitHub
  • 元素操作

    • 元素分组
    • 元素定位
    • 元素层级
    • 元素禁止事件
    • 元素选中样式
  • 变换

    • 变换
  • 图片

    • 图片
    • 背景图
  • 基础图形

    • 三角形
    • 圆形
    • 多边形
    • 折线
    • 椭圆
    • 直线
    • 矩形
    • 路径
  • 序列化和反序列化

    • 反序列化
    • 输出JSON
    • 输出png
    • 输出svg
  • 文本

    • 可编辑文本
    • 多行文本
    • 文本
    • 文本省略
    • 文本边框
  • 源码

    • fabric.Canvas
    • fabric.Circle
    • fabric类的继承体系
  • 画布操作

    • 画布拖动和缩放
    • 画布框选样式
  • 示例

    • fabric-echarts-demo
    • 拓扑图一
    • 拓扑图二

折线

创建

使用 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)
Edit this page
最近更新:: 2025/4/24 10:47
Contributors: wu.hui
Prev
多边形
Next
椭圆