Processing.js mouseX 和 mouseY 在移动设备上不起作用

Question

我使用 processing.js 在我的网站上发布了一个简单的处理草图，但是当我在 iPhone 和 iPad 上打开它时，它根本不起作用。我找到了一些 javacript 来使它工作并且它有所帮助，但是 mouseX 仍然获取手指相对于整个页面而不是画布区域的位置，所以它并不能完全正确地定位。我能做什么？

代码在这里：http://mqvlm.github.io/blog/rect.html

这是我正在使用的 javascript：

<canvas ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);"
ontouchend="touchEnd(event);"
ontouchcancel="touchCancel(event);"
id="sketch" width="300" height="300" data-processing-sources="/code/rect.pde"> </canvas>

<script type="text/javascript">

var processingInstance;


function setProcessingMouse(event){
  if (!processingInstance) {  
    processingInstance = Processing.getInstanceById('sketch');  
    }  

  var x = event.touches[0].pageX;
  var y = event.touches[0].pageY;

  processingInstance.mouseX = x;
  processingInstance.mouseY = y;
};

function touchStart(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mousePressed();
};

function touchMove(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseDragged();
};

function touchEnd(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseReleased();
};

function touchCancel(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseReleased();
};

</script>

Answer 1

您应该使用screenX 和screenY 而不是pageX 和pageY 来获取相对于用户屏幕的位置：

var x = event.touches[0].screenX;
var y = event.touches[0].screenY;

或者如果你想要相对于视口的位置，你可以使用clientX和clientY：

var x = event.touches[0].clientX;
var y = event.touches[0].clientY;

您可以查看完整的属性列表和更多信息here