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

令人惊讶的是，即使在最基本的例子中，我也无法让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
});

但是仍然它没有像拖动舞台作品那样工作！非常奇怪，考虑到文档说图层具有属性draggable http://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);

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

Answer 2

我认为的主要问题来自于您将图层包含在图层中。拖拉得搞乱了。 this post是该错误的可能解释。此外，您将整个阶段设置为listening:false。如果您只是从舞台中移除listening:false，您会看到可以通过拖动此图层的文本并仅拖动此区域来拖动您的actionLayer。

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

var mapLayer = new Kinetic.Group（）;

var foregroundLayer = new Kinetic.Group（{draggable：true}）;

如果您只想在拖动任何内容时拖动整个图层，只需删除前景图层中的draggable:true。

希望它有所帮助。

KineticJS中可拖动和静态层的组成

2 个答案: