svg.js 实现svg编辑功能svg数据是从接口读取的，描述了svg图形信息入口文件代码如下： draw对象是画布实

svg数据是从接口读取的，描述了svg图形信息

入口文件代码如下：


this.draw = SVG().addTo('#home').size('100%', '100%').panZoom({
  wheelZoom: true,
  panning: true,
  zoomFactor: 1,
  panButton: 1,
  wheelZoomDeltaModeScreenPixels: 1,
  wheelZoomDeltaModeLinePixels: 1
});
this.viewBox = this.draw.viewbox(
    0,
    0,
    svgJsonData.maxX - svgJsonData.minX,
    svgJsonData.maxY - svgJsonData.minY ? svgJsonData.maxY - svgJsonData.minY : 100
);
this.cad = new MCad(this.draw, svgJsonData)
await this.cad.render()

draw对象是画布实例，MCad是所有类的入口，render方法是用来渲染每个图形的。

MLine这个类是用来渲染线段的,其它的实现有兴趣可以自己歇歇渲染函数如下


render(){
    this.group = this.draw.group()
    this.line = this.draw.line(`${this.startPoint.tx},${this.startPoint.ty} ${this.endPoint.tx},${this.endPoint.ty}`).css({
        stroke:  this.color,
        'stroke-dasharray': this.dashArray,
        'stroke-width': 20
    })
    this.line.on('mousedown', (evt) => {
        if (evt.button === 0) {
            evt.stopPropagation()
            evt.preventDefault()
            this.cad.clearItemsSelected()
        }
    })

    this.line.on('mouseup', (evt) => {
        if (evt.button === 0) {
            this.isSelected = true
            this.controlPointList.forEach(item => {
                item.stop()
            })
            evt.stopPropagation()
            evt.preventDefault()
        }
    })
    this.group.add(this.line)
}

MLine继承自MBase类，这个MBase是基类，判断图形的选中状态等。

MLine.vue中addControl是用来添加移动图形的控制点

在线预览地址