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

取而代之的pageX和pageY ，你應該使用screenX和screenY獲得相對於用戶屏幕上的位置：

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;

您可以在此處查看屬性的完整列表和更多信息