我正在使用 HTML5 full_screen API将此字母放大到浏览器的全屏模式。
按照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);
});
});