드래그 가능한 노드를 다른 레이어로 이동

드래그 가능한 그룹을 한 레이어에서 다른 레이어로 톱질하는 데 문제가 있습니다. 그룹을 "shape.moveTo (rightLayer)"로 바꾸면 이동이 중지되지만 여전히 드래그 가능합니다.드래그 가능한 노드를 다른 레이어로 이동

이 작은 예제로 확인할 수 있습니다. 녹색 상자를 빨간색 상자에서 파란색 상자로 이동합니다.

이 노드를 드래그 할 수있는 동안 노드를 다른 레이어로 이동하는 데 문제가 있습니까?

들으 많은 .. 단순히 들고 뛰기 REINIT 수정 프로그램

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

var stage; 
var leftLayer; 
var rightLayer; 
function doOnLoad(){ 

    stage = new Kinetic.Stage({ 
     container: "canvas", 
     x:0, 
     y:0, 
     width: 800, 
     height: 600, 
    }); 

    // left layer & background 
    leftLayer = new Kinetic.Layer(
     { 
      id: 'leftLayer', x: 10, y: 10, width: 290, height: 300 
     } 
    ); 
    var leftBackground = new Kinetic.Rect({ 
     x: 0, y: 0, width: leftLayer.width(), height: leftLayer.height(), fill: '#FBB' 
    }); 


    // scaled, right layer & background 
    rightLayer = new Kinetic.Layer(
     { 
      id: 'rightLayer', x: 300, y: 10, width: 590, height: 600 
     } 
    ); 
    var rightBackground = new Kinetic.Rect({ 
     x: 0, y: 0, width: rightLayer.width(), height: rightLayer.height(), fill: '#BBF' 
    }); 
    rightLayer.scaleX(0.5); 
    rightLayer.scaleY(0.5); 

    // move group 
    var moveGroup = new Kinetic.Group({ 
     x: 50, y: 50, id: 'MainGroup', width: 80, height: 80, draggable: true, 
     dragBoundFunc: function(pos) { 
      return dragMainGroup(pos, this); 
     } 
    }); 
    var moveBox = new Kinetic.Rect({ 
     x: 0, y: 0, width: 80, height: 80, fill: '#0F0', stroke: 'black', strokeWidth: 2 
    });  
    moveGroup.add(moveBox); 

    leftLayer.add(leftBackground); 
    leftLayer.add(moveGroup); 

    rightLayer.add(rightBackground); 

    stage.add(rightLayer); 
    stage.add(leftLayer); 
} 

// separted function, will later be complex 
function dragMainGroup(posOnStage, shape){ 
    var x = posOnStage.x; 
    var y = posOnStage.y; 
    if(stage.getPointerPosition().x > 300){ 
     if(shape.parent != rightLayer){ 
      shape.moveTo(rightLayer); 
      stage.draw(); 
     } 
    }else{ 
     if(shape.parent != leftLayer){ 
      shape.moveTo(leftLayer); 
      stage.draw(); 
     } 
    } 
    return {x:x, y:y}; 
} 

</script> 

</head> 


<body bgcolor="#ffffff" onload="doOnLoad()"> 
    <div id="canvas"></div> 
</body> 
</html>

출처

2014-01-21 user3205873

if(stage.getPointerPosition().x > 300){ 
    if(shape.parent != rightLayer){ 
     shape.moveTo(rightLayer); 
     shape.startDrag(); 
     stage.draw(); 
    } 
}else{ 
    if(shape.parent != leftLayer){ 
     shape.moveTo(leftLayer); 
     shape.startDrag(); 
     stage.draw(); 
    } 
}

http://jsfiddle.net/lavrton/272ka/

참고 :

개체의 위치가 정말 어렵습니다. 그룹이 상위를 기준으로 위치 지정됩니다. 그리고 레이어의 x, y, 너비, 높이를 설정합니다. 나는 이것이 나쁜 생각이라고 생각한다. 물체가 움직여야한다는 것을 이해하는 것이 더 어렵습니다. (그룹에 x = 10, 레이어 x = 10, 화면 그룹에 x = 20에 위치 할 것입니다. 스케일을 설정하는 경우 그룹이 있어야한다는 것을 이해하기가 더 어렵습니다). 이 문제를 피하십시오.

출처

2014-01-21 16:09:32 lavrton

의견을 보내 주신 Thx, 저의 새로운 프로젝트에 도움이되지 못했습니다. "구성 평면"으로 드래그 할 수있는 셰이프가 많습니다. 여기에서는 레이어를 사용할 수 있지만이 평면/레이어는 사용자가 팬으로 조정할 수 있습니다. 나는 "선택 레이어"와 마지막 "구성 레이어"사이의 전환 만이 확대되거나 팬 될 때 레이어가 모든 것을 클리핑하도록 기능을 만들었습니다. 해결책을 찾으면 해결책을 게시합니다. – user3205873

작동하지 않는 기능은 무엇입니까? 바이올린 작동합니까? – lavrton

드래그 가능한 노드를 다른 레이어로 이동

답변

관련 문제