mxgraph是一款通过js来画图的工具库。
draw.io就是通过mxgraph来实现的,官网也提供了一些复杂的例子。
graph中我们需要关心的只有点和边,以及点和边是如何连接的
数据的存储
可编辑界面
<div id="containter"></div>
let doc = mxUtils.parseXML(xmlString) // 可以将xml字符串解析为xml
let node = doc.documentElement
let editor = new mxEditor()
editor.readGraphModel(node)
创建一个元素
mxConstraintHandler
- 当鼠标划过图形时,负责展示连接点
- 约束一个连接的创建, 只能通过连接点创建连线
修改固定连接点的样式
mxConstraintHandler.prototype.pointImage = new mxImage(src, width, height)
修改mouseover到连接点的样式
创建连接线的样式
展示界面