mxgraph教程_graph绘图

mxgraph教程_graph绘图mxGraph是一个支持多种语言(Java、JavaScript、PHP、.NET)的画图框架,所绘制的图形可以在主流浏览器以及原生应用上使用。mxGraph官方资料全英文,网上有几篇mxGraph的教程,对于“入门”和“使用”讲解得比较详细。所以这篇文章不是介绍如何画一个图形,写一个helloworld,而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。需…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

mxGraph是一个支持多种语言(Java、JavaScript、PHP、.NET)的画图框架,所绘制的图形可以在主流浏览器以及原生应用上使用。
mxGraph官方资料全英文,网上有几篇mxGraph的教程,对于“入门”和“使用”讲解得比较详细。
所以这篇文章不是介绍如何画一个图形,写一个hello world,而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。
需要读者对mxGraph的文档有一定的了解或者使用mxGraph。

mxGraph的使用场景

mxGraph的使用场景有4个:图形可视化、图形交互、图形布局、图形分析。

图形可视化

图形可视化是mxGraph的主打功能,这个很好理解,就是把一些抽象的概念用图形来表示,比如常见的流程图、思维导图、实体关系图等。
需要注意的是mxGraph所绘制的图主要是由“点”(也包括矩形、圆形这类基本形状)和“边”组成的,如果要用mxGraph来画蒙娜丽莎那就肯定是不合适的。
下图是官方提供的一张样图。
作者猜测实现方式是用世界地图作为背景图片,然后在此之上绘制点和线。
为了验证猜测,访问了官方示例提供的网站,发现是一张jpg图片,而且没有连线。
可能是后端生成导出的位图,或者源图片已经被网站替换了。

{% asset_img vis.png %}

图形交互

mxGraph除了绘制图形之外还提供了丰富的编辑功能,比如拖拽、选择、复制、调整大小等。
mxGraph甚至还专门提供了一个API类用来支持在线编辑器。
关于这一块我没有使用~

{% asset_img interaction.png %}

图形布局

非常重要的一个功能,能自动排列图形元素。
mxGraph提供了多种布局方式,比如树形布局、栈式布局、圆形布局。
这一块后面重点介绍。

{% asset_img layout.png %}

图形分析

支持图相关的算法分析,比如找出图中两个节点的最短路径。
关于这一块我没有使用~
不过我没有找到相关API,估计需要开发者自己实现相关算法。

{% asset_img analysis.png %}

小结

学习新技术或框架的时候首先需要弄清楚它是什么,能做什么。
如果和要实现的功能匹配再继续学习研究。

mxGraph的绘图方式

前端绘制图形有3种方式:

  1. HTML + CSS。
  2. canvas。
  3. svg。

HTML+ CSS

优点

  • 前端工程师最熟悉最常用的方式,开发起来非常简单。
  • 借助CSS3可以实现炫酷的动画效果。

缺点

  • 非常依赖浏览器环境,如果要迁移到原生应用上或者客户端就会比较麻烦。
  • HTML、CSS没有合适的模块机制,所以图形的复用也不方便。

canvas

canvas使用也比较广泛,比如百度的著名开源项目echarts就是通过canvas来绘制各种图形。

优点

  • 强大的API,可以实现复杂的图形和效果。
  • 渲染速度快,可以利用显卡加速。

缺点

  • 也非常依赖浏览器环境,而且低版本的浏览器不支持。
  • 代码逻辑比较复杂。
  • 不方便保存和导出。

svg

优点

  • 宽泛的运行环境。浏览器、绘图工具、编辑器里都可以正常显示。
  • 良好的可编辑性。svg可以在前端通过JavaScript修改,也可以通过后端语言修改,还可以让设计师通过软件修改。
  • 使用简单。svg是xml的语法,没有复杂的逻辑,全都是配置出来
  • 矢量图。相对于位图,无分辨率要求,缩放清晰。

缺点

  • 复杂图形渲染速度较慢。

小结

mxGraph默认绘制的是svg图形(看API文档和源码发现也支持canvas),所以支持后端语言进行预渲染,同时也支持保存和导出,转化为位图也非常方便。
理解了这一点,对我们了解mxGraph的功能特性,以及修改源代码都会有帮助。

mxGraph的核心概念cell

cell这个概念可以理解成为双向数据绑定中的数据模型,我们需要修改图形的时候,应该通过mxGraph提供的API来修改mxCell实例的属性,然后mxGraph的绘图函数来根据数据模型来修改视图。
mxGraph的其他很多概念都是以cell作为基础的:样式、布局、内容文本、事件、位置…

误区

  1. 前面提到mxGraph的图形分为两类:vertex(点)和edge(边),但实际上它们都属于mxCell类的实例,只是一些属性值不同而已。
  2. 官方文档提供的beginUpdateendUpdate函数,写法上和数据库的事务提交很像,也有文章说是进行批量处理,实际上只是为了避免多次触发而合并了change事件而已,如果不使用这两个函数不会对绘图结果产生什么影响。至于回滚什么的那是想多了。

mxGraph的布局算法

不少开发者看到“算法”这个词就会犯怵,觉得很复杂、难以理解。
但其实mxGraph的布局算法并没有那么难以理解。

  • 所有的布局算法类都是“继承”自基类mxGraphLayout,自定义了一些属性,同时实现API函数execute,mxGraph在绘制图形的时候会调用这个函数。
  • 布局算法只涉及到vertex(点)的操作,当vertex(点)被调整之后,mxGraph会自动调整它们之间edge(边)的关系,或是显示隐藏或是弯曲。
  • 如果需要绘制大量的图形容易造成性能问题,不应该在算法中实现这。而可以借助mxGraph提供的几种默认方式实现:1.折叠/展开;2. 钻取/弹出;3.分层过滤显示

mxGraph的定制化

很多时候我们还需要对mxGraph绘制的图形进行定制化开发,主要为下面几点。

样式

mxGraph对样式的支持是非常不完善的。

  • 首先不支持使用css,。这样也就意味着无法使用样式继承,样式类这些特性了。
  • 修改的时候需要通过API函数,传入JSON对象。
  • mxGraph内部操作样式的时候并没有使用defs标签来声明样式类,而是直接修改标签的style、fill这些属性。这样会导致很多重复样式代码,同时不方便样式覆盖。

例如下面的代码是用来实现一个高亮样式的,如果支持CSS样式类,我们只需要写个高亮样式,增删类名即可。
但是mxgraph就比较麻烦,要写成对象,同时在取消高亮时要手动清除对应属性。

var common_highlight = {}
common_highlight[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD
var vertex_highlight = Object.assign({}, common_highlight)
vertex_highlight[mxConstants.STYLE_FILLCOLOR] = '#00ffff'
var edge_highlight = Object.assign({}, common_highlight)
edge_highlight[mxConstants.STYLE_STROKECOLOR] = '#00ffff'
if (hover) {
  if (!state.styleList) {
    if (state.cell.edge) {
      state.styleList = new mxStylesheetList(Object.assign({}, graph.getStylesheet().styles.defaultEdge, state.style));
    } else if (state.cell.vertex) {
      state.styleList = new mxStylesheetList(Object.assign({}, graph.getStylesheet().styles.defaultVertex,
        state.style));
    }
  }
  if (state.cell.vertex && state.cell.value) {
    state.styleList.add('highlight', vertex_highlight);
  }
  if (state.cell.edge) {
    state.styleList.add('highlight', edge_highlight);
  }

} else {
  state.styleList.remove('highlight');
}
state.style = state.styleList.get();
state.shape.apply(state);
state.shape.redraw();
if (state.text != null) {
  state.text.apply(state);
  state.text.redraw();
}

Jetbrains全家桶1年46,售后保障稳定

HTML元素

mxGraph一个强大之处是支持在svg中插入HTML元素,官方给出的examples中有个htmllabel.html实现了类似功能。
概括地说两步实现:

  1. 在创建点的时候插入一个 UserObject 对象声明,表明此处可以插入DOM元素。
  2. 重载 convertValueToString 函数,返回DOM元素。

相关代码如下:

var obj = doc.createElement('UserObject');
obj.setAttribute('label', 'FASTQ files');
var v1 = graph.insertVertex(col[0], null, obj, 0, 0, width, height)
...
graph.convertValueToString = function (cell) {
  let div = document.createElement('div')
  ...
  return div;
}

mxGraph的边都是自动绘制的,API支持对边的样式修改,比如箭头、粗细等。
边绘制成折线的时候为两种形式,默认是通过贝塞尔曲线绘制成带圆角的折线,另一种是直角折线。
mxGraph内部并没有对这些边进行优化,如果布局不合理,交叉、穿过点的情况就会发生。
在开发中我对边的绘制方式进行了小小的修改,统一改为直接使用三次贝塞尔曲线连接,具体代码如下:

// shap/mxShap.js
mxShape.prototype.addPoints = function(c, pts, rounded, arcSize, close, exclude, initialMove)
{
	if (pts != null && pts.length > 0)
	{
		initialMove = (initialMove != null) ? initialMove : true;
		var pe = pts[pts.length - 1];
		
		// Adds virtual waypoint in the center between start and end point
		if (close && rounded)
		{
			pts = pts.slice();
			var p0 = pts[0];
			var wp = new mxPoint(pe.x + (p0.x - pe.x) / 2, pe.y + (p0.y - pe.y) / 2);
			pts.splice(0, 0, wp);
		}
	
		var pt = pts[0];
		var i = 1;
	
		// Draws the line segments
		if (initialMove)
		{
			c.moveTo(pt.x, pt.y);
		}
		else
		{
			c.lineTo(pt.x, pt.y);
    }
    const midX = pt.x / 2 + pe.x / 2
    // 调用内置函数绘制三次贝塞尔曲线
    c.curveTo(midX, pt.y, midX, pe.y, pe.x, pe.y)
    // 忽略后面绘制折线的代码
    return;
    //...
  }

参考:

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/223061.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 虚拟IP简介「建议收藏」

    虚拟IP简介「建议收藏」什么是虚拟IP虚拟IP(VirtualIPAddress,简称VIP)是一个未分配给真实弹性云服务器网卡的IP地址。弹性云服务器除了拥有私有IP地址外,还可以拥有虚拟IP地址,用户可以通过其中任意一个IP(私有IP/虚拟IP)访问此弹性云服务器。同时,虚拟IP地址拥有私有IP地址同样的网络接入能力,包括VPC内二三层通信、VPC之间对等连接访问,以及弹性公网IP、VPN、云专线等网络接入。多个主备部署的弹性云服务器可以在绑定虚拟IP地址时选择同一个虚拟IP地址。用户可以为该虚拟IP地址绑定一个弹

    2022年10月20日
  • LAMP配置相关

    LAMP配置相关为Ubuntu搭建LAMP(Apache+PHP+MYSQL)开发环境    由于LAMP大部分操作与/var/www目录相关,为了方便,修改该目录的权限为普通用户可访问     # chmod  777 /var/www配置phpMyAdmin http://blog.csdn.net/doupei2006/article/details/8005061

  • pycharm-2021.3.3激活码破解方法

    pycharm-2021.3.3激活码破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • .gitkeep常用写法

    .gitkeep常用写法

    2021年10月20日
  • Hibernate与MyBatis详解「建议收藏」

    Hibernate与MyBatis详解「建议收藏」Hibernate 是当前最流行的O/Rmapping框架,它出身于sf.net,现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/Rmapping框架。目前属于apache的一个子项目。MyBatis 参考资料官网:http://www.mybatis.org/core/zh/index.html &a

  • 线程有哪些属性_thread runnable callable区别

    线程有哪些属性_thread runnable callable区别1、当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的。2、当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行结束。3、只有IsBackground=TRUE的线程才会随着主线程的退出而退出。4、当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程。后台线程将会随着主线程的退出而退出。5、原理:只要所有前台线程都终止后,CLR就会对每一个活在的后台线程调用Abort()

    2022年10月17日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号