MxGraph从入门到精通之3：设置图形样式

一时失言乱红尘 2023-02-19 07:27 80阅读 0赞

### 文章目录 ###

*   *  修改默认样式
     *   *  修改顶点(Vertex)的默认样式
         *  修改边(Edge)的默认样式
     *  设置节点样式
     *   *  创建指定样式的节点
         *  更新已有节点样式
     *  常用样式汇总
     *   *  mxConstants.STYLE\_SHAPE - 形状
         *  mxConstants.STYLE\_FONTSTYLE - 字体样式
         *  mxConstants.STYLE\_FILLCOLOR - 填充颜色
         *  mxConstants.STYLE\_STROKECOLOR - 画笔颜色
         *  mxConstants.STYLE\_FONTCOLOR - 字体颜色
         *  mxConstants.STYLE\_GRADIENTCOLOR - 渐变颜色
         *  mxConstants.STYLE\_SHADOW - 阴影效果

通过上一节 [MxGraph从入门到精通之2：HelloWorld程序解析][MxGraph_2_HelloWorld]，我们已经知道通过MxGraph绘制图形的核心步骤，绘制出来的图形默认的样式如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_5_color_FFFFFF_t_70]  
我们可以修改默认样式来修改所有图形的默认样式，也可以在创建节点的时候通过参数来创建指定样式的节点或者调用graph的setCellStyle来更新指定节点的样式。

## 修改默认样式 ##

### 修改顶点(Vertex)的默认样式 ###

let style = graph.stylesheet.getDefaultVertexStyle();  // 获取顶点的默认样式，得到一个对象
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; // 将顶点的默认形状改为椭圆形

style对象中的各个属性指定了顶点的形状、颜色等默认样式，其中`mxConstants.STYLE_SHAPE`属性用于设置顶点的形状，`mxConstants.SHAPE_ELLIPSE`形状为椭圆形。 mxConstants是MxGraph预定义的一系列常量，其中一些常量就是用来定义样式的属性和值的，大部分都已经常用的和样式有关的常量可以参考本文最后的常用样式汇总。修改默认顶点样式后，上述的helloworld程序显示效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70]

### 修改边(Edge)的默认样式 ###

和顶点类似，可以通过以下方式修改边的默认样式：

let style = graph.stylesheet.getDefaultEdgeStyle();
    style[mxConstants.STYLE_STROKECOLOR] = 'Green';

`mxConstants.STYLE_STROKECOLOR`表示边的颜色，上述代码表示将边的默认颜色修改成绿色。在MxGraph中，颜色的取值范围可以是HTML颜色名(如Red,Pink等)或十六进制码(如\#0000ff)。常用HTML颜色名可参考：[HTML Color Codes][] 。修改边的默认样式后，上述的helloworld程序显示效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 1]

## 设置节点样式 ##

### 创建指定样式的节点 ###

在上一节中helloworld示例程序插入顶点的方法可以传入第八个参数，来指定创建出来的顶点的样式，如下：

var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'shape=cloud;fillColor=Coral');
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30, 'shape=rhombus;fillColor=#00ff00' );

效果类似下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_5_color_FFFFFF_t_70 1]

### 更新已有节点样式 ###

setCellStyle可以更新一组节点的样式，如下：

graph.setCellStyle('shape=cloud;fillColor=Gray', [v1,v2])

v1,v2为我们上面创建的两个顶点，上述代码将v1,v2的样式都设置成了灰色以及云状，效果类似下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 2]

## 常用样式汇总 ##

通过上述示例我们知道MxGraph图形的样式设置实际上是通过一个包含多个键值对的字符串或者通过style对象来指定的，字符串中的键/值和style对象中的属性/值是一一对应的。例如，`shape=cloud` 的作用类似于 `style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CLOUD`，实际上`mxConstants.STYLE_SHAPE`常量的值就是`shape`, `mxConstants.SHAPE_CLOUD`的值就是`cloud`。  
上述示例演示了shape,fillColor等样式的效果，下面总结一下常用的样式类型及其取值范围，出于方便，下面有些地方使用了常量的形式，有些地方使用了字符串的形式，这些常量和字符串的对应关系可以参考：[MxGraph全局常量][MxGraph]

### mxConstants.STYLE\_SHAPE - 形状 ###

`mxConstants.STYLE_SHAPE`用于指定MxGrape图形的形状，可取的值如下：

rectangle  ellipse doubleEllipse  rhombus line image arrow 
    arrowConnector label cylinder swimlane connector actor triangle hexagon

各个形状的效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 3]

### mxConstants.STYLE\_FONTSTYLE - 字体样式 ###

`mxConstants.STYLE_FONTSTYLE`用于设置字体的样式，可取的值为：

FONT_BOLD  // 粗体
    FONT_ITALIC // 斜体
    FONT_UNDERLINE // 下划线
    FONT_STRIKETHROUGH // 中划线

样式效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 4]

### mxConstants.STYLE\_FILLCOLOR - 填充颜色 ###

`mxConstants.STYLE_FILLCOLOR`指定图形的填充颜色，值可以是HTML颜色名(如Red,Pink等)或十六进制码(如\#0000ff)。常用HTML颜色名可参考：[HTML Color Codes][]

### mxConstants.STYLE\_STROKECOLOR - 画笔颜色 ###

`mxConstants.STYLE_STROKECOLOR`指定了画笔的颜色。用于设置Edge和Vertex的外围边的颜色。

### mxConstants.STYLE\_FONTCOLOR - 字体颜色 ###

`mxConstants.STYLE_FONTCOLOR`用于设置字体的颜色，`style[mxConstants.STYLE_FONTCOLOR] = 'white'`的效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 5]

### mxConstants.STYLE\_GRADIENTCOLOR - 渐变颜色 ###

`mxConstants.STYLE_GRADIENTCOLOR`用于设置渐变颜色，`style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'`的效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 6]

### mxConstants.STYLE\_SHADOW - 阴影效果 ###

`mxConstants.STYLE_SHADOW`用于指定是否开启阴影效果，默认为false，`style[mxConstants.STYLE_SHADOW] = true`的效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 7]

[MxGraph_2_HelloWorld]: https://blog.csdn.net/u012124304/article/details/106855683
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_5_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619163225674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_5,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622111104437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[HTML Color Codes]: https://html-color-codes.info/color-names/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200622113112520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_5_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619163054417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_5,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200619163850708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[MxGraph]: http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200619172519605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200622130235694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200622120341614.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200622120735399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200622130915266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70