Canvas Rect Mouse Hover на графике

Question

Итерация по plotData создает прямоугольник вокруг определенных значений на диаграмме на основе условия.

plotData.forEach( (each, index) => {

    if ( each.a > each.b ) {
       try {
            ctx.beginPath();
            ctx.fillStyle = 'yellow';
            ctx.rect(zone[index].x, zone[index].y, zone[index].width, zone[index].height);
            ctx.closePath();
            ctx.fill();
       }
       ...

Я хочу изменить цвет прямоугольника, когда на него наведет курсор мыши. Диаграмма является прокручиваемой и масштабируемой, поэтому прямоугольные координаты изменяются динамически.

Answer 1

Во-первых, вне этой функции, где-то еще в коде документа, фактически: в самом верху вашего кода определите переменную для отслеживания местоположения мышки, и, если она нажата или нет:

var mouseInfo = {x:0, y:0, clicked: false};

Теперь, где-то еще, сделайте несколько слушателей событий, которые будут отслеживать это местоположение (через некоторое время после создания элемента canvas), я предполагаю, что элемент canvas хранится в переменной с именем canvas:

canvas.addEventListener("mousemove", e=> {
    mouseInfo.x = e.offsetX;
    mouseInfo.y = e.offsetY;
});

далее, еще 2, чтобы отслеживать, нажата ли мышь или нет (не обязательно должен быть на элементе canvas, на самом деле, лучше, чем на элементе window):

window.addEventListener("mousedown", e=> {
     mouseInfo.clicked = true;
});

window.addEventListener("mouseup", e=> {
     mouseInfo.clicked = false;
});

Теперь создайте функцию, чтобы определить, пересекает ли точка прямоугольник, предполагая, что прямоугольник является объектом с x, y, width, height:

function isPointInRet(point, rect) {
    return (
        point.x > rect.x &&
        point.x < rect.x + rect.width && 
        point.y > rect.y && 
        point.y < rect.y + rect.height
    );
}

Теперь вернемся к вашей функции, которая Вы цитировали выше:

plotData.forEach( (each, index) => {

    if ( each.a > each.b ) {
       try {
            ctx.beginPath();
            ctx.fillStyle = 'yellow';
            ctx.rect(zone[index].x, zone[index].y, zone[index].width, zone[index].height);
            ctx.closePath();
            ctx.fill();
       }

Итак, прямо перед частью fillStyle измените все на следующее:

var x = zone[index].x,
    y = zone[index].y,
    width = zone[index].width,
    height = zone[index].height;
if(isPointInRect(mouseInfo, {x, y, width, height}) {
     //perhaps if you want to make a hover color, do that here, just un-comment if you want:
     /*ctx.fillStyle = "#ffaaee";*/
     if(mouseInfo.clicked) {
         ctx.fillStyle = "ff0000"; //red
     }
}
ctx.fillStyle = 'yellow';
ctx.rect(x, y, width, height);
...

(предупреждение: непроверенный код);

дайте мне знать, если это поможет, и если это работает с масштабированием et c.