如何使用jQuery在移动设备上绘图

Question

我有一个使用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>

我需要做哪些代码修改才能在移动设备上绘制?

Answer 1

解决了从

更改代码时的问题

Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true, second);

Draw(e.originalEvent.touches[0].pageX - $(this).offset().left, e.originalEvent.touches[0].pageY - $(this).offset().top, false, second);

在移动设备上pageX和pageY有一点不同

Answer 2

主要问题是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

$(function() {
var mousePressed = false;
var lastX, lastY;
var ctx;
var ctxtwo;
var color;
ctx = $('#myCanvas').get(0).getContext("2d");
ctxtwo = $('#myCanvasTwo').get(0).getContext("2d");
function log(str) {
$(".status").html("<div>" + str + "<div>");
}
/*
$('#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');
});
*/
function getCoords(evt) {
var coords = {
x: 0,
y: 0
};
if (evt.type.indexOf("touch") != -1) {
coords.x = evt.changedTouches[0].pageX;
coords.y = evt.changedTouches[0].pageY;
} else {
coords.x = evt.pageX;
coords.y = evt.pageY;
}
return coords;
}
$('.wrapper').on("mousedown touchstart", "canvas", function(e) {
e.preventDefault();
log(e.type);
var second = $(e.target).attr("id") === "myCanvasTwo";
mousePressed = true;
var c = getCoords(e);
Draw(c.x - $(this).offset().left, c.y - $(this).offset().top, false, second);
});

$('.wrapper').on("mousemove touchmove", "canvas", function(e) {
e.preventDefault();
log(e.type);
var second = $(e.target).attr("id") === "myCanvasTwo";
var c = getCoords(e);
if (mousePressed) {
Draw(c.x - $(this).offset().left, c.y - $(this).offset().top, true, second);
}
});
$('.wrapper').on("mouseup mouseleave touchstop", "canvas", function(e) {
log(e.type);
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);
}
});

查看事件类型，如果是Touch事件，则获取适当的坐标。