1

我一直在使用 Kinetic 开发一个应用程序，它使用多个层来保持事物的组织性，并且我在多个层中有可拖动的元素。我发现当一个图层被拖动时，另一图层上的形状不再可拖动。

在提供的缩减示例中，一旦下层被拖动，上层中的蓝色矩形就不再可拖动，我不明白这是为什么。

我试过浏览文档和各种教程，在 Stackoverflow 上询问是我最后的手段，所以我希望有人能提供帮助！

顺便说一下，我尝试在可拖动层上将 dragOnTop 设置为 false，这不会改变结果。

谢谢，奥斯卡

http://jsfiddle.net/EveryoneMustWin/QRaxJ/

var kItems = {};

kItems.stage = new Kinetic.Stage({
    container: 'container',
    width: $("#container").width(),
    height: $("#container").height()
});

kItems.lowerLayer = new Kinetic.Layer({
    scale: 1.0,
    id: "lower",
    draggable: true,
    dragBoundFunc: function(pos) {
        return {
            x: pos.x,
            y: pos.y
        }
    }
});

kItems.upperLayer = new Kinetic.Layer({
    scale: 1.0,
    id: "upper"
});

kItems.stage.add(kItems.lowerLayer);
kItems.stage.add(kItems.upperLayer);

kItems.backdrop = new Kinetic.Rect({
    x: 50, 
    y: 50, 
    width: 200, 
    height: 200,
    stroke: '#822',
    strokeWidth: 2,
    fill: '#b62',
    opacity: 1,
    id: 'backdrop'
});

kItems.lowerLayer.add(kItems.backdrop);

kItems.block1 = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 20,
    height: 20,
    stroke: '#228',
    strokeWidth: 2,
    fill: '#65b',
    opacity: 1,
    id: 'block1',
    draggable: true
});

kItems.upperLayer.add(kItems.block1);

kItems.block2 = new Kinetic.Rect({
    x: 180,
    y: 100,
    width: 20,
    height: 20,
    stroke: '#228',
    strokeWidth: 2,
    fill: '#65b',
    opacity: 1,
    id: 'block2',
    draggable: true
});

kItems.upperLayer.add(kItems.block2);

kItems.lowerLayer.draw();
kItems.upperLayer.draw();

kItems.lowerLayer.on("dragmove", function() {
    kItems.upperLayer.setAttrs({x:this.getX(), y:this.getY()});
    kItems.upperLayer.draw();
});
4

1 回答 1

1

在此修复之前，我的解决方法是在我的 dragEnd 处理程序上调用 layer.drawHit() 来处理变得无响应的图层（请参阅我上面的评论）。这使我可以继续使用最新版本（有许多不错的改进，我不想因为使用 4.3.3 而失去）。希望这可以帮助。

于 2013-04-24T12:19:49.367 回答