如何在移动设备上进行画布绘图 [英] How can I make canvas drawing work on mobile

问题描述

我的画布绘制界面在桌面上可完美运行，但在iPhone上无法运行.

My canvas drawing interface works perfectly on desktop but fails to work on iPhone.

当我尝试绘画时，它只是在拇指指向的地方画了一个点.当我拖动拇指时，没有任何线条，页面继续滚动...

When I try to draw, it just makes a dot where my thumb goes. When I drag my thumb, there is no line and the page continues to scroll...

代码:

var clearButton = document.getElementById('doodle-bin');
var canvascontainer = document.getElementById('doodle-canvas-container');
var canvas = document.getElementById('doodle-canvas');
var context = canvas.getContext('2d');
var radius = (document.getElementById('doodle-canvas-container').clientWidth + document.getElementById('doodle-canvas-container').clientHeight) / 150;
var dragging = false;

function getMousePosition(e) {
    var mouseX = e.offsetX * canvas.width / canvas.clientWidth | 0;
    var mouseY = e.offsetY * canvas.height / canvas.clientHeight | 0;
    return {x: mouseX, y: mouseY};
}

context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

canvas.width = 1280;
canvas.height = 720;
canvas.style.width = '100%';
canvas.style.height = '100%';

/* CLEAR CANVAS */
function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

clearButton.addEventListener('click', clearCanvas);


var putPoint = function (e) {
    if (dragging) {
        context.lineTo(getMousePosition(e).x, getMousePosition(e).y);
        context.lineWidth = radius * 2;
        context.stroke();
        context.beginPath();
        context.arc(getMousePosition(e).x, getMousePosition(e).y, radius, 0, Math.PI * 2);
        context.fill();
        context.beginPath();
        context.moveTo(getMousePosition(e).x, getMousePosition(e).y);
    }
};

var engage = function (e) {
    dragging = true;
    putPoint(e);
};
var disengage = function () {
    dragging = false;
    context.beginPath();
};

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);
document.addEventListener('mouseup', disengage);
canvas.addEventListener('contextmenu', disengage);

canvas.addEventListener('touchstart', engage, false);
canvas.addEventListener('touchmove', putPoint, false);
canvas.addEventListener('touchend', disengage, false);

任何帮助将不胜感激！谢谢

Any help would be greatly appreciated! Thank you

推荐答案

在您的putPoint函数中，取消默认事件和传播.

In your putPoint function cancel the default events and propagation.

var putPoint = function (e) {
    e.preventDefault();
    e.stopPropagation();

    if (dragging) {
    ....

然后查看在HTML5中使用触摸事件画布处理如何将触摸坐标转换为鼠标坐标.

Then look at Using Touch Events with the HTML5 Canvas to handle how to convert your touch coordinates to mouse coordinates.

canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);

这篇关于如何在移动设备上进行画布绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！