Question

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

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

需要在html5中

我正在看KinectJS / EaselJS吸引我的流量，但是我需要在每个扩展块中使用DOM元素（组合框/文本框/等）进行编辑，而且我找不到一个合适的方法来实现它们中的任何一个。

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

有没有人做过这样的事情或能给我任何指示？

谢谢:)

Answer 1

您的规格会略微限制您的选择。

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

我会尝试这种组合：

jQueryUI for draggable divs。
使用marker-start和marker-end作为箭头的连接器的SVG行

如果您雄心勃勃，请使用SVG曲线作为连接器;）

备选方案＃1：D3。

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

备选方案＃2：KineticJS（或您最喜欢的帆布库）

KineticJS为您提供开箱即用的块元素（Rect）和连接器（折线）。但同样，投入有限。但是Kinetic元素非常灵活。将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>

Answer 2

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

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

html5中的流程图设计器

2 个答案: