javascript - KineticJS在鼠标位置下获取形状对象

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

该事件实际上是触发的，但它在图层上，而不是圆圈上。因此，我开始认为是否可以使用鼠标位置获取形状并直接在其上触发click事件？

最佳答案

为什么不通过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/

更新：

我误会了你的问题，所以我深表歉意。

您想在按某个键时访问targetNode（keydown事件）。这是我的处理方式：

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

    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事件！）

关于javascript - KineticJS在鼠标位置下获取形状对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18472567/