我使用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>
您应该使用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;
您可以在此处查看完整的房产列表和更多信息