多画布绘制问题

19 浏览
0 Comments

多画布绘制问题

我正在构建一款绘画工具应用程序。我使用两个画布。一个用于加载背景图像，另一个用于进行绘画。绘画画布放置在另一个画布上方。我使用了两个画布，因为我不希望橡皮擦工具对图像产生影响。在我的代码中，应用程序绘制的y轴位置并不总是准确的。在大多数情况下，线条比实际绘制路径高。

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

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

\n\n假设您正在使用鼠标事件的 clientX 和clientY 属性，并且已将这些事件挂钩到窗口，您应该使用 getBoundingClientRect 在您的画布上来了解它的顶部和左侧位置，然后减去它们。\n\nRq：您还可以考虑将事件挂钩到画布上。

0
0 Comments

如果您滚动浏览器窗口，您需要进行调整。

具体方法如下：

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

0