好久没有更新博客了,借此机会就把最近一段时间的工作成果拿出来秀一下了。
由于使用了VML,所以使用环境就是IE Only的了。(其实本来也想做成跨浏览器的,可惜其他的几种矢量图技术都不是很适合做嵌入应用。)
例子在这里,下载在这里,API在下面:
Shed.workflow.Palette 绘制流程的主容器。该组件继承自Ext.Panel,因此Ext.Panel的所有属性、方法和事件都适用于它。下表仅列出了所有该组件特有的属性和方法。 |
| 公共属性 |
| 属性名 | 属性类型 | 属性说明 |
| bottomHeight | String/Number | 设置图形绘制区域大小时的偏移高度 |
| parallelizable | Boolean | 是否允许绘制并行节点 |
| readOnly | Boolean | 是否允许改动模板内容 |
| rightWidth | String/Number | 设置图形绘制区域大小时的偏移宽度 |
| statusbar | Boolean | 是否拥有状态栏 |
| 公共方法 |
| 方法名 | 输入参数 | 方法说明 |
| addLine | Object/[Object] | 添加连线 |
| addNode | Object/[Object] | 添加节点 |
| clearPalette | | 清空绘制区域 |
| clearSelected | | 清除所有选中对象 |
| findNode | String | 根据指定ID查找节点 |
| getLines | | 得到所有连线 |
| getNodes | | 得到所有节点 |
| isValid | | 效验模板是否存在孤立节点,或者是串行模板中是否存在并行节点。如果以上情况都不存在返回true,否则返回false |
| removeSelected | | 删除选中节点和连线 |
| resizePalette | | 重新设置绘制区域大小 |
| selectAll | | 选中所有节点和连线 |
| setLineFlag | String | 设置当前绘制状态,如果当前状态为绘制节点则输入参数为null,如果当前状态为绘制连线则输入参数为'line'。 |
Shed.workflow.Node 流程节点组件。该组件支持所有的Html元素的原生事件,且回调函数的作用域为该组件本身。 |
| 公共属性 |
| 属性名 | 属性类型 | 属性说明 |
| fillcolor | String | 节点填充颜色代码 |
| fromId | Array | 上级节点ID数组 |
| height | Number | 节点高度 |
| id | String | 节点ID |
| left | Number | 节点X轴坐标 |
| name | String | 节点文本 |
| qtip | Boolean/Object | 节点工具提示对象 |
| selected | Boolean | 节点是否被选中 |
| selFillcolor | String | 节点被选中时的填充颜色代码 |
| selShadowcolor | String | 节点被选中时的阴影颜色代码 |
| selStrokecolor | String | 节点被选中时的边框颜色代码 |
| selTextcolor | Boolean | 节点被选中时的文本颜色代码 |
| shadowcolor | String | 节点阴影颜色代码 |
| shadowFlag | String | 节点是否显示阴影 |
| strokecolor | String | 节点边框颜色代码 |
| textcolor | String | 节点文本颜色代码 |
| textFlag | Boolean | 节点是否显示文本 |
| toId | Array | 下级节点ID数组 |
| top | Number | 节点Y轴坐标 |
| type | String | 节点类型,普通节点为'node',开始节点为'start',结束节点为'end'。 |
| width | Number | 节点宽度 |
| 公共方法 |
| 方法名 | 输入参数 | 方法说明 |
| clearSelected | | 取消节点选中状态 |
| getPosition | | 取得当前节点位置,形如:{top: 0, left: 0} |
| moveTo | Number, Number | 将节点移动到指定位置 |
| remove | | 删除节点 |
| setHeight | Number | 设置节点高度 |
| setLeft | Number | 设置节点X轴坐标 |
| setSelected | | 设置节点为选中状态 |
| setText | String, Boolean | 设置节点文本,第二参数如果为true,则同时更新节点工具提示的内容 |
| setTop | Number | 设置节点Y轴坐标 |
| setWidth | Number | 设置节点宽度 |
Shed.workflow.Line 流程连线组件。该组件支持所有的Html元素的原生事件,且回调函数的作用域为该组件本身。 |
| 公共属性 |
| 属性名 | 属性类型 | 属性说明 |
| fromNode | Shed.workflow.Node | 连线的上级节点 |
| id | String | 连线的ID |
| name | String | 连线的文本 |
| strokecolor | String | 连线的颜色代码 |
| strokeweight | Number | 连线的粗度 |
| textFlag | Boolean | 是否显示连线的文本 |
| toNode | Shed.workflow.Node | 连线的下级节点 |
| type | Boolean | 连线的类型,默认为'line' |
| 公共方法 |
| 方法名 | 输入参数 | 方法说明 |
| clearSelected | | 取消连线选中状态 |
| remove | | 删除连线 |
| setSelected | | 设置连线的状态为选中 |
| setText | | 设置连线的文本 |