多画布绘图问题

Question

我正在构建绘画工具application.I使用两个画布。一个用于加载背景图像，另一个用于绘画。画布放在另一个上面。我使用了两个画布，因为我不希望橡皮擦工具在图像上生效。在我的代码中，应用程序绘制的位置并不总是准确的。在大多数情况下，该线比实际绘制的路径更高。

var baseCanvas,baseContext,canvasObj,context; 
var lastX,lastY,mouseX,mouseY; 
var isMouseDown = false; 
var mode = "pen"; 

$(window).load(function() 
{ 
    baseCanvas = document.getElementById("imageCanvas");  
    baseContext = baseCanvas.getContext("2d"); 
    baseContext.strokeStyle = 'Black'; 
    baseContext.fillStyle = "skyBlue"; 
    baseContext.lineWidth = 5; 
    baseContext.fillRect(0, 0, baseCanvas.width, baseCanvas.height); 

    canvasObj = document.getElementById("drawingCanvas"); 
    context = canvasObj.getContext("2d"); 
    context.strokeStyle = 'Black'; 
    context.lineCap = "round"; 
    context.lineJoin = "round"; 
    context.lineWidth = 2;   

function handleMouseDown(e) { 
    mouseX = parseInt(e.clientX - $('#drawingCanvas').offset().left); 
    mouseY = parseInt(e.clientY - $('#drawingCanvas').offset().top); 
    lastX = mouseX; 
    lastY = mouseY; 
    isMouseDown = true; 
} 

function handleMouseUp(e) { 
    mouseX = parseInt(e.clientX - $('#drawingCanvas').offset().left); 
    mouseY = parseInt(e.clientY - $('#drawingCanvas').offset().top); 
    isMouseDown = false; 
} 

function handleMouseOut(e) { 
    mouseX = parseInt(e.clientX - $('#drawingCanvas').offset().left); 
    mouseY = parseInt(e.clientY - $('#drawingCanvas').offset().top); 
    isMouseDown = false; 
} 

function handleMouseMove(e) { 
    mouseX = parseInt(e.clientX - $('#drawingCanvas').offset().left); 
    mouseY = parseInt(e.clientY - $('#drawingCanvas').offset().top); 
    if (isMouseDown) { 
     context.beginPath(); 
     if (mode == 'pen') { 
      context.globalCompositeOperation = "source-over"; 
      context.moveTo(lastX, lastY); 
      context.lineTo(mouseX, mouseY); 
      context.stroke(); 
     } else { 
      context.globalCompositeOperation = "destination-out"; 
      context.arc(lastX, lastY, 5, 0, Math.PI * 2, false); 
      context.fill(); 
     } 
     lastX = mouseX; 
     lastY = mouseY; 
    } 
} 

$(document).on('mousedown',$("#drawingCanvas"),function (e) { 
    handleMouseDown(e); 
}); 
$(document).on('mousemove',$("#drawingCanvas"),function (e) { 
    handleMouseMove(e); 
}); 
$(document).on('mouseup',$("#drawingCanvas"),function (e) { 
    handleMouseUp(e); 
}); 
$(document).on('mouseout',$("#drawingCanvas"),function (e) { 
    handleMouseOut(e); 
}); 
}); 

function setCanvas(imageFile) 
{ 
     var base_image = new Image(); 
     base_image.src = window.URL.createObjectURL(imageFile[0]); 
     baseContext.save(); 
     baseContext.clearRect(0, 0, baseCanvas.width, baseCanvas.height);    
     baseContext.beginPath(); 
     base_image.onload = function() 
     { 
      baseContext.drawImage(base_image,0,0, $('#imageCanvas').width(), $('#imageCanvas').height()); 
      baseContext.restore(); 
     }  
} 

Answer 1

如果滚动浏览器窗口，你需要调整为滚动。

方法如下：

var scrollAdjustment=$("html,body").scrollTop(); 

mouseY+=scrollAdjustment; 

如果你水平滚动，你就需要调整水平滚动了。

顺便说一下，由于画布偏移不会改变，因此您可以预先计算一次画布偏移量，而不是每次在事件处理程序中计算它。

在你设置了顶部：

var canvasOffset=$("#drawingCanvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

而在你的事件处理程序：

var scrollAdjustment=$("html,body").scrollTop(); 
    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY+scrollAdjustment); 

Answer 2

只要你使用的是clientX，你的鼠标事件的clientY属性，而且你大呼过瘾事件在窗口上，您应该在画布上获取BoundingClientRect以了解其顶部和左侧位置，然后减去它们。

https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

的Rq：您可能也想钩住在画布上的事件。