두 가지 모양에 대한 라인 (시작/끝) 커넥터의 x, y를 정의하십시오. KineticJS/HTML5

Question

크기가 조정 가능한 부모 모양과 크기 조절이 가능한 자식 모양을 연결선으로 만들어야하는 작은 프로젝트에서 일하고 있습니다. 나는 KinecticJS에서 그랬다. 그러나 모양을 조정할 때 x1, x2 (시작 커넥터) 및 x2, y2 (끝 커넥터)를 계산할 때 문제가 있습니다.

이 계산은 함수 addConnection에 : 나는

http://jsfiddle.net/geremora/nxDNH/ 내 작업 코드를 삽입

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; 

내 자바 스크립트 코드 :

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 위치는 변하지 않습니다. 그래서 솔루션 - 커넥터의 위치를 ​​계산하는 경우 RECT 위치를 추가

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/