android canvas 工作流_工作流之流程跟踪图绘制

最新推荐文章于 2024-08-26 17:12:47 发布

原创最新推荐文章于 2024-08-26 17:12:47 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android canvas 工作流

本文介绍如何使用jsPlumb库在Android环境下通过Canvas绘制流程跟踪图。通过示例代码展示了如何配置jsPlumb，定义连接样式、端点样式，并详细解释了如何创建节点和连接线，最后实现节点的拖放和提示功能。

最近看到其它系统使用jquery.jsPlumb绘制流程图，效果还不错，于是也就动手学做一个！先看效果：

需要引用的js

下以是绘制的js:

$(document).ready(function () {

$.getJSON('WFProcess.ashx?BillCode=&BuDataID=', function (json) {var fillColor = "gray";//jsPlumb.setRenderMode(jsPlumb.VML);

jsPlumb.Defaults.Connector = ["Straight", { curviness: 50}];

jsPlumb.Defaults.DragOptions= { cursor: "pointer", zIndex: 2000};

jsPlumb.Defaults.PaintStyle= { strokeStyle: fillColor, lineWidth: 2};

jsPlumb.Defaults.EndpointStyle= { radius: 4, fillStyle: fillColor };var anchors = [[0.5, 0, 0, -1], [1, 0.5, 1, 0], [0.5, 1, 0, 1], [0, 0.5, -1, 0]];var arrowCommon = { foldback: 0.7, fillStyle: fillColor, width: 14};var aConnection ={

dynamicAnchors: anchors,

overlays: [

["Arrow", { location: 0.7}, arrowCommon]

]

};if (json.total > 0) {

$.each(json.list, function (i, row) {var nodeDiv = document.createElement('div');var nodeId = "window" +row.prcs_id;

$(nodeDiv)

.attr("id", nodeId)

.attr("to", row.to)

.addClass("window" +row.prcs_class)

.css({"left": parseInt(row.left)/2.5, "top": (parseInt(row.top) + 60)/2.5})

.attr("title", row.title)

.html('

' + row.prcs_content + '

');

$("#prcsList").append(nodeDiv);

});//遍历节点并连线

$(".window").each(function () {

toArr= $(this).attr("to").split(",");for (var i intoArr) {if (toArr[i] != "" && $("#window" + toArr[i]).size() > 0 && this.id != "window" +toArr[i]) {

jsPlumb.connect({ source:this.id, target: "window" +toArr[i] }, aConnection);

}

});

$("[title]").tooltip();

}

});