fabric.js如何绘制带箭头且端点可拖拽的折线，求更优实现方案

核心优化思路 #

• 直接继承fabric.Polyline基类，复用原生的点管理、线段渲染、样式配置能力，无需自己实现render逻辑
• 用原生startArrow/endArrow属性实现两端箭头，自动同步位置角度，无需额外维护箭头对象
• 用原生自定义Control做拖拽端点，无需额外添加独立的Circle对象，减少多对象同步的冗余代码，后续做连接吸附逻辑也更内聚

优化后核心代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS #

canvas {
    border: 1px solid #999;
    display:inline-block;
}

JS #

var canvas = new fabric.Canvas(document.getElementById("c"))

// 自定义可拖拽端点的折线类
fabric.PolygonalLine = fabric.util.createClass(fabric.Polyline, {
  initialize: function(points, options = {}) {
    // 原生箭头配置
    options = Object.assign({
      stroke: 'red',
      strokeWidth: 2,
      strokeDashArray: [10,5],
      startArrow: 'triangle',
      endArrow: 'triangle',
      startArrowHeight: 10,
      startArrowWidth: 10,
      endArrowHeight: 10,
      endArrowWidth: 10,
      hasBorders: false
    }, options)
    this.callSuper('initialize', points, options)
    this._initControls()
  },
  // 初始化两端拖拽控制点
  _initControls: function() {
    // 起点控制点
    this.controls.startControl = new fabric.Control({
      offsetY: -8,
      cursorStyle: 'pointer',
      render: function(ctx, left, top) {
        // 自定义渲染成空心圆
        ctx.save()
        ctx.beginPath()
        ctx.arc(left, top, 4, 0, 2 * Math.PI)
        ctx.strokeStyle = 'rgba(57, 87, 239, 0.8)'
        ctx.lineWidth = 1
        ctx.stroke()
        ctx.restore()
      },
      // 拖拽逻辑
      positionHandler: function(dim, finalMatrix, fabricObject) {
        // 控制点固定绑定在折线起点
        return new fabric.Point(fabricObject.points[0].x, fabricObject.points[0].y)
      },
      actionHandler: function(eventData, transform, x, y) {
        const line = transform.target
        // 更新起点坐标
        line.points[0].x = x
        line.points[0].y = y
        // 保持原有的直角逻辑：第二个点x和起点一致
        line.points[1].x = x
        line.setCoords()
        return true
      }
    })
    // 终点控制点
    this.controls.endControl = new fabric.Control({
      offsetY: 8,
      cursorStyle: 'pointer',
      render: function(ctx, left, top) {
        ctx.save()
        ctx.beginPath()
        ctx.arc(left, top, 4, 0, 2 * Math.PI)
        ctx.strokeStyle = 'rgba(57, 87, 239, 0.8)'
        ctx.lineWidth = 1
        ctx.stroke()
        ctx.restore()
      },
      positionHandler: function(dim, finalMatrix, fabricObject) {
        // 控制点固定绑定在折线终点
        const len = fabricObject.points.length
        return new fabric.Point(fabricObject.points[len-1].x, fabricObject.points[len-1].y)
      },
      actionHandler: function(eventData, transform, x, y) {
        const line = transform.target
        const len = line.points.length
        // 更新终点坐标
        line.points[len-1].x = x
        line.points[len-1].y = y
        // 保持原有的直角逻辑：倒数第二个点x和终点一致
        line.points[len-2].x = x
        line.setCoords()
        return true
      }
    })
  }
})

// 测试代码
let rect = new fabric.Rect({
  width: 50,
  height: 50,
  left: 10,
  top: 5,
  fill: "rgba(255,0,0,0.5)",
})
let circle = new fabric.Circle({
  radius: 25,
  left: 200,
  top: 205,
  fill: "#aac",
})
let line = new fabric.PolygonalLine(
  [
    {x: 35, y: 70},
    {x: 35, y: 120},
    {x: 225, y: 120},
    {x: 225, y: 190},
  ]
)
canvas.add(rect, circle, line)
canvas.zoomToPoint({ x: 0, y: 0 }, 2)
canvas.renderAll()

后续连接功能拓展建议 #

在Control的actionHandler中可以直接获取拖拽时的坐标，遍历画布上的其他对象，判断坐标是否在对象的吸附范围内，满足条件时直接把端点坐标对齐到对象的吸附点即可，不需要额外处理多个独立对象的事件绑定。

内容的提问来源于stack exchange，提问作者dahui4dev