javascript - Kinetic JS 拖动图层会导致另一图层上的形状停止响应拖动

Question

我一直在使用 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();
});

Answer 1

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