Question

我遇到了从一层到另一层锯掉一个可拖动的组的问题。当组与“shape.moveTo（rightLayer）”交换时，它会停止移动，尽管它仍然可以拖动。

您可以使用这个小例子进行检查，将绿色框从红色框移动到蓝色框。

在此节点可拖动或使我遇到错误时，是否存在将节点移动到其他层的问题？

很多..

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

Answer 1

只需修复刚刚重新启动：

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处有位置，如果你设置比例，则更难理解组应该是）。试着避免这种情况。

将可拖动节点移动到另一个层

1 个答案: