Question

我正在尝试用KineticJS写一个小游戏。光标是一个枪瞄准器，我想使用一些键盘键作为触发器来为不同的效果发射不同的“子弹”，但我没有找到使用JS事件的方法。

stage = new Kinetic.Stage
  container: 'container'
  width: window.innerWidth
  height: window.innerHeight

shape_layer = new Kinetic.Layer()

circle = new Kinetic.Circle
  x: stage.getWidth() / 2
  y: stage.getHeight() / 2
  radius: 100
  fill: 'red'
  stroke: 'white'
  strokeWidth: 20

circle.on 'click', (e) ->
  console.log 'You get one point!'

shape_layer.add circle
stage.add shape_layer

$(document).on 'keydown', (e) ->
  if e.keyCode == 90
    mouse_p = stage.getMousePosition()
    x = mouse_p.x
    y = mouse_p.y
    evt = document.createEvent 'MouseEvents'
    evt.initMouseEvent 'mouseup'
    , true
    , true
    , window
    , null
    , 0
    , 0
    , x
    , y
    shape_layer.fire 'click', evt, true

事件实际上已被触发，但它位于图层上，而不是圆圈上。所以我开始认为是否可以使用鼠标位置获取形状并直接在其上触发点击事件？

Answer 1

为什么不通过KineticJS处理鼠标事件？

layer.on('click', function(evt) {
  // get the shape that was clicked on
  var shape = evt.targetNode;
  alert('you clicked on \"' + shape.getName() + '\"');
});

活动代表团：http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/

活动：http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

<强>更新

我误解了你的问题所以我很抱歉。

按键（keydown事件）时，您希望访问targetNode。我就是这样做的：

首先，您需要使用舞台的宽度和高度设置透明矩形背景，以便图层可以检测鼠标事件（在这种情况下，我们需要mousemove）。< / p>

    var bg = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: stage.getWidth(),
        height: stage.getHeight(),
        id: 'bg'
    });

然后，只要鼠标在舞台内移动但不在目标上，我就会设置一个空Kinetic.Shape。因此，除非鼠标位于透明背景以外的节点上，否则target始终等于empty。 scoreText只是在舞台上打印你的分数。

    var empty = new Kinetic.Shape({
        id: 'empty'
    });
    var target = empty;
    var score = 0;

    var scoreText = new Kinetic.Text({
        text: 'Score: '+score,
        x: 10,
        y: 10,
        fill: '#000',
        fontSize: 20,
        id: 'score'
    });

在KineticJS中使用mousemove事件：

    layer.on('mousemove', function (e) {
        var mousePos = stage.getMousePosition();
        var x = mousePos.x;
        var y = mousePos.y;
        var node = e.targetNode;
        var nodeID = node.getId();
        if (nodeID !== 'bg') {
            target = node;
        } else {
            target = empty;
        }
    });

然后使用jQuery keydown事件：

    $(document).keydown(function(e) {
        if (e.keyCode == 90) {
            var id = target.getId();
            if (id == 'empty' || id == 'score') {
                alert('MISS');
            } else {
                var targetID = target.getId();
                var targetName = target.getName();
                alert('ID: ' + targetID + ' NAME: ' + targetName + ' You get one point!');
                target.destroy();
                target = empty;
                score++;
                updateScore(scoreText, score);
                randomCircle();
            }
        }
    });

最后，为了制作游戏...... randomCircle()和updateScore()函数：

    function updateScore(text, score) {
        text.setText('Score: ' + score);
        //layer.draw(); //normally we would have to layer.draw() here, but I called it in randomCircle() instead to save the amount of draw() calls necessary
    }

    function randomCircle() {
        var circle = new Kinetic.Circle({
            x: Math.floor((Math.random() * 578)),
            y: Math.floor((Math.random() * 200)),
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            id: 'someTarget',
            name: 'targets'
        });
        layer.add(circle);
        layer.draw();
    }

jsfiddle（不要忘记点击javascript窗格以便能够使用keydown事件！）

KineticJS在鼠标位置下获得形状对象

1 个答案: