1

我正在尝试使用 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);
4

2 回答 2

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. 然后我会添加一个矩形作为背景到主组，其宽度和高度与图层相同，这为组提供了高度和宽度，以便您可以拖动整个图层。然后，您可以将属于动作层的所有其他元素添加到该组。像这样的东西：

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);

该组将是可拖动的，并将所有需要拖动的对象都放在其中。

于 2013-07-02T15:13:30.313 回答
1

在我看来，主要问题在于您将层层包含在内。可拖动的变得一团糟。这篇文章是对该错误的可能解释。再加上您将整个舞台设置为listening:false. 如果您只是listening:false从舞台上移除 ，您会看到您可以通过拖动此图层的文本并且仅拖动此区域来拖动您的 actionLayer。

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

var mapLayer = new Kinetic.Group();

var foregroundLayer = new Kinetic.Group({draggable:true});

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

希望能帮助到你。

于 2013-07-03T02:33:20.977 回答