0

我有两个可在画布上拖动的 KineticJs 矩形。我希望能够使用一些修饰符（比如单击一个显示画线的按钮，或像 cntrl 这样的键盘修饰符）并单击其中一个矩形，拖动到另一个矩形并绘制一条连接两个矩形的简单线）。然后需要将该线链接到每个矩形，因此如果其中一个矩形移动，则该线将保持连接。

问题的第二部分似乎从这篇文章中得到了解决：KineticJS drag a box with line connected

但我找不到任何资源来帮助我解决我的第一个问题。

4

1 回答 1

1

这是让用户通过单击它们来选择 2 个矩形的方法

您甚至不需要 [开始连接] 按钮，只需让用户单击 2 个矩形并进行连接即可。

用户可以通过单击来选择一个矩形。然后，矩形将以黑色和红色边框突出显示。用户可以再次单击同一个矩形以取消选择它（突出显示被移除）。

突出显示是一个单独的矩形，它用黑色和红色边框“勾勒”选定的矩形。突出显示在单独的图层上完成。

在此处输入图像描述

首先，为每个矩形添加几个自定义属性。

// isHighlighted is just an on/off flag
// to mark this rectangle as highlighted by the user.

      rect.isHighlighted=false;

// highlight is a second rectangle that “highlights” this rectangle

      rect.highlight=null;

// Add a click event that toggles highlighting on/off 
// whenever the user clicks on this rectangle

      rect.on("click",function(){
          highlight(this);
          target.draw();
      });

当用户单击矩形时，此函数将打开/关闭矩形的突出显示。

此函数还测试是否突出显示了 2 个矩形，以便您可以连接它们。

是的......你找到了一篇关于如何进行连接的好帖子：

KineticJS 拖动一个连接线的框

// create a counter of highlighted rectangles
var highlightCount=0;

// when any rectangle is clicked, toggle its highlight on/off
function highlight(rect){
    if(rect.highlighted){
        rect.isHighlighted=false;
        rect.highlight.remove();
        highlightCount--;
    }else{
        var x=rect.getX()-8;
        var y=rect.getY()-8;
        var width=rect.getWidth()+16;
        var height=rect.getHeight()+16;
        var highlight=kRect(x,y,width,height,"red","black",3,target);
        rect.isHighlighted=true;
        rect.highlight=highlight;
        highlightCount++;

        // if 2 rectangles are highlighted, connect them
        if(highlightCount==2){
            var results="Connect these rectangles: ";
            var children=layer.getChildren();
            for(var i=0;i<children.length;i++){
                if(children[i].isHighlighted){
                    results+="["+i+"]";
                }
            }
            alert(results);
        }
    }
}

这是代码和小提琴：http: //jsfiddle.net/m1erickson/MBPkn/

<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    // create a target layer where highlights are drawn
    var target = new Kinetic.Layer({name:"target"});
    stage.add(target);
    // create the regular layer
    var layer = new Kinetic.Layer({name:"layer"});
    stage.add(layer);

    // create 4 rectangles
    var rect1=kRect(50,50,40,40,"lightgray","skyblue",6,layer);
    var rect2=kRect(125,125,40,40,"lightgray","skyblue",6,layer);
    var rect3=kRect(200,50,40,40,"lightgray","skyblue",6,layer);
    var rect5=kRect(275,125,40,40,"lightgray","skyblue",6,layer);

    // create a counter of highlighted rectangles
    var highlightCount=0;

    // when any rectangle is clicked, toggle its highlight on/off
    function highlight(rect){
        if(rect.highlighted){
            rect.isHighlighted=false;
            rect.highlight.remove();
            highlightCount--;
        }else{
            var x=rect.getX()-8;
            var y=rect.getY()-8;
            var width=rect.getWidth()+16;
            var height=rect.getHeight()+16;
            var highlight=kRect(x,y,width,height,"red","black",3,target);
            rect.isHighlighted=true;
            rect.highlight=highlight;
            highlightCount++;
            if(highlightCount==2){
                var results="Connect these rectangles: ";
                var children=layer.getChildren();
                for(var i=0;i<children.length;i++){
                    if(children[i].isHighlighted){
                        results+="["+i+"]";
                    }
                }
                alert(results);
            }
        }
    }


    // build the specified KineticJS Rectangle and add it to the stage
    function kRect(x,y,width,height,fill,stroke,strokewidth,layer){
      var rect = new Kinetic.Rect({
        x: x,
        y: y,
        width: width,
        height: height,
        fill: fill,
        stroke: stroke,
        strokeWidth: strokewidth
      });
      // if this is not a highlight, make it highlight-able
      if(layer.getName()!="target"){
          rect.isHighlighted=false;
          rect.highlight=null;
          rect.on("click",function(){
              highlight(this);
              target.draw();
          });
      }
      layer.add(rect);
      stage.draw();
      return(rect);
    }

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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-05-14T05:43:30.247 回答