html5中的流程图设计器答案

【问题标题】：Flow chart designer in html5html5中的流程图设计器
【发布时间】：2013-11-20 16:01:00
【问题描述】：

我有一个流程设计师的规范，但我很难找到合适的工具来制作它，

最小规格 - 可拖动的块，可以用箭头连接每个块显示最小细节，悬停块应该增长并显示额外的细节

需要在html5中

我在看 KinectJS/EaselJS 来绘制我的流程，但是我需要在每个扩展块中都有 DOM 元素（组合框/文本框/等）以进行编辑，而我找不到合适的方法来使用它们中的任何一个。

我查看了 JQueryUI 的 draggable，它非常适合拖动 DOM 元素块，但是在它们之间绘制箭头变得非常困难。

有没有人做过类似的东西或者可以给我任何指导？

谢谢:)

【问题讨论】：

标签： html jquery-ui canvas

【解决方案1】：

您的规格限制了您的选择。

您需要包含实时选择和文本输入元素的可拖动 div。

我会试试这个组合：

用于可拖动 div 的 jQueryUI。
使用 marker-start 和 marker-end 作为箭头的连接器的 SVG 线

如果您有野心，可以使用 SVG 曲线作为连接器；）

备选方案 #1：D3。

如果您愿意通过学习曲线，d3 是一个非常好的用于流程图的 SVG 基础架构（带有连接器的灵活数据元素）。每个 d3 元素（=您的流程图块）都可以侦听鼠标和键盘事件，但 d3 没有组合框或文本元素——您必须自己编写这些代码。组合框/文本输入的快捷方式是在需要输入时使用 CSS 将 html 选择/文本元素定位在 d3 元素上。

替代方案 #2：KineticJS（或您喜欢的其他画布库）

KineticJS 为您提供开箱即用的块元素（矩形）和连接器（折线）。但同样，输入是有限的。但动力学元素非常灵活。将 Kinetic 元素与老式浏览器事件结合起来也可以。

这是让 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>

【讨论】：

【解决方案2】：

如果箭头一直在变化，画布可能是绘制箭头的最佳方式。您可以在块后面放置一个大画布对象，或者为每个箭头构建不同的画布元素。

当我构建类似的东西时，我有一个 setTimeout 函数仅在鼠标按钮按下时更新特定箭头。只是为了让它看起来更好。

【讨论】：