Question

我正在尝试构建一个画布绘制应用程序，该应用程序将放大线条图（在mousedown上），然后在放大的方块上绘制（也使用mousedown）

我认为我的代码结构存在问题 - 不确定如何排列函数以便第一部分 - 选择正方形和缩放 - 后面跟第二部分 - 绘图应用程序。我试图在缩放应用程序中粘贴整个内容，因此调用缩放功能然后停止事件监听器并启动绘图应用程序，但这并没有奏效。

我希望这很清楚 - 谁能看到我出错的地方？谢谢尼克

以下是代码：

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);

Answer 1

Bubbling事件模型，所有Web浏览器都非常简单：

浏览器提供了很多事件。你可以把它们搞定。另外，您可以列出其他控件或您的代码提供的其他事件。

其他代码关系绑定由代码模式提供，在您的情况下是OOP。

所以，在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次！所以它打了两次电话。

因此，根据您的代码，您应该添加

removeEventListener

在您想要覆盖侦听器之前，请示例：

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

祝你好运！：）

事件后构建事件？

1 个答案: