如何获得此HTML5 Canvas绘画应用程序以同时处理触摸和鼠标事件? [英] How can I get this HTML5 Canvas paint application to work for both touch and mouse events?
问题描述
这是我要执行的操作的源代码:
Here is the source code of what I'm trying to do:
JavaScript:
Javascript:
window.addEventListener('load', function () {
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event) {
// get the touch coordinates
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}
// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('touchstart', draw, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', draw, false);
// prevent elastic scrolling
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false); // end body.onTouchMove
}, false); // end window.onLoad
HTML:
<body>
<div id="container">
<canvas id="sketchpad" width="400" height="400">Sorry, your browser is not supported.</canvas>
</div>
</body>
CSS:
body {
margin:0;
padding:0;
font-family:Arial;
}
#container {
position:relative;
}
#sketchpad {
border: 1px solid #000;
}
我尝试为鼠标下移/上移/移动添加事件监听器，但这些监听器似乎不起作用.
I tried adding event listeners for mouse down/up/move but those didn't seem to work.
或者，如果有人对适用于计算机和平板电脑的开源画布绘画应用程序有任何建议，我宁愿使用它.
Alternatively, if anyone has any suggestions for open source canvas painting apps that work on computer and tablet I'd rather just use that.
到目前为止，唯一脱颖而出的是 https://github.com/PlayMyCode/SkyBrush但不幸的是，它不适用于android平板电脑(至少我已经尝试过的平板电脑).
So far the only one that has stood out is https://github.com/PlayMyCode/SkyBrush but it unfortunately doesn't work on android tablets (at least the ones I've been able to try).
推荐答案
检查修改过的小提琴
我添加了一种检测在触摸设备中运行的时间的方法，以及将鼠标事件映射到触摸事件的开关.
I added a way to detect when running in a touch device and a switch to map the mouse events to touch events.
还要注意，当触摸发生时，我们需要使用event.changedTouches来正确获取coors.
Also notice that when touchend occurred we need to use event.changedTouches to get the coors correctly.
window.addEventListener('load', function () {
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event) {
var type = null;
// map mouse events to touch events
switch(event.type){
case "mousedown":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchstart";
break;
case "mousemove":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchmove";
break;
case "mouseup":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchend";
break;
}
// touchend clear the touches[0], so we need to use changedTouches[0]
var coors;
if(event.type === "touchend") {
coors = {
x: event.changedTouches[0].pageX,
y: event.changedTouches[0].pageY
};
}
else {
// get the touch coordinates
coors = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
}
type = type || event.type
// pass the coordinates to the appropriate handler
drawer[type](coors);
}
// detect touch capabilities
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);
// attach the touchstart, touchmove, touchend event listeners.
if(touchAvailable){
canvas.addEventListener('touchstart', draw, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', draw, false);
}
// attach the mousedown, mousemove, mouseup event listeners.
else {
canvas.addEventListener('mousedown', draw, false);
canvas.addEventListener('mousemove', draw, false);
canvas.addEventListener('mouseup', draw, false);
}
// prevent elastic scrolling
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false); // end body.onTouchMove
}, false); // end window.onLoad
这篇关于如何获得此HTML5 Canvas绘画应用程序以同时处理触摸和鼠标事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
