KineticJS中可拖动和静态图层的组合

Question

我正在尝试使用KineticJS来构建一个简单的策略游戏。我有一个Kinetic.Stage调整大小，以适应整个屏幕。在那个阶段，我打算一般有三个渲染层。最顶级的HUD层显示游戏统计 - 显然不可拖动。下面的一层是“动作层”，其中游戏地图将显示所有动作。在底部是一个静态背景层，显示某种背景 - 在这个例子中不感兴趣。 我打算让我的动作层可拖动以滚动地图。 问题是，它似乎没有这样工作，动作层不能被拖动。我肯定错过了什么。

我有一个小提琴这里再现了问题：

http://jsfiddle.net/shadowfire/2v9xS/22/

而且我发现，这增加的形状的动作层的根允许层的拖动 - 但前提是你拖动那个形状，这似乎不是很好的解决方案。

相应的代码：

var stage = new Kinetic.Stage({ 
    container: 'myCanvas', 
    width: 400, 
    height: 400, 
    draggable: false, 
    listening: true 
}); 

var backgroundLayer = new Kinetic.Layer({draggable: false}); 
var actionLayer = new Kinetic.Layer({draggable: true, listening: true}); 
var mapLayer = new Kinetic.Layer({draggable: true}); 
var foregroundLayer = new Kinetic.Layer({draggable: true, clearBeforeDraw: false}); 
var hudLayer = new Kinetic.Layer({draggable: false}); 

backgroundLayer.add(new Kinetic.Rect(
    { 
     x:0, 
     y:0, 
     width: 400, 
     height: 400, 
     fill: 'grey' 
    } 
)); 

mapLayer.add(new Kinetic.Rect(
    { 
     x:100, 
     y:100, 
     width: 200, 
     height: 200, 
     fill: 'orange', 
     stroke: 'black', 
     draggable: true 
    } 
)); 

foregroundLayer.add(new Kinetic.Circle(
    { 
     x:200, 
     y:200, 
     radius: 30, 
     fill: 'yellow', 
     stroke: 'black', 
     draggable: true 
    } 
)); 

actionLayer.add(mapLayer); 
actionLayer.add(foregroundLayer); 
actionLayer.add(new Kinetic.Text({text:"ActionLayer - draggable works only here", fill:'green', x:100, y:100})); 

hudLayer.add(new Kinetic.Text(
    { 
     fontSize: 30, 
     text: 'STATUS', 
     fill: 'green' 
    } 
)); 

stage.add(backgroundLayer); 
stage.add(actionLayer); 
stage.add(hudLayer); 

Answer 1

我认为的主要问题来自于将图层包含在图层中的事实。可拖拽会搞砸。 this post是该错误的可能解释。此外，您将整个舞台设置为listening:false。如果你只是从舞台上删除listening:false，你会看到你可以拖动你的actionLayer拖动这个图层的文本，只有这个区域。

如果您只希望整个图层可拖动，则解决方法是将mapLayer和foregroundLayer更改为组。 我不确定你想要什么，但在这fiddle我确实设置了可拖动的actionLayer，比如当你在mapLayer上拖动时，实际上拖动actionLayer，当你在前景层上拖动时，只拖动这个组。

var mapLayer = new Kinetic.Group（）;

var foregroundLayer = new Kinetic。组（{拖动：真}）;

如果您只想拖动整个图层，只要在其中拖动任何东西，只需在前台图层中删除draggable:true即可。

希望它有帮助。

Answer 2

令人惊奇地，我无法得到Kinetic.Layer拖动既不，即使在最基本的例子：http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-the-stage-with-kineticjs/我试图切换从阶段可拖动到该层。我甚至想，也许是因为没有高度，宽度，X，Y指定了，所以我说那些在这样的：

var layer = new Kinetic.Layer({ 
    draggable: true, 
    x:0, 
    y:0, 
    width:578, 
    height:200, 
    visible:true, 
    listening: true 
}); 

但仍然它并没有像拖着一个舞台作品的工作！真的很奇怪，考虑文档说一层有属性draggablehttp://kineticjs.com/docs/Kinetic.Layer.html。

无论如何，作为替代方案，我会建议将主Kinetic.Group添加到将保存所有对象的图层，并将该主组设置为draggable: true。然后，我将添加一个矩形，作为主组的背景，与图层具有相同的宽度和高度，这会为组提供高度和宽度，以便您可以拖动整个图层。然后，您可以将属于Action层的所有其他元素添加到该组。类似这样的：

var masterGroup = new Kinetic.Group({ 
    x: actionLayer.getX(), 
    y: actionLayer.getY(), 
    draggable: true, 
    name: "masterGroup" 
}); 

actionLayer.add(masterGroup); 

var actionBG = new Kinetic.Rect({ 
    width: actionLayer.getWidth(), 
    height: actionLayer.getHeight(), 
    draggable: true, 
    name: "actionBG" 
}); 

masterGroup.add(actionBG); 
//masterGroup.add(moreActionLayerObjects); 

该组将是可拖动的，并且保持里面的所有对象也需要可拖动。