Несогласованный прослушиватель событий Canvas, использующий offsetTop

У меня есть прослушиватель событий для веб-игры HTML5, которая представляет собой викторину, но мне трудно заставить прослушиватель событий получить фактические координаты, которые следует ожидать.

Используя консоль javascript, я обнаружил, что координаты, которые она получает, часто неверны.

EDIT: кажется, я знаю, почему возникает проблема, но не знаю, как ее исправить. Я использую холст с длинной осью Y, и мне нужно прокрутить вниз, чтобы ответить на некоторые вопросы. Когда я прокручиваю, координаты начинают идти не так. Есть ли способ справиться с этим?

Это мой прослушиватель событий. Пожалуйста, помогите мне решить эту проблему.

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
    my=ev.y-canvas.offsetTop;
    if(ev.y == undefined){
        my = ev.pageY - canvas.offsetTop; 
        }

Пример того, как я использую координаты-

if(eventstate == 'texta6get'){
            console.log(my);
            if(my>300 && my<390){GetAnswer(1);console.log("Answer1 clicked:");}
            if(my>400 && my<490){GetAnswer(2);console.log("Answer2 clicked:");}
            if(my>500 && my<590){GetAnswer(3);console.log("Answer3 clicked:");}
            if(my>600 && my<690){GetAnswer(4);console.log("Answer4 clicked:");}
            if(my>700 && my<790){GetAnswer(5);console.log("Answer5 clicked:");}
            if(my>800 && my<890){GetAnswer(6);console.log("Answer6 clicked:");}
            }

javascript addeventlistener offset html5-canvas
person user2177629    schedule 24.03.2013    source источник
comment
У меня были те же проблемы, я установил ширину и высоту холста в js stackoverflow.com/questions/14174412/   -  person Zachrip    schedule 25.03.2013
comment
Привет, Захрип, я попробовал твой совет, установил ширину и высоту в javascript и удалил ссылки на них в CSS. Это устранило проблему с минусовыми числами вверху. Спасибо за вашу помощь. Однако есть еще проблема, которая была раньше. Когда я спускаюсь по холсту, иногда сбрасывает координаты, например, я нажимаю, где я ожидаю координату 300, и она есть, я нажимаю немного ниже, где я ожидаю 326, и получаю 15. Я понятия не имею, что может вызвать это.   -  person user2177629    schedule 25.03.2013

Ответы (1)


arrow_upward
0
arrow_downward

Если вы можете использовать jQuery, приведенный ниже код дает согласованные результаты.

// set up a handler for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});


// get the position of the canvas on the page since it doesn't change
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


// handle mousedown events
function handleMouseDown(e){
    mx=parseInt(e.clientX-offsetX);
    my=parseInt(e.clientY-offsetY);

    // Put your mousedown stuff here
    if(my>300 && my<390){GetAnswer(1);console.log("Answer1 clicked:");}
    if(my>400 && my<490){GetAnswer(2);console.log("Answer2 clicked:");}
    if(my>500 && my<590){GetAnswer(3);console.log("Answer3 clicked:");}
    if(my>600 && my<690){GetAnswer(4);console.log("Answer4 clicked:");}
    if(my>700 && my<790){GetAnswer(5);console.log("Answer5 clicked:");}
    if(my>800 && my<890){GetAnswer(6);console.log("Answer6 clicked:");}
}
person markE    schedule 24.03.2013
comment
У меня работает твой код. Он отвечает намного лучше, чем мой код, так что большое спасибо. К сожалению, это не решило проблему. Однако я думаю, что знаю, что может быть причиной этого. Проблема в том, что я использую холст с длинной осью Y, и мне нужно прокрутить вниз, чтобы ответить на некоторые вопросы. Когда я прокручиваю, координаты начинают идти не так. Можно ли как-то изменить ваше решение для решения этой проблемы? - person user2177629; 25.03.2013
comment
Ясно... тогда вы также захотите учитывать вертикальную прокрутку следующим образом: my=parseInt(e.clientY-offsetY+$(#canvas).scrollTop()); - person markE; 25.03.2013