如何修改jQuery绘图代码以支持移动端绘图功能

以下是针对你的代码需要做出的修改，解决移动端无法绘制线条的问题：

核心修改点 #

1. 修正触摸事件的坐标获取逻辑 #

触摸事件的位置信息并不直接存放在事件对象e上，而是在e.touches[0]（当前触摸点的集合）中。需要替换touchstart和touchmove事件里的坐标获取代码：

// touchstart事件中修改坐标获取
const touch = e.touches[0];
Draw(touch.pageX - $(this).offset().left, touch.pageY - $(this).offset().top, false, second);

// touchmove事件中同理修改
const touch = e.touches[0];
Draw(touch.pageX - $(this).offset().left, touch.pageY - $(this).offset().top, true, second);

2. 阻止触摸事件的默认行为 #

移动端浏览器会对触摸事件触发默认行为（如页面滚动、缩放），这会干扰绘图操作。在touchstart和touchmove事件中添加e.preventDefault()：

$('#myCanvas, #myCanvasTwo').on("touchstart", function (e) {
    e.preventDefault(); // 新增：阻止默认触摸行为
    // ... 原有代码
});

$('#myCanvas, #myCanvasTwo').on("touchmove", function (e) {
    e.preventDefault(); // 新增：阻止默认触摸行为
    // ... 原有代码
});

3. 初始化颜色变量的默认值 #

如果用户未选择颜色，color变量会是undefined，导致绘制的线条不可见。在变量声明时设置默认值：

var color = '#000000'; // 初始化默认黑色

4. 修复第二个画布清除函数的尺寸错误 #

clearAreaTwo函数中错误使用了第一个画布的尺寸，替换为第二个画布自身的尺寸：

function clearAreaTwo() {
    ctxtwo.setTransform(1, 0, 0, 1, 0, 0);
    // 原错误代码：ctxtwo.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctxtwo.clearRect(0, 0, ctxtwo.canvas.width, ctxtwo.canvas.height); // 修改后
}

完整修改后的代码 #

<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 = '#000000'; // 初始化默认颜色

    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) {
        e.preventDefault(); // 阻止默认触摸行为
        console.log('first');
        var second = false;
        if (e.target.id == 'myCanvasTwo') {
            console.log('second');
            second = true;
        }
        mousePressed = true;
        const touch = e.touches[0];
        Draw(touch.pageX - $(this).offset().left, touch.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) {
        e.preventDefault(); // 阻止默认触摸行为
        console.log('111');
        var second = false;
        if (e.target.id == 'myCanvasTwo') {
            console.log('222');
            second = true;
        }
        if (mousePressed) {
            const touch = e.touches[0];
            Draw(touch.pageX - $(this).offset().left, touch.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() {
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }


    function clearAreaTwo() {
        ctxtwo.setTransform(1, 0, 0, 1, 0, 0);
        ctxtwo.clearRect(0, 0, ctxtwo.canvas.width, ctxtwo.canvas.height);
    }
</script>

内容的提问来源于stack exchange，提问作者Karlis Pokkers