javascript - Canvas 上的鼠标悬停事件

Question

我想知道是否可以在 Canvas 上有多个方 block 的鼠标悬停事件

这是我现在的代码:http://jsfiddle.net/2j3u9f7m/

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var Enemy = function (x, y, velx, vely) {
    this.x = x;
    this.y = y;
    this.velx = 0;
    this.vely = 0;
}

Enemy.prototype.update = function () {
    var tx = 650 - this.x;
    var ty = 250 - this.y;
    var dist = Math.sqrt(tx * tx + ty * ty);
    this.velx = (tx / dist);
    this.vely = (ty / dist);

    if (dist > 0) {
        this.x += this.velx;
        this.y += this.vely;
    }
};

Enemy.prototype.render = function () {
    context.fillStyle = '#000000';
    context.beginPath();
    context.rect(this.x, this.y, 25, 25);
    context.fill();
    context.closePath();
};

var enemies = [];
for (var i = 0; i < 10; i++) {
    // random numbers from 0 (inclusive) to 100 (exclusive) for example:
    var randomX = Math.random() * 896; 
    var randomY = Math.random() * 1303;
    console.log(randomX);
    console.log(randomY);
    if (randomX > 100 && randomX < 1200) {
        if (randomX % 2 == 0) {
            randomX = 140;
        } else {
            randomX = 1281;
        }
    }
    if (randomY > 100 && randomY < 75) {
        if (randomY % 2 == 0) {
            randomY = 15;
        } else {
            randomY = 560;
        }
    }
    var enemy = new Enemy(randomX, randomY, 0, 0);
    enemies.push(enemy);
}
for (var i = 0; i < 15; i++) {
    // random numbers from 0 (inclusive) to 100 (exclusive) for example:
    var randomX = Math.random() * 200; 
    var randomY = Math.random() * 403;
    console.log(randomX);
    console.log(randomY);
    if (randomX > 100 && randomX < 1200) {
        if (randomX % 2 == 0) {
            randomX = 140;
        } else {
            randomX = 1281;
        }
    }
    if (randomY > 100 && randomY < 75) {
        if (randomY % 2 == 0) {
            randomY = 15;
        } else {
            randomY = 560;
        }
    }
    var enemy = new Enemy(randomX, randomY, 0, 0);
    enemies.push(enemy);
}

function render() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < enemies.length; i++) {
        var one = enemies[i];
        one.update();
        one.render();
    }
    requestAnimationFrame(render);
}
render();

我想要做的是为每个方 block 都有一个鼠标悬停事件；有没有办法在不使用库的情况下做到这一点？

Answer 1

您可以扩展您的 Enemy 对象来执行区域检查，如下所示:

Enemy.prototype.isOnEnemy = function(x, y) {
    return (x >= this.x && x < this.x + 25 &&  // 25 = width
            y >= this.y && y < this.y + 25);   // 25 = height
};

如果提供的 (x,y) 位置位于矩形内部(此处假设宽度和高度为 25)，它将返回 true。

然后向 Canvas 添加一个 mousemove 事件监听器。在里面调整鼠标位置，然后将鼠标位置反馈给每个敌方物体来检查:

context.canvas.onmousemove = function(e) {
    var rect = this.getBoundingClientRect(), // correct mouse position
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0;

    for(; i < enemies.length; i++) {         // check each enemy
        if (enemies[i].isOnEnemy(x, y)) {    // is inside?
            console.log("AAAARG...", i);     // some action...
        }
    }
};

<强> Modified fiddle (请参阅控制台以了解点击情况)。