上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流:这篇文章主要介绍用canvas绘制流程节点. 绘制前我们需要先准备一张节点图片,例如::好了,正题开始: 在html中添加canvas标签: <canvas id="canvasId" width = "800" height="600" style="border:1px solid black; margin-left:

html的标签 <canvas>用于图形的绘制,通过脚本 (通常是JavaScript)来完成,canvas简而言之就是个画布.上一篇文章我们提到工作流的一个重要组成部分:流程建模,也就是流程图: 啥也不说,咱先看个效果: 上面这个就是用canvas绘制的流程图,流程图里的节点连线都是自由拖拽上去的. 那么canvas是怎么绘制流程图的,首先canvas只是html的标签,那我们要实现流程节点的拖拽与绘制那肯定是要借助其他开发语言的,通常咱们使用JavaScript来完成绘制.那我们具体应该怎

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向下兼容与图标 四.示例下载 一.Canvas canvas是HTML

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

一.效果图展示及说明 (图一) (图二) 附注说明: 1. 图例都是DAG有向无环图的展现效果.两张图的区别为第二张图包含了多个分段关系.放置展示图片效果主要是为了说明该例子支持多段关系的展现(当前也包括单独的节点展现,图例没有展示) 2.图例中的圆形和曲线均使用的是SVG绘制.之前考虑了三种方式,一种是html5的canvas,一种是原始的html DOM,再有就是SVG.不过canvas对事件的支持不是很好(记得之前看过一篇文章主要是通过计算鼠标定位是否在canvas上的某个区域来触发事件机

http://www.kafeitu.me/activiti/2012/03/22/workflow-activiti-action.html 1.简单介工作流引擎与Activiti 对于工作流引擎的解释请参考百度百科:工作流引擎 1.1 我与工作流引擎 在第一家公司工作的时候主要任务就是开发OA系统,当然基本都是有工作流的支持,不过当时使用的工作流引擎是公司一些牛人开发的(据说是用一个开源的引擎修改的),名称叫CoreFlow:功能相对Activiti来说比较弱,但是能满足日常的使用,当然也有

http://www.kafeitu.me/activiti/2012/03/22/workflow-activiti-action.html 1.简单介工作流引擎与Activiti 对于工作流引擎的解释请参考百度百科:工作流引擎 1.1 我与工作流引擎 在第一家公司工作的时候主要任务就是开发OA系统,当然基本都是有工作流的支持,不过当时使用的工作流引擎是公司一些牛人开发的(据说是用一个开源的引擎修改的),名称叫CoreFlow:功能相对Activiti来说比较弱,但是能满足日常的使用,当然也有

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

前言 找一个好用的画图工具真心不容易,Activiti 工作流自带的 Web 版画图工具,外表挺华丽,其实使用起来各种拧巴:Eclipse 的 Activiti 画图插件,对于相对复杂的流程也是很不友好. 环境搭建 网上有许多详细的安装配置步骤,这里就不一一赘述,只列出相关版本. 软件 版本 功能 地址 Python 3.7.1 脚本语言 https://www.python.org/ Django 2.1.3 Web框架 https://www.djangoproject.com/ PyCha

前言 自从 Activiti 和 JBPM4 分家以后,Activiti 目前已经发展到了版本7,本着稳定性原则我们最终选择了6,之前还有一个版本5. 问题 在开发使用的过程中发现 Activiti 自带的 Web 端作图工具居然没有图片导出功能,这显然是不能满足我们的需求.于是参考导出 xml 功能,阅读了部分源码,也没有发现相关的 API,难道官方人员忽略了一个这么重要的功能!!! 由于Activiti-app 生成的表和 Activiti 本身自带的表有很多结构性差异,虽然通过代码也是可以

1.简单介工作流引擎与Activiti 对于工作流引擎的解释请参考百度百科:工作流引擎 1.1 我与工作流引擎 在第一家公司工作的时候主要任务就是开发OA系统,当然基本都是有工作流的支持,不过当时使用的工作流引擎是公司一些牛人开发的(据说是用一个开源的引擎修改的),名称叫CoreFlow:功能相对Activiti来说比较弱,但是能满足日常的使用,当然也有不少的问题所以后来我们只能修改引擎的代码打补丁. 现在是我工作的第二家公司,因为要开发ERP.OA等系统需要使用工作流,在项目调研阶段我先搜索资

@font-face { font-family: 宋体 } @font-face { font-family: "Cambria Math" } @font-face { font-family: Calibri } @font-face { font-family: "@宋体" } p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0 0 0.0001pt; text-align: justify; text-

系列目录     [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊重知识产权,共建和谐开源社区. ELSA Elsa Core是一个工作流库,支持在任何.NET Core应用程序中执行工作流.工作流不仅可以使用代码定义,还可以定义为JSON.YAML或XML. 设计器.提供了一个设计器:Elsa Designer 用于通过可视化方式定制流程. 持久化.工作流几乎可

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 日常生活工作学习中,大家对电子表格必定不陌生.从工作数据汇总分析到出门收据各种电子发票,这些都是由电子表格制作出来的. 不过大家对电子表格的印象可能停留在这里: 标准行列数据统计的表格样式. 但其实,表格也可以是这样的: 工作中遇到需要实现的表格情况往往比大家想象的要更加复杂,最近我们在做客户支持的工作过程中遇到了一个客户,他需要借助电子表格表格实现合同中的电子签名. 电子签名通俗来说就是通过技术手段实现

canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上(0,0)的位置. 首先定义一个旋转的角度a,比如想要旋转45度. a=45*Math.PI/180 rotate(a):rotate的旋转参数是弧度.注意,旋转之前要先设定旋转的中心点. function cxt_rota

前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持「上传压缩」,但仍可以自己来实现. Flash 首选方案当然是 Flash,毕竟它提供了压缩 API.除了 zip 格式,还支持 lzma 这种超级压缩.因为是原生接口,所以性能极高.而且对应的 swf 文件,也非常小. JavaScript Flash 逐渐淘汰,但取而代之的 HTML5,却没有提

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然

前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一段代码(下文具体解释代码作用): window.TrackTransform = function () { var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); var xform = svg.c

默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上. 但是如果图像的每次绘制都参考一个固定点将缺少灵活性,于是在canvas中引入“当前坐标系”的概念,所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系,它也会作为图像状态的一部分.比如rotate旋转操作,改变当前坐标系也就是改变了rotate的参考点,试想下如果没有当