html5中的流程图设计器
我有一个流程设计者的规范，我很难找到合适的工具来制作它，
最小规格-可拖动的块，可以与箭头连接每个块显示最小详细信息，悬停时块应增长并显示额外的详细信息
需要在html5中
我正在寻找KinectJS/EaselJS来绘制我的流，但我需要在每个扩展块中都有DOM元素(comboboxes/textboxes/等)来进行编辑，而我找不到一种合适的方法来实现这一点。
我研究了JQueryUI的draggable，它非常适合拖动DOM元素块，但是在它们之间绘制箭头变得非常困难。
有没有人做过这样的东西，或者能给我指点方向？
谢谢:)
回答 2
Stack Overflow用户
发布于 2013-11-09 02:27:43
你的规格限制了你的选择。
您需要包含活动选择和文本输入元素的可拖动div。
我会尝试这个组合：
适用于可拖动div的
- jQueryUI。适用于连接器的
- SVG线使用
marker-start和marker-end适用于箭头
如果你有雄心壮志，可以使用SVG曲线作为连接线;)
替代方案#1: D3.
如果您愿意经历一段学习曲线，d3是一个非常好的流程图基础设施(带有连接器的灵活数据元素)。每个d3元素(=您的流程图块)可以侦听鼠标和键盘事件，但是d3没有组合框或文本元素--您必须自己编写这些元素。组合框/文本输入的快捷方式是在需要输入时使用CSS将html select/text元素放在d3元素上。
替代方案#2: KineticJS (或您最喜欢的其他画布库)
KineticJS为用户提供了现成的块元素(矩形)和连接器(多段线)。但同样，输入也是有限的。但是动力学元素是相当灵活的。将动态元素与老式的浏览器事件相结合也可以。
下面是让KineticJS监听用户键盘事件并显示文本的起始代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// this variable holds the current text
var typedText="";
// create a text object
var text = new Kinetic.Text({
x: 20,
y: 30,
fontSize: 30,
text: "",
fontFamily: 'Calibri',
fill: 'green'
});
layer.add(text);
layer.draw();
// listen for keys
// get the usual "printable" keys
$(document).on('keypress',(function(e){
// get the key
key=e.which;
// let keydown handle control keys
if(key<32){return;}
// add the typed character
typedText+=String.fromCharCode(e.charCode);
text.setText(typedText);;
layer.drawScene();
}));
// handle control keys like backspace
$(document).on('keydown',(function(e){
// get the key
var key=event.which;
// Let keypress handle displayable characters
if(key>46){ return; }
// handle the backspace
// (and any other control keys you want to program)
switch(key){
case 8: //backspace:
if(typedText.length>0){
typedText=typedText.slice(0,-1);
text.setText(typedText);;
layer.drawScene();
}
break;
default:
break;
}
}));
}); // end $(function(){});
</script>
</head>
<body>
<p>Type...(and use the backspace)!</p>
<div id="container"></div>
</body>
</html>Stack Overflow用户
发布于 2013-11-09 01:49:54
如果箭头一直在变化，画布可能是绘制箭头的最佳方式。你可以在你的块后面有一个大的画布对象，或者为每个箭头构建一个不同的画布元素。
当我构建类似的东西时，我让一个setTimeout函数仅在鼠标按键按下时更新特定的箭头。只是为了让它看起来更漂亮。
https://stackoverflow.com/questions/19862520
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号