我有一个使用jQuery的带有绘图选项的应用程序。在桌面上一切都很好,但是在移动的设备上不能画线。在touchmove和touchstart上我可以触发控制台日志,但是线不能显示。下面是我目前为止的代码:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var mousePressed = false;
var lastX, lastY;
var ctx;
var ctxtwo;
var color;
ctx = document.getElementById('myCanvas').getContext("2d");
ctxtwo = document.getElementById('myCanvasTwo').getContext("2d");
$('#skinModal').click(function () {
$(".spectrum-input").change(function () {
color = $(this).val();
});
})
$("#skin-condition-save").click(function () {
document.getElementById('right_side_face_canvas').value = document.getElementById('myCanvas').toDataURL('image/png');
document.getElementById('left_side_face_canvas').value = document.getElementById('myCanvasTwo').toDataURL('image/png');
});
$('#myCanvas, #myCanvasTwo').mousedown(function (e) {
var second = false;
if (e.target.id == 'myCanvasTwo') {
second = true;
}
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false, second);
});
$('#myCanvas, #myCanvasTwo').on("touchstart", function (e) {
console.log('first');
var second = false;
if (e.target.id == 'myCanvasTwo') {
console.log('second');
second = true;
}
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false, second);
});
$('#myCanvas, #myCanvasTwo').mousemove(function (e) {
var second = false;
if (e.target.id == 'myCanvasTwo') {
second = true;
}
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true, second);
}
});
$('#myCanvas, #myCanvasTwo').on("touchmove", function (e) {
console.log('111');
var second = false;
if (e.target.id == 'myCanvasTwo') {
console.log('222');
second = true;
}
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true, second);
}
});
$('#myCanvas, #myCanvasTwo').mouseup(function (e) {
mousePressed = false;
});
$('#myCanvas, #myCanvasTwo').mouseleave(function (e) {
mousePressed = false;
});
function Draw(x, y, isDown, isSecond) {
if (isDown) {
if (isSecond) {
ctxtwo.beginPath();
ctxtwo.strokeStyle = color;
ctxtwo.lineWidth = $('#selWidth').val();
ctxtwo.lineJoin = "round";
ctxtwo.moveTo(lastX, lastY);
ctxtwo.lineTo(x, y);
ctxtwo.closePath();
ctxtwo.stroke();
} else {
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
}
lastX = x;
lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function clearAreaTwo() {
// Use the identity matrix while clearing the canvas
ctxtwo.setTransform(1, 0, 0, 1, 0, 0);
ctxtwo.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
</script>
我需要进行哪些代码修改才能在移动的设备上绘制?
2条答案
按热度按时间llmtgqce1#
解决了我在更改代码时遇到的问题
结束日期
在移动的设备上,pageX和pageY会有一些不同
9jyewag02#
主要的问题是Touch事件可以接受多个触摸点。你不能像鼠标事件那样简单地使用
event.pageX
。查看更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Touch/pageX
台式机示例:https://jsfiddle.net/Twisty/8q49gu5x/
移动的示例:https://jsfiddle.net/Twisty/8q49gu5x/show
JavaScript语言
这将查看事件类型,如果是Touch事件,则获取正确的坐标。