mxGraph中设置样式(属性)

mxGraph 中设置样式的方式

在 mxGraph 中样式分为全局命名样式和单独样式设置。这里的样式和在CSS中的样式不太一样，虽然包含了部分CSS中的属性，但是它还包含了 Cell 相关的一些属性设置。

全局样式 是通过定义一个样式名，然后指定一系列默认属性，然后应用于 Cell 中，而单独样式设置实际上是重写了部分默认全局样式的属性。

在 mxGraph 中样式相关的操作需要查阅 mxStyleheet。mxGraph 内置了二种全局样式，分别为 defaultVertex 和 defaultEdge。样式的所有属性都有常量定义，这个可以直接查阅mxConstants，由于其中内容比较多，建议自己分类整理。

自定义全局样式

可以通过对象或者数组的形式来容纳样式，官方建议使用对象形式。

const graph = new mxGraph(container)
const style = new Object()
style[mxContants.STYLE_FILLCOLOR] = 'red'
style[mxContants.STYLE_FONTSTYLE] = mxContants.FONT_BOLD
graph.getStylesheet().putCellStyle('myStyle', style)

const parent = graph.getDefaultParent()
// 顶点样式
graph.insertVertex(parent, null, '', 0, 0, 80, 30, 'myStyle')
// 连线样式, v1, v2 为当前插入的顶点
graph.insertEdge(parent, null, '', v1, v2, 'myStyle')

通过 graph.getStylesheet() 返回了 mxStylesheet 实例，如果想要获取当前实例的顶点和边的样式，可以调用 mxStylesheet 类提供的 getDefaultVertexStyle() 和 getDefaultEdgeStyle() 方法。如果要获取内置和自己定义的所有样式，可以直接读取mxStylesheet 类的属性 styles。最后通过 putCellStyle() 方法来注册了一个全局的样式。

设置单独样式

在上一节例子中直接在 insertVertex() 和 insertEdge() 方法的最后一个参数中传入了样式名。如果要在此基础上添加额外的属性怎么办呢？在定义全局样式时使用 mxConstants类中的很多属性，在设置单独样式时我们需要知道有哪些属性是有效的，这个需要直接查看 mxConstants 常量所代表的具体值，例如：mxConstants.STYLE_FILLCOLOR 的值为 fillColor 那么在样式中就可以这样来写：

graph.insertVertex(parent, null, '', 0, 0, 80, 30, 'myStyle;fillColor=#ff8e00')

注意：在 mxGraph 的属性中也有传递2个属性的设置，比如属性 STYLE_DASH_PATTERN, 设置示例：dashed=1;dashPattern=3 10;strokeColor=red。

移除样式

可以通过赋值为 none 来移除默认样式表的属性，例如：

const v1 = graph.insertVertex(parent, null, 'vertex 1', 50, 20, 80, 20, ';fillColor=none')

运行后节点的填充颜色就被去除了。

一些通用样式设置快速参考

由于 mxContansts中定义的属性太多了，作者也是在慢慢学习中，这里只是列举了一些常见的设置应用于单独样式中的参考

字体相关

fontColor # 颜色
fontSize # 字体大小
fontFamily # 字体库
fontStyle # 字体样式
textDirection # 文本书写方向
align # 水平对齐
verticalAlign # 垂直对齐

标签相关

labelWidth # 宽
labelPosition # 水平位置
verticalLabelPosition # 垂直位置
noLabel # 不显示标签
labelBackgroundColor # 背景颜色
labelBorderColor # 边框颜色
labelPadding # 标签文字和边框之间的距离
spacing # 标签与顶点的间距
spacingLet # 标签与顶点的左间距
spacingBottom # 标签与顶点的下间距
spacingRight # 标签与顶点的右间距
spacingTop # 标签与顶点的上间距

顶点相关

fillColor # 填充颜色
strokeColor # 描边颜色
strokeWidth # 描边线宽
dashed # 虚线边
dashPattern # 虚线点大小和间距
rounded # 圆角
arcSize # 圆角大小
glass # 玻璃按钮

边相关

perimeterSpacing # 周边间距的关键点
sourcePerimeterSpacing # 边与源关键点周边间距
targetPerimeterSpacing # 边与目标关键点周边间距

最后

本文只是简单记录一下样式的设置，更多信息可以查看我的看云文档 mxGraph学习笔记，后续随着学习的进一步深入会更新快速参考的内容。