Question

我非常业余，所以请事先原谅我。使用画布我有一个图像，你可以放大，然后开始绘制。 1.加载图像 2.从网格中选择方形 3.放大并切换缩放并选择方块 4.开始画画在绘图功能中，有一个从互联网上的其他地方借来的拖动设备，它在鼠标上进行鼠洞和下行。由于某些原因，这不起作用，我的路径是连续的。你能帮我吗？我想知道它是否与我的事件监听器有关，它只能用于窗口对象而不是画布。这是代码：

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

var dragging = false;
var radius = 10;

var engage = function (){
dragging = true;
putPoint(e);
}

var disengage = function(){
dragging = false;
}

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


function putPoint(e){
if (dragging){
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}
}

function zoom (e) {
var scale = 6;
xPos = Math.floor(e.clientX/200)*200;
yPos = Math.floor(e.clientY/100)*100;
window.removeEventListener("mousemove", square);
context.drawImage(pic, -xPos*scale, -yPos*scale,1200*scale,600*scale);
window.removeEventListener("mousedown", zoom);
window.addEventListener("mousedown", engage);
window.addEventListener("mouseup", disengage);
window.addEventListener("mousemove", putPoint);
}


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

非常感谢！尼克

Answer 1

对我来说很好。刚删除了一行，并修复了putPoint

中的engage

function putPoint(e){
if (dragging){
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}
}

DEMO

<强>更新

线路起始位置出现问题。

function putPoint(e){
if (dragging){
context.moveTo(newX, newY); 
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();  
newX = e.clientX;
newY =  e.clientY;
}
}

DEMO

为什么我的功能不起作用？

1 个答案: