SVG开发Web工作流编辑器

Stella981
• 阅读 536

Web工作流设计器的实现

在web上作设计器,图形有了,剩下的就是控制这些图形元素。

工作流程有两种基本元素一种我们称之为节点,一点称之为关系(节点间的关系)也就是工作流的流向问题。要实现工作流设计器有几个要点:

1、支持工作流元素的添加、删除、移动。

2、建立节点间的关系

3、将设计好的流程保存到永久物质里(如文件,数据库等)

4、可以从永久数据里读取数据,并表现为图形

VMLSVG开发工作流设计器

工作流是许多系统中必备的一种功能,而工作流设计器就显示对用户很重要。可视化的设计器对于客户来说就更好了,非常直观,有效果的减少用户的烦脑。在各种应用中有b/s的系统,有c/s的系统。不同的系统工作流程都是相似的。当今web应用日益广泛,因此本文将讲述如何在web上实现工作流设计器。其中,图形技术发挥着至关重要的作用,可升级矢量图像(SVG, Scalable Vector Graphics)和VML(Vector Markup Language)的产生有着十分积极的意义。它具有支持矢量图和动画、由文本构成图形易于操作、对点阵图形兼容等特点。然而,不同浏览器对两种标准的支持并不一致,微软的IE浏览器系列对VML支持比较好,而其他的浏览器软件对SVG标准支持更完美。这也使得开发基于Web的图形系统变得更加复杂。

多比图形控件出现简化了的这种开发难度,它是一款基于Web的矢量图形控件,能够检测浏览器类型,自动选择VMLSVG方案进行做图, 类似于网页上的Visio控件。

SVG开发Web工作流编辑器

VML技术

VML(VectorMarkup Language)是XML1. 0 的一个应用,使用VML 可以在IE 5. 0 以上版本中绘制矢量图形。由于VML 是基于新一带网络标记语言XML 标准的,也就是说,表示方法简单,易于扩展,数据与表现相分离,同时VML 支持高质量的矢量图形显示,它基于相连接的直线和曲线描述路径。其次VML 由文本构成,可以很方便地融合到HTML文件中,可用很少的字节来表示较复杂的图像,可以和其它HTML元素一样使用VML元素,在客户端浏览器显示图像。VML可以使用DHTML大部分属性和事件,如id, onmouseover等。最后VML 的功能不只是绘图,它可以在图形中嵌入文本,并可实现超链,通过脚本控制还可以实现动画效果。

SVG技术

SVG是由W3C制定的基于XML来描述二维矢量图型的一个开放标准,它用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。它具有以下优点:

1.图像文件可读,易于修改和编辑。

2.与现有技术可以互动融合。另外, SVG文件还可嵌入JavaScript脚本来控制SVG对象。

3.SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。

4. 如前所述, SVG文档作为一种规范的XML文档,能够很好地与W3C其他开放标准如DOM, CSS,XSL, XL ink, Xpointer, SM IL, HTML, XHTML等进行协同工作,简化异质系统间的信息交流,方便数据库的存取。

多比控件简介

多比图形控件出现简化了的这种开发难度,它是一款基于Web的矢量图形控件,能够检测浏览器类型,自动选择VML或SVG方案进行做图,类似于网页上的Visio控件,是目前国内外最佳的基于web矢量图解决方案,可以用于电力、化工、煤炭、工控组态软件、仿真、地理信息系统、工作流、复杂报表 工业SCADA系统、ERP流程设计系统图形管理图形拓扑分析GIS地理信息系统系统工程制图等领域。

多比图形编辑器实现了图形、图像和文字的有机统一。它除了支持HTML 中常用的标记,如文本、图像、链接、交互性、CSS的使用、脚本( Scrip t)外,还提供了大量针对图形、图像、动画的特定标记。对SVG图形文件进行编辑管理的过程为: SVG图形文件经XML 解析器打开,并在内存中生成一个对象树,用鼠标事件来驱动脚本执行,脚本通过DOM接口对对象进行相关的操作,来实现图形绘制、编辑等功能。


点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
3年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Java修道之路,问鼎巅峰,我辈代码修仙法力齐天
<center<fontcolor00FF7Fsize5face"黑体"代码尽头谁为峰,一见秃头道成空。</font<center<fontcolor00FF00size5face"黑体"编程修真路破折,一步一劫渡飞升。</font众所周知,编程修真有八大境界:1.Javase练气筑基2.数据库结丹3.web前端元婴4.Jav
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这