javascript - 如何解决 HTML5 全屏模式下 Canvas 上鼠标指针的偏移问题？

Question

我正在使用 HTML5 全屏 API 来放大 this letter到浏览器的全屏模式。

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

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

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

1. 单击此页面右上角的按钮。

2. 点击右下角的“徒手”绘图工具。它将打开一个文具面板(选择钢笔或铅笔工具)

3. 在绘图区域涂鸦几次

4. 现在向下滚动一点，尝试用同一支笔涂鸦。您会注意到鼠标指针位置和潦草的路径之间存在间隙/偏移(这就是问题所在)。理想情况下，全屏模式也不应该有间隙

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

更新:(正如下面评论中的“Iftah”所问)根据 fabric 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);
    });
});

Answer 1

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

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

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

由于您拥有一种有效的工具和一种无效的工具，您可以比较它们并查看它们的不同之处。