將一個可拖動的節點移動到另一個圖層

我將一個可拖動的組從一個圖層切換到另一個圖層存在問題。當組與「shape.moveTo（rightLayer）」交換時，它停止移動，儘管它仍然可拖動。將一個可拖動的節點移動到另一個圖層

你可以用這個小例子來檢查它，將綠框從紅框移到藍框。

當這個節點可拖動或者讓我有些誤會時，將節點移動到其他層是否存在問題？

THX很多..

<!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

對於簡單弄不好只是重新初始化draging：

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

將一個可拖動的節點移動到另一個圖層

回答

相關問題