P5.js：绘图工具在移动设备上不能很好地工作-前端问题

p5.js: Drawing tool doesn#39;t work well on mobile devices(P5.js：绘图工具在移动设备上不能很好地工作)

本文介绍了P5.js：绘图工具在移动设备上不能很好地工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于项目，我希望使用以下代码：数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

let colors;
let color;

function setup() {
  let c = createCanvas(windowWidth, windowHeight);
  colors = [[155, 204, 250], [205, 104, 200], [255, 0, 0], [0, 255, 0], [0, 0, 255]];
  color = random(colors);
}

function mouseClicked() {
  color = random(colors);
}

function mouseMoved() {
  stroke(...color);
  strokeWeight(20);
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

我意识到它在移动设备上不能很好地工作。有时什么都不画，有时我会得到一些彩色的圆点。应该可以用手指正常画图。

有没有办法解决这个问题？将非常感谢您的帮助！<；3

推荐答案

这将不能作为StackOverflow上的可运行代码段工作，因为它们不会显示在移动设备上，但您可以(runnable version on OpenProcessing)：

let colors;
let color;

function setup() {
    createCanvas(windowWidth, windowHeight);
    colors = [
        [155, 204, 250],
        [205, 104, 200],
        [255, 0, 0],
        [0, 255, 0],
        [0, 0, 255]
    ];
    color = random(colors);
}

function isTouchDevice() {
    return (('ontouchstart' in window) ||
        (navigator.maxTouchPoints > 0) ||
        (navigator.msMaxTouchPoints > 0));
}

if (isTouchDevice()) {
    let previousTouches;
    touchStarted = function(e) {
        // Note: when touching multiple times this will reset the color for all of the lines.
        color = random(colors);

        previousTouches = [...touches];
    }

    touchMoved = function(e) {
        if (previousTouches) {
            for (let i = 0; i < touches.length && i < previousTouches.length; i++) {
                let prev = previousTouches[i];
                let touch = touches[i];
                stroke(...color);
                strokeWeight(20);
                line(prev.x, prev.y, touch.x, touch.y);
            }
            previousTouches = [...touches];
        }
        // Prevent zooming and scrolling gestures
        e.preventDefault();
        return false;
    }

    touchEnded = function(e) {
        previousTouches = [...touches];
    }
} else {
    mousePressed = function() {
        color = random(colors);
    }

    mouseDragged = function() {
        stroke(...color);
        strokeWeight(20);
        line(mouseX, mouseY, pmouseX, pmouseY);
        return false;
    }
}

有关详细信息，请参阅p5.js参考的Events - Touch部分。

这篇关于P5.js：绘图工具在移动设备上不能很好地工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！