Processing.js mouseX 和 mouseY 无法在移动设备上运行
Processing.js mouseX and mouseY not working on mobile
我使用 processing.js 在我的网站上发布了一个简单的处理草图,但是当我在我的 iPhone 和 iPad 上打开它时,它根本不起作用。我找到了一些 javacript 来让它工作并且它有所帮助,但是 mouseX 仍然得到手指相对于整个页面的位置而不是 canvas 区域,所以它并没有完全得到正确的位置.我能做什么?
代码在此处: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>
而不是 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;
您可以查看完整的属性列表和更多信息here
我使用 processing.js 在我的网站上发布了一个简单的处理草图,但是当我在我的 iPhone 和 iPad 上打开它时,它根本不起作用。我找到了一些 javacript 来让它工作并且它有所帮助,但是 mouseX 仍然得到手指相对于整个页面的位置而不是 canvas 区域,所以它并没有完全得到正确的位置.我能做什么?
代码在此处: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>
而不是 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;
您可以查看完整的属性列表和更多信息here