Я пытаюсь изменить drawImage при наведении мыши и выходе из нее.

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

var play = {
    x: 650,
    y: 360,
    width: 200,
    height: 100
}
var playUpButton = new Image();
playUpButton.src = "images/PlayUp.png";
var playDownButton = new Image();
playDownButton.src = "images/PlayDown.png";
var playHovering = false;

thisCanvas.addEventListener('click', checkPlay);
thisCanvas.addEventListener('mouseover', hoverPlay, false);
thisCanvas.addEventListener('mouseout', hoverPlay, false);

function seen_move(e)
{
    var bounding_box = thisCanvas.getBoundingClientRect();
    mouseX = ((e.clientX-bounding_box.left) *(thisCanvas.width/bounding_box.width));
    mouseY = ((e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height));
}

function draw_start()
{
    context.drawImage(menubg, menubg.x, menubg.y, menubg.width, menubg.height);
    if(playHovering)
    {
        context.drawImage(playDownButton, play.x, play.y, play.width, play.height);
    }
}


function mouseInArea(top, right, bottom, left)
{
    if(mouseX >= left && mouseX < right && mouseY >= top && mouseY < bottom)
    {
        return true;
    }
    else
    {
        return false;
    }
}   

function hoverPlay()
{
    if(mouseInArea(play.y, play.x + play.width, play.y + play.height, play.x))
    {
        console.log("Hovering");
        if(playHovering)
        {
            playHovering = false;
        }
        else
        {
            playHovering = true;
        }
    }
}

javascript canvas mouseover mouse mouseout
person Max Atkins    schedule 27.04.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Похоже, что в вашем коде отсутствует следующее.

var thisCanvas = document.getElementById("thisCanvas");

Функция checkPlay также отсутствует.

Ознакомьтесь с этими статьями: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ http://www.informit.com/articles/article.aspx?p=1903884&seqNum=6

person ybot    schedule 27.04.2015
comment
Я не добавлял весь код. Извините за путаницу, обе эти вещи там. - person Max Atkins; 27.04.2015
comment
Добавьте несколько операторов console.log в функцию hoverPlay. Трудно сказать без всего кода, но вполне возможно, что функция visible_move() никогда не вызывается. - person ybot; 27.04.2015

arrow_upward
0
arrow_downward

Вы должны вызвать function seen_move(e), чтобы получить положение мыши.

Кстати, я не понимаю, что такое дополнительный код в seen_move. Я предполагаю, что вы делаете положение мыши относительно ограничивающей рамки. Я просто упоминаю об этом на случай, если это тоже проблема:

// this usually get the mouse position
var bounding_box = thisCanvas.getBoundingClientRect();
mouseX = e.clientX-bounding_box.left;
mouseY = e.clientY-bounding_box.top;

// and you have this extra bit:
// *(thisCanvas.width/bounding_box.width)); and 
// * (thisCanvas.height/bounding_box.height));
mouseX = ((e.clientX-bounding_box.left) *(thisCanvas.width/bounding_box.width));
mouseY = ((e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height));
person markE    schedule 27.04.2015