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）。希望这会有所帮助。

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

1 个答案: