Mxgraph 使用教程(5):mxgraph图设置样式的两种方式

上文我们了解了基本的mxgraph内容,这节我们来给节点和边设置样式

1.第一种方式(行内式)

上文的图形最终效果:
Mxgraph 使用教程(5):mxgraph图设置样式的两种方式_第1张图片
添加样式:

 var v1 = graph.insertVertex(
          parent,
          null,
          "Hello,",
          20,
          200,
          100,
          50,
          "fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=8;"
        );

给节点添加样式后:
Mxgraph 使用教程(5):mxgraph图设置样式的两种方式_第2张图片
好看了很多,哈哈哈

1.第二种方式(使用对象式)

添加样式:

  //定义节点样式
      var nodeStyle = {
     };
      nodeStyle[mxConstants.STYLE_FILLCOLOR] = "#3CAEA3";
      nodeStyle[mxConstants.STYLE_FONTSIZE] = 15;
      nodeStyle[mxConstants.STYLE_STROKE_COLOR] = "white";
      nodeStyle[mxConstants.STYLE_FONTCOLOR] = "white";
      nodeStyle[mxConstants.STYLE_ROUNDED] = 1;

      // 把定义好的样式object push到stylesheet
      graph.getStylesheet().putCellStyle("nodeStyle", nodeStyle)

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

 var v1 = graph.insertVertex(
          parent,
          null,
          "Hello,",
          20,
          200,
          100,
          50,
          'nodeStyle'
        );

添加样式后结果:
Mxgraph 使用教程(5):mxgraph图设置样式的两种方式_第3张图片
可以看到和上面没有什么区别。

查看mxgraph API文档 ,查看更多你想要的样式
mxgraph API 样式设置

你可能感兴趣的:(前端可视化MXgraph)