Question

我想创建一个应用程序，用户可以点击图片添加点，并且对于每个（某些）点对，软件将在这两个点之间画一条线。这些点是可拖动的，所以线必须能够重新调整到它的两个ancors的新位置。这些点是预先指定的，超过5或6（可以是10或更多）

到目前为止我的设计。

一个动力学阶段
一个具有以下子女的backgroundLayer：
- backgournImage（将点击图片点击）
- 得分
- 点之间的界线

我想对于每一行，我将不得不使用一个包含两个ancors和line的组。我的问题如下：是否有一种方便的方法可以确保为一对点创建一个组，以便在单击图片添加新点时不创建新组？

stage.('contentClick', function(event){
    //create a new point
    // if  a group for the specific pair of ancors exists
    //add the point and draw the line
    // else this is the first point of the pair we are talking about
    // so create the group
    //and add the new point
    // add the group on the backgroundLayer
    //redraw stage
);

所有点都可以具有该点的名称的特定ID。

我知道创建点组的代码，添加它们删除它们检查父级等，只是不知道我怎么能用最少的手动方法来做。我的意思是检查每一点都不是很有效率吗？

希望我有所作为......

Answer 1

一种方法是跟踪必须连接的锚和成对的锚。拖动锚点时重置其连接线：

创建一条线作为连接器。
创建一个js对象，该对象包含对2个锚点和连接它们的线的引用。
在数组中添加连接对象。
拖动任何锚点时，迭代数组＆amp;重置已拖动锚点的连接器。

enter image description here

示例代码和演示：http://jsfiddle.net/m1erickson/b7h5dfg5/

<!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-v5.0.1.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);

    var connectors=[];

    var a1=addAnchor(50,50,'one');
    var a2=addAnchor(150,50,'two');
    var a3=addAnchor(100,100,'three');
    addConnection(a1,a3);
    addConnection(a2,a3);


    function resetConnections(id){
        for(var i=0;i<connectors.length;i++){
            var c=connectors[i];
            if(c.id1==id || c.id2==id){
                c.line.points([
                    c.anchor1.x(),
                    c.anchor1.y(),
                    c.anchor2.x(),
                    c.anchor2.y()                
                ]);           
            }
        }
        layer.draw();
    }

    function addAnchor(x,y,id){
        var anchor=new Kinetic.Circle({
            id:id,
            x:x,
            y:y,
            radius: 10,
            fill: 'red',
            stroke: 'black',
            strokeWidth:2,
            draggable: true
        });
        anchor.on('dragstart',function(){
            stage.find(".connector").each(function(n){ n.hide(); });
            layer.draw();
        })
        anchor.on('dragend',function(){ 
            stage.find(".connector").each(function(n){ n.show(); });
            resetConnections(this.id());
        })
        layer.add(anchor);
        layer.draw();
        return(anchor);
    }

    function addConnection(anchor1,anchor2){
        var line=new Kinetic.Line({
            name:'connector',
            points:[anchor1.x(),anchor1.y(),anchor2.x(),anchor2.y()],
            stroke:'black'
        });
        layer.add(line);
        line.moveToBottom();
        layer.draw();
        connectors.push({
            line:line,
            id1:anchor1.id(),
            id2:anchor2.id(),
            anchor1:anchor1,
            anchor2:anchor2
        });
    }


}); // end $(function(){});

</script>       
</head>
<body>
    <h4>Drag red anchors and connectors will follow</h4>
    <div id="container"></div>
</body>
</html>

使用kineticjs设计/实现软件的问题

1 个答案: