在 Canvas 上书写时避免滚动
Avoid scroll when writing on Canvas
我在平板电脑 canvas 上书写时遇到问题。
这个canvas应该用来在平板电脑上签名。
它在我的 MacBook 和 iPad 上运行良好,但在 Android 平板电脑上运行不佳。
当我在这个平板电脑上写字时,网站会上下滚动,无法签名。
你有什么建议吗?
非常感谢!
const signature = (currentId) => {
window.requestAnimFrame = (function (callback) {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
})();
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#222222";
ctx.lineWidth = 4;
var element = document.getElementById("canvasContainer");
var positionInfo = element.getBoundingClientRect();
ctx.canvas.width = positionInfo.width;
ctx.canvas.height = positionInfo.height - 40;
var drawing = false;
var mousePos = {
x: 0,
y: 0,
};
var lastPos = mousePos;
canvas.addEventListener(
"mousedown",
function (e) {
drawing = true;
lastPos = getMousePos(canvas, e);
},
false
);
canvas.addEventListener(
"mouseup",
function (e) {
drawing = false;
},
false
);
canvas.addEventListener(
"mousemove",
function (e) {
mousePos = getMousePos(canvas, e);
},
false
);
// Add touch event support for mobile
canvas.addEventListener("touchstart", function (e) {}, false);
canvas.addEventListener(
"touchmove",
function (e) {
var touch = e.touches[0];
var me = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY,
});
canvas.dispatchEvent(me);
},
false
);
canvas.addEventListener(
"touchstart",
function (e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var me = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY,
});
canvas.dispatchEvent(me);
},
false
);
canvas.addEventListener(
"touchend",
function (e) {
var me = new MouseEvent("mouseup", {});
canvas.dispatchEvent(me);
},
false
);
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top,
};
}
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top,
};
}
function renderCanvas() {
if (drawing) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
lastPos = mousePos;
}
}
// Prevent scrolling when touching the canvas
document.body.addEventListener(
"touchstart",
function (e) {
if (e.target == canvas) {
e.preventDefault();
}
},
false
);
document.body.addEventListener(
"touchend",
function (e) {
if (e.target == canvas) {
e.preventDefault();
}
},
false
);
document.body.addEventListener(
"touchmove",
function (e) {
if (e.target == canvas) {
e.preventDefault();
}
},
false
);
(function drawLoop() {
requestAnimFrame(drawLoop);
renderCanvas();
})();
function clearCanvas() {
canvas.width = canvas.width;
}
// Set up the UI
var clearBtn = document.getElementById("sig-clearBtn");
var submitBtn = document.getElementById("sig-submitBtn");
clearBtn.addEventListener(
"click",
function (e) {
clearCanvas();
},
false
);
submitBtn.addEventListener(
"click",
function (e) {
var dataUrl = canvas.toDataURL();
auszahlen(currentId, dataUrl);
},
false
);
};
在 addEventListener
的回调中添加 e.preventDefault()
是解决方案。谢谢海沃氏!
我在平板电脑 canvas 上书写时遇到问题。
这个canvas应该用来在平板电脑上签名。
它在我的 MacBook 和 iPad 上运行良好,但在 Android 平板电脑上运行不佳。
当我在这个平板电脑上写字时,网站会上下滚动,无法签名。
你有什么建议吗?
非常感谢!
const signature = (currentId) => {
window.requestAnimFrame = (function (callback) {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
})();
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#222222";
ctx.lineWidth = 4;
var element = document.getElementById("canvasContainer");
var positionInfo = element.getBoundingClientRect();
ctx.canvas.width = positionInfo.width;
ctx.canvas.height = positionInfo.height - 40;
var drawing = false;
var mousePos = {
x: 0,
y: 0,
};
var lastPos = mousePos;
canvas.addEventListener(
"mousedown",
function (e) {
drawing = true;
lastPos = getMousePos(canvas, e);
},
false
);
canvas.addEventListener(
"mouseup",
function (e) {
drawing = false;
},
false
);
canvas.addEventListener(
"mousemove",
function (e) {
mousePos = getMousePos(canvas, e);
},
false
);
// Add touch event support for mobile
canvas.addEventListener("touchstart", function (e) {}, false);
canvas.addEventListener(
"touchmove",
function (e) {
var touch = e.touches[0];
var me = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY,
});
canvas.dispatchEvent(me);
},
false
);
canvas.addEventListener(
"touchstart",
function (e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var me = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY,
});
canvas.dispatchEvent(me);
},
false
);
canvas.addEventListener(
"touchend",
function (e) {
var me = new MouseEvent("mouseup", {});
canvas.dispatchEvent(me);
},
false
);
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top,
};
}
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top,
};
}
function renderCanvas() {
if (drawing) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
lastPos = mousePos;
}
}
// Prevent scrolling when touching the canvas
document.body.addEventListener(
"touchstart",
function (e) {
if (e.target == canvas) {
e.preventDefault();
}
},
false
);
document.body.addEventListener(
"touchend",
function (e) {
if (e.target == canvas) {
e.preventDefault();
}
},
false
);
document.body.addEventListener(
"touchmove",
function (e) {
if (e.target == canvas) {
e.preventDefault();
}
},
false
);
(function drawLoop() {
requestAnimFrame(drawLoop);
renderCanvas();
})();
function clearCanvas() {
canvas.width = canvas.width;
}
// Set up the UI
var clearBtn = document.getElementById("sig-clearBtn");
var submitBtn = document.getElementById("sig-submitBtn");
clearBtn.addEventListener(
"click",
function (e) {
clearCanvas();
},
false
);
submitBtn.addEventListener(
"click",
function (e) {
var dataUrl = canvas.toDataURL();
auszahlen(currentId, dataUrl);
},
false
);
};
在 addEventListener
的回调中添加 e.preventDefault()
是解决方案。谢谢海沃氏!