Question

我开始学习P5.js，但是我对touchX和touchY有一些问题，我无法在线找到任何相关文档。

我从this网站复制了javascript代码，它基本上会用鼠标和红线画一条蓝线。

我使用了Chrome F12开发工具中的触摸模拟器，该工具在该网站上运行良好。

然后我创建了一个使用latest P5.js from cdn的HTML文件，一切正常，除非我使用触摸，它说touchX和touchY是错误的。

以下是script.js中的Javascript：

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(5);
  stroke(0);
  fill(0);
  background(255);
}

function draw() {
  // draw stuff here
}


function touchMoved(){
  stroke(255, 0, 0);
  line(touchX, touchY, ptouchX, ptouchY);
  return false;
}

function touchEnded(){
  stroke(0, 0, 255);
  line(touchX, touchY, ptouchX, ptouchY);
  return false;
}

function mouseDragged(){
  stroke(0, 255, 0);
  line(mouseX, mouseY, pmouseX, pmouseY);
}

还有HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p5JS Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
        body{
            overflow: hidden;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
  <h1>Draw lines!</h1>
</body>
</html>

Here is the CodePen.

非常感谢。

Answer 1

p5.js中没有touchX或touchY。相反，您可以使用mouseX和mouseY，因为如果有的话，它们也会给出触摸位置（我相信pMouseX和pMouseY也适用于之前的位置）。

但是有一些touchStarted，touchMoved和touchEnded函数就像你使用的那样。如果您在“事件”部分here中查看这些文档，您可以看到正在使用的mouseX和mouseY的示例。

在P5.js

1 个答案: