在网页上,我想动态地呈现非常基本的流程图,即由行连接的几个框。理想情况下,用户可以单击其中一个框(div?),然后转到另一个页面。是否有人知道任何客户端(即服务器不可知)Javascript或CSS库/技术,可能有助于实现这一目标?
发布于 2018-07-23 16:11:39
我发现最好也最简单的就是JS-Graph.it: http://js-graph-it.sourceforge.net/
它还具有以下有用的特点:确定流向 http://js-graph-it.sourceforge.net/gettingstarted_8.html
例如,在我的例子中,我有一个文档工作流,我需要它流向右侧。
一个更简单的选择是Wz_jsGraphics: http://www.graphviz.org/ 在我的例子中,我画这样的箭头:
/**Draw an arrow made of 3 lines.
* Requires wz_jsGraphics (http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm).
* @canvas a jsGraphics object used as canvas
* @blockFrom id of the object from which the arrow starts
* @blockTo id of the object where the arrow ends with a arrowhead
*/
function drawArrow(canvas, blockFrom, blockTo){
//blocks
var f = $("#" + blockFrom);
var t = $("#" + blockTo);
//lines positions and measures
var p1 = { left: f.position().left + f.outerWidth(), top: f.position().top + f.outerHeight()/2 };
var p4 = { left: t.position().left, top: t.position().top + t.outerHeight()/2 };
var mediumX = Math.abs(p4.left - p1.left)/2;
var p2 = { left: p1.left + mediumX, top: p1.top };
var p3 = { left: p1.left + mediumX, top: p4.top };
//line A
canvas.drawLine(p1.left, p1.top, p2.left, p2.top);
//line B
canvas.drawLine(p2.left, p2.top, p3.left, p3.top);
//line C
canvas.drawLine(p3.left, p3.top, p4.left, p4.top);
//arrowhead
canvas.drawLine(p4.left - 7, p4.top - 4, p4.left, p4.top);
canvas.drawLine(p4.left - 7, p4.top + 4, p4.left, p4.top);
}
var jg = new jsGraphics('myCanvasDiv');
drawArrow(jg, 'myFirstBlock', 'mySecondBlock');
jg.paint();
发布于 2018-07-23 16:53:19
https://stackoverflow.com/questions/-100000390
复制相似问题