1

我是 KineticJS 的新手，有一个非常基本的问题。

我正在尝试使用 KineticJS 创建一个图形（父子层次结构）。所以在任何节点我都会有 3 件事：

1）一个圆作为节点本身

2) 附在圆圈上的“+”号小图像。单击此“+”将允许创建子节点。

3) 一条连接该节点与子节点的线。

我尝试将它们中的所有 3 个捆绑在一个“组”中，但问题是当我拖动组时它们中的所有 3 个一起移动 - 这显然是意料之中的 - 但是当我拖动子节点时它会“分离”连接线时出现问题到父节点。

基本上只有连接到子节点的线的一端应该移动，连接到父节点的一端应该固定。

我如何实现这一目标？一个快速的代码片段将帮助我处理过去 2 天我试图解决的这个问题。

非常感谢！

-S

4

1 回答 1

2

您可以通过使用自定义 drawFunc 创建一条线来保持父节点和子节点的连接。

该行的自定义 drawFunc 只是获取父子位置并在它们之间绘制自身。

drawFunc: function(canvas){
    var ctx=canvas.getContext();
    var x1=parentNode.getPosition().x;
    var y1=parentNode.getPosition().y;
    var x2=childNode.getPosition().x;
    var y2=childNode.getPosition().y;
    ctx.save();
    ctx.strokeStyle="red";
    ctx.lineWidth=3;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.restore();
},

您可能还希望将线绘制在节点后面而不是顶部。

您可以通过设置 stage.getDragLayer.afterDraw 函数将连接线移动到 z-index 的底部来做到这一点

stage.getDragLayer().afterDraw(function() {
    connector.moveToBottom();
    layer.draw();
});

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

<!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(){


    function init(){

        var stage = new Kinetic.Stage({
            container: 'container',
            width: 400,
            height: 400
        });
        var layer = new Kinetic.Layer();
        stage.add(layer);

        var parentNode = new Kinetic.Circle({
          x: 50,
          y: 80,
          radius: 40,
          fill: "blue",
          stroke: "red",
          strokeWidth: 3,
          draggable: true
        });    

        var childNode = new Kinetic.Circle({
          x: 150,
          y: 80,
          radius:25,
          fill: "green",
          stroke: "red",
          strokeWidth: 3,
          draggable: true
        });    

        var connector = new Kinetic.Line({
            drawFunc: function(canvas){
                var ctx=canvas.getContext();
                var x1=parentNode.getPosition().x;
                var y1=parentNode.getPosition().y;
                var x2=childNode.getPosition().x;
                var y2=childNode.getPosition().y;
                ctx.save();
                ctx.strokeStyle="red";
                ctx.lineWidth=3;
                ctx.beginPath();
                ctx.moveTo(x1,y1);
                ctx.lineTo(x2,y2);
                ctx.stroke();
                ctx.restore();
            },
            points: [1,1,1,3],
            stroke: "red",
            strokeWidth: 2,
            lineCap: 'round',
            lineJoin: 'round',
            opacity: 1,
            draggable:false
        });
        layer.add(connector);
        layer.add(parentNode);
        layer.add(childNode);

        // keep connector on rect1+rect2
        stage.getDragLayer().afterDraw(function() {
            connector.moveToBottom();
            layer.draw();
        });

        layer.draw();
    }

init();

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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-04-20T23:10:00.563 回答