MxGraph从入门到精通之3:设置图形样式
文章目录
- 修改默认样式
- 修改顶点(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绘制图形的核心步骤,绘制出来的图形默认的样式如下:
我们可以修改默认样式来修改所有图形的默认样式,也可以在创建节点的时候通过参数来创建指定样式的节点或者调用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程序显示效果如下:
修改边(Edge)的默认样式
和顶点类似,可以通过以下方式修改边的默认样式:
let style = graph.stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = 'Green';
mxConstants.STYLE_STROKECOLOR
表示边的颜色,上述代码表示将边的默认颜色修改成绿色。在MxGraph中,颜色的取值范围可以是HTML颜色名(如Red,Pink等)或十六进制码(如#0000ff)。常用HTML颜色名可参考:HTML Color Codes 。修改边的默认样式后,上述的helloworld程序显示效果如下:
设置节点样式
创建指定样式的节点
在上一节中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' );
效果类似下图:
更新已有节点样式
setCellStyle可以更新一组节点的样式,如下:
graph.setCellStyle('shape=cloud;fillColor=Gray', [v1,v2])
v1,v2为我们上面创建的两个顶点,上述代码将v1,v2的样式都设置成了灰色以及云状,效果类似下图:
常用样式汇总
通过上述示例我们知道MxGraph图形的样式设置实际上是通过一个包含多个键值对的字符串或者通过style对象来指定的,字符串中的键/值和style对象中的属性/值是一一对应的。例如,shape=cloud
的作用类似于 style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CLOUD
,实际上mxConstants.STYLE_SHAPE
常量的值就是shape
, mxConstants.SHAPE_CLOUD
的值就是cloud
。
上述示例演示了shape,fillColor等样式的效果,下面总结一下常用的样式类型及其取值范围,出于方便,下面有些地方使用了常量的形式,有些地方使用了字符串的形式,这些常量和字符串的对应关系可以参考:MxGraph全局常量
mxConstants.STYLE_SHAPE - 形状
mxConstants.STYLE_SHAPE
用于指定MxGrape图形的形状,可取的值如下:
rectangle ellipse doubleEllipse rhombus line image arrow
arrowConnector label cylinder swimlane connector actor triangle hexagon
各个形状的效果如下:
mxConstants.STYLE_FONTSTYLE - 字体样式
mxConstants.STYLE_FONTSTYLE
用于设置字体的样式,可取的值为:
FONT_BOLD // 粗体
FONT_ITALIC // 斜体
FONT_UNDERLINE // 下划线
FONT_STRIKETHROUGH // 中划线
样式效果如下:
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'
的效果如下:
mxConstants.STYLE_GRADIENTCOLOR - 渐变颜色
mxConstants.STYLE_GRADIENTCOLOR
用于设置渐变颜色,style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'
的效果如下:
mxConstants.STYLE_SHADOW - 阴影效果
mxConstants.STYLE_SHADOW
用于指定是否开启阴影效果,默认为false,style[mxConstants.STYLE_SHADOW] = true
的效果如下:
MxGraph从入门到精通之3:设置图形样式相关推荐
- MxGraph从入门到精通之2:HelloWorld程序解析
文章目录 通过上一篇文章MxGraph从入门到精通之1:运行HelloWorld示例程序,我们已经把MxGraph运行起来,通过查看hellloworld.html可以总结该程序运行的核心步骤主要有以 ...
- 前端提高篇(六十七):HTML进阶8:canvas画布基本知识(二)绘制图形、曲线,设置图形样式,渐变
绘制图形 绘制矩形 1.先创建矩形,再描边: canvas {border: 1px solid #000;width: 200px;height: 200px; } <canvas id=&q ...
- MxGraph从入门到精通之1:运行HelloWorld示例程序
简介 MxGraph包括了一个JavaScript编写的客户端软件,以及一系列各个语言写的后端. 客户端是一个图形组件,它需要一个web服务器把相关的文件传给客户端或者直接从本地文件系统运行起来(如下 ...
- MxGraph从入门到精通之5:在Vue项目中使用MxGraph
第一步:安装npm包 npm install mxgraph 第二步:在mxgraph.vue中使用mxgraph <template><div><div ref=&qu ...
- MxGraph从入门到精通之4:布局
文章目录 mxCircleLayout-圆形布局 mxCompactTreeLayout-树状布局 mxFastOrganicLayout-组织状布局 本文介绍MxGraph支持的几种常用布局方式. ...
- laravel从入门到精通之 时区设置
config/app.php文件 设置 'timezone' => 'Asia/Shanghai', 以下是常用的时区 亚洲(Asia) 时区编码 中国(上海) Asia/Shang ...
- 前端入门: 用css设置文字样式。
转自:微点阅读 https://www.weidianyuedu.com 经过前面的文章,相信大家已经基本了解了前端最基本的一些规则了: html搭建结构,承载内容 css则可以利用选择器,来为相应 ...
- 【Python】Python实战从入门到精通之二 -- 教你使用Python中列表操作
本文是Python实战–从入门到精通系列的第二篇文章: [Python]Python实战从入门到精通之一 – 教你深入理解Python中的变量和数据类型 Python实战从入门到精通之二 – 教你使用 ...
- MDT 2013 从入门到精通之自动化部署WinSer 2012 R2
Windows Server 2012 R2 是由Microsoft设计开发的新一代的服务器专属操作系统,其核心版本号为 Windows NT 6.3 .提供企业级数据中心与混合云解决方案,直观且易于 ...
最新文章
- Go 语言编程 — go 常用指令
- pythondocx文档重叠_使用PYTHON实现docx文档的读写
- Linux 下面的时区与时间错误修复过程记载(血泪篇)
- 文本挖掘(part4)--N-gram模型
- golang操作mysql数据库(Go-SQL-Driver/MySQL)
- mybatis There is no getter for property named 'xx' in 'class java.lang.String
- F#简明教程二:F#类型系统和类型推断机制
- 句句真研—每日长难句打卡Day18
- 何时弃用 MongoDB?| 技术头条
- SCN和Checkpoint
- RAID (HP)双循环
- 百度搜索风云榜Rss
- ug许可证服务器注册表删除,ug许可证卸载工具
- 干货|关于云计算认证升级内容
- 【笔记】2022.06.20 python数据分析三大神器numpy、pandas、matplotlib
- 用Scipy中的linprog解决股票融资中的线性规划问题
- 解决uniapp分享到微信跳转两次app>打开微信>打开APP>打开微信 的问题
- 凸优化(一)绪论与凸集
- larval 策略模式
- 2018年11月25日ICPC焦作站参赛总结