如何解决 HTML5 全屏模式下画布上鼠标指针的偏移问题？答案

【问题标题】：How to fix offset issue for mouse pointer on canvas on HTML5 fullscreen mode?如何解决 HTML5 全屏模式下画布上鼠标指针的偏移问题？
【发布时间】：2013-04-15 09:50:48
【问题描述】：

我正在使用 HTML5 full_screen API 将 this letter 扩展到浏览器的全屏模式。

关注 https://bubbleideas.com/letters/html5-full_screen-api 以获取演示和重现步骤。

浏览器返回鼠标指针位置的 (x,y) 值的方式似乎存在问题/错误。在全屏模式下，当您向下滚动时，鼠标指针和涂鸦路径之间会产生偏移。

以下是重现问题的步骤。（转到上面的演示链接）

点击页面右上角的按钮。
点击右下角的“手绘”绘图工具。它将打开一个文具面板（选择钢笔或铅笔工具）
在绘图区域涂鸦几次
现在向下滚动一点并尝试用同一支笔涂鸦。您会注意到鼠标指针位置和潦草路径之间存在间隙/偏移（这是问题所在）。理想情况下，全屏模式也应该没有间隙

以前有人来过这里吗？另请注意，这对于正方形、圆形和三角形等其他形状非常适用，没有任何偏移。

更新：（正如“Iftah”在下面的评论中所问的那样）根据织物 js，我使用 calcOffset() 重新计算每次鼠标按下时的偏移量。就其他功能而言，我们会做类似的事情。希望这能提供一些想法

$("#rectangle-function").click(function (evt1) {
doCanvasUp();
initObjectDrawing();
//canvas.isDrawingMode = true;
canvas1 = document.createElement("canvas");
canvas1.height = canvas.height;
canvas1.width = canvas.width;
canvas1.id = "dummy-canvas";
canvas1.style.zIndex = 998;
canvas1.style.position = "absolute";
$(".page-body").prepend(canvas1);
$("#dummy-canvas").mousedown(function (evt) {
    var context1 = canvas1.getContext("2d");
    var offset = $("#dummy-canvas").offset();
    startX = evt.pageX - offset.left;
    startY = evt.pageY - offset.top;
    context1.beginPath();
    $("#dummy-canvas").mousemove(function (event) {
        context1.clearRect(0, 0, canvas1.width, canvas1.height);
        context1.strokeStyle = "#ff0000";
        context1.lineWidth = 1;
        context1.moveTo(startX, startY);
        var offset1 = $("#dummy-canvas").offset();
        var x = event.pageX - offset1.left;
        var y = event.pageY - offset1.top;
        var diffX = x - startX;
        var diffY = y - startY;
        context1.strokeRect(startX, startY, diffX, diffY);
        context1.closePath();
        context1.beginPath();
    }).mouseup(function (eventf) {
        $("#dummy-canvas").unbind('mousemove');
        $("#dummy-canvas").unbind('mouseup');
        var offset = $("#dummy-canvas").offset();
        //$("#dummy-canvas").remove();
        context1.clearRect(0, 0, canvas1.width, canvas1.height);
        var endX = eventf.pageX - offset.left;
        var endY = eventf.pageY - offset.top;
        var diffX = endX - startX;
        var diffY = endY - startY;
        var rect = new fabric.Rect({
            left: startX + diffX * 0.5,
            top: startY + diffY * 0.5,
            width: diffX,
            height: diffY,
            opacity: 1,
            fill: null,
            stroke: color
        });
        canvas.add(rect);
    });
});

【问题讨论】：

您能否发布您的代码以处理手绘中的鼠标事件与在其中一种工作正常的工具（例如三角形）中处理鼠标事件？我猜那里存在一些差异，使得一个需要抵消，而不是另一个。
我已经更新了问题，如有疑问请告诉我，我可以在这里解释。谢谢
问题似乎与全屏有关，因为即使运行时偏移量发生变化，所有计算也能正常工作。（通过添加新的 DOM 元素，下推画布）
发布的代码看起来很好 - 你取 pageY 并减去画布的偏移量 - 这是工作正常的代码（矩形） - 你没有发布有问题的代码（即。手绘）。选择徒手时没有'#dummy-canvas'元素

标签： javascript html canvas fullscreen fabricjs

【解决方案1】：

如果不查看您的代码，就无法准确判断错误在哪里......

一个问题可能是在读取鼠标坐标时，IE。您可能错误地使用 event.pageY 而不是 event.clientY 或类似的混淆（请参阅What is the difference between screenX/Y, clientX/Y and pageX/Y?）

或者你可以说问题在于你如何使用这些坐标， IE。如果您在屏幕空间中获取鼠标事件坐标，那么在将其应用到画布之前，您需要减去画布元素屏幕偏移量并添加滚动偏移量...

由于您有一个有效的工具和一个无效的工具，因此您可以比较它们并了解它们的不同之处。

【讨论】：