Структурирование событий после событий?

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

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

Я надеюсь, что это ясно - может ли кто-нибудь увидеть, где я ошибаюсь? Спасибо Ник

Вот код:

function doFirst() {
var x=document.getElementById('canvas');
canvas=x.getContext('2d');
pic = new Image ();
pic.src = "kingtut.jpg";
pic.addEventListener ("load", function()
{canvas.drawImage(pic, 0, 0,1200, 600);},false);
var radius = 10;
dragging = false;
}

function square (e) {
var xPos = Math.floor(e.clientX/200)*200;
var yPos = Math.floor(e.clientY/100)*100;
canvas.drawImage(pic, 0, 0,1200, 600);
canvas.strokeRect (xPos, yPos, 200, 100);
}


function zoom (e) {
var scale = 6;
var xPos = Math.floor(e.clientX/100)*100;
var yPos = Math.floor(e.clientY/100)*100;
canvas.translate(-xPos*scale, -yPos*scale);
canvas.scale(scale,scale);
document.addEventListener("mousedown", function(e){e.stopPropagation();zoom}, true);

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);
var putPoint=function (e) {
if (dragging){
canvas.beginPath();
canvas.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
canvas.fill();
canvas.beginPath();
canvas.moveTo(e.clientX, e.clientY);
    }
}
}
var engage = function (e) {
dragging = true;
putPoint(e);
}

var disengage = function (e) {
dragging = false;
canvas.beginPath();
}

window.addEventListener("mousedown", zoom, false);
window.addEventListener("load", doFirst, false);
window.addEventListener("mousemove", square, false);

javascript addeventlistener structure html5-canvas
person user3021347    schedule 11.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Модель всплывающих событий, которой следуют все веб-браузеры, довольно проста:

Существует множество событий, предоставляемых браузером. Вы можете перечислить их. Кроме того, вы можете перечислить другие события, предусмотренные другим элементом управления или вашим кодом.

Другая привязка отношения кода предоставляется вашим шаблоном кода, в вашем случае это ООП.

Итак, в случае JavaScript:

Если вы хотите прослушать событие, вы должны привязать функцию к событию:

window.addEventListener("mousedown", zoom, false);

(Вы привязываете к событию "mousedown" функцию "zoom")

Если вы хотите остановить событие прослушивания, вы должны отвязать функцию от события:

window.removeEventListener ("mousedown", zoom, false);

(Вы отвязываете от события "mousedown" функцию "zoom")

Но!! если вы пишете:

window.addEventListener("mousedown", zoom, false);
window.addEventListener("mousedown", engage, false);

Вы привязываете функцию zoom к событию mousedown 2 раза! Так звонил дважды.

Итак, согласно вашему коду, вы должны добавить

удалитьEventListener

Прежде чем вы захотите переопределить прослушиватель, пример:

window.removeEventListener("mousedown", zoom, false);
window.addEventListener("mousedown", engage, false);

Удачи! :)

person irotaev    schedule 11.07.2014