Question

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

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属性，以及您在窗口上挂钩事件，您应该在画布上获取B.BoundingClientRect以了解其顶部和左侧位置，然后将它们减去。

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

Rq：您可能还想到在画布上挂钩事件。

多画布绘图问题

2 个答案: