定義兩種形狀的線（開始/結束）連接器的x，y KineticJS/HTML5

Question

我正在一個小型項目中工作，我需要使用連接線創建可調整大小的父形狀和可調整大小的子形狀。我在KinecticJS中做過。 但是，當形狀調整大小時，我有一個計算x1，x2（啓動連接器）和x2，y2（結束連接器）的問題。

這種計算是在功能addConnection：

var x1 = parentNode.getX() + rectParent.getWidth()/2; 
var y1 = parentNode.getY() + rectParent.getHeight()/2; 
var x2 = childNode.getX() + rectChild.getWidth()/2; 
var y2 = childNode.getY() + rectChild.getHeight()/2; 

我把我的工作代碼http://jsfiddle.net/geremora/nxDNH/

我的Javascript代碼：

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

var groupRoot = new Kinetic.Group({ 
    x: 100, 
    y: 50, 
    draggable: true, 
}); 

var layer = new Kinetic.Layer(); 

layer.add(groupRoot); 
stage.add(layer); 

newRect(groupRoot); 
var groupChild = new Kinetic.Group({ 
    x: 270, 
    y: 100, 
    draggable: true 
}); 

layer.add(groupChild); 
newRect(groupChild); 
var con = addConnection(groupRoot, groupChild); 
layer.add(con); 
con.moveToBottom(); 
stage.draw(); 


function newRect(group){ 
     var rect = new Kinetic.Rect({ 
      x: 0, 
      y: 0, 
      width: 50, 
      height: 50, 
      fill: 'blue', 
      stroke: 'black', 
      strokeWidth: 1, 
      name:'rect' 
      }); 

      group.add(rect); 
      addAnchor(group, rect.x, rect.y, 'topLeft'); 
      addAnchor(group, rect.getWidth(), rect.y, 'topRight'); 
      addAnchor(group, rect.getWidth(), rect.getHeight(), 'bottomRight'); 
      addAnchor(group, rect.x, rect.getHeight(), 'bottomLeft'); 

      group.on('dragstart', function() { 
      this.moveToTop(); 
      }); 

     stage.draw(); 
} 

function update(activeAnchor) { 
     var group = activeAnchor.getParent(); 

     var topLeft = group.get('.topLeft')[0]; 
     var topRight = group.get('.topRight')[0]; 
     var bottomRight = group.get('.bottomRight')[0]; 
     var bottomLeft = group.get('.bottomLeft')[0]; 
     var rect = group.get('.rect')[0]; 

     var anchorX = activeAnchor.getX(); 
     var anchorY = activeAnchor.getY(); 


     switch (activeAnchor.getName()) { 
      case 'topLeft': 
      topRight.setY(anchorY); 
      bottomLeft.setX(anchorX); 
      break; 
      case 'topRight': 
      topLeft.setY(anchorY); 
      bottomRight.setX(anchorX); 
      break; 
      case 'bottomRight': 
      bottomLeft.setY(anchorY); 
      topRight.setX(anchorX); 
      break; 
      case 'bottomLeft': 
      bottomRight.setY(anchorY); 
      topLeft.setX(anchorX); 
      break; 
     } 

     rect.setPosition(topLeft.getPosition()); 

     var width = topRight.getX() - topLeft.getX(); 
     var height = bottomLeft.getY() - topLeft.getY(); 
     if(width && height) { 
      rect.setSize(width, height); 
     } 
} 

function addAnchor(group, x, y, name) { 
     var stage = group.getStage(); 
     var layer = group.getLayer(); 

     var anchor = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      stroke: '#666', 
      fill: '#ddd', 
      strokeWidth: 1, 
      radius: 5, 
      name: name, 
      draggable: true, 
      dragOnTop: false 
     }); 

     anchor.on('dragmove', function() { 
      update(this); 
      layer.draw(); 
     }); 
     anchor.on('mousedown touchstart', function() { 
      group.setDraggable(false); 
      this.moveToTop(); 
     }); 
     anchor.on('dragend', function() { 
      group.setDraggable(true); 
      layer.draw(); 
     }); 
     anchor.on('mouseover', function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = 'pointer'; 
      this.setStrokeWidth(4); 
      layer.draw(); 
     }); 
     anchor.on('mouseout', function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = 'default'; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 

     group.add(anchor); 
} 
function addConnection(parentNode, childNode){ 

var connector = new Kinetic.Line({ 
       drawFunc: function (canvas) { 

        var rectParent = parentNode.get('.rect')[0]; 
        var rectChild = childNode.get('.rect')[0]; 
        var ctx = canvas.getContext(); 
        var x1 = parentNode.getX() + rectParent.getWidth()/2; 
        var y1 = parentNode.getY() + rectParent.getHeight()/2; 
        var x2 = childNode.getX() + rectChild.getWidth()/2; 
        var y2 = childNode.getY() + rectChild.getHeight()/2; 
        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 
     }); 
    return connector; 
} 

Answer 1

問題：當你移動，例如，topLeft錨點，你正在改變rectange的X位置。但是X組的X位置沒有變化。因此，解決方案 - 添加矩形位置時被計算連接器的位置：

var x1 = parentNode.getX() + rectParent.getX()+ rectParent.getWidth()/2; 
var y1 = parentNode.getY() + rectParent.getY() + rectParent.getHeight()/2; 
var x2 = childNode.getX() + rectChild.getX()+ rectChild.getWidth()/2; 
var y2 = childNode.getY() + rectChild.getY() + rectChild.getHeight()/2; 

http://jsfiddle.net/lavrton/pAQKx/