我想在智能手机上处理触摸监听器。我的代码适用于mousedown, mousemove, mouseup,mouseout在网络浏览器上。
canvas.addEventListener("mousedown", function(event) {
event.preventDefault();
var p = get_mouse_position(event);
for( var i=0; i<4; i++ ) {
var x = points[i][0];
var y = points[i][1];
if( p.x < x + 10 && p.x > x - 10 && p.y < y + 10 && p.y > y - 10 ) {
drag = i;
break;
}
}
}, false);
canvas.addEventListener("mousemove", function(event) {
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
prepare_lines(ctx2, points, true);
draw_canvas(ctx, ctx1, ctx2);
}, false);
canvas.addEventListener("mouseup", function(event) {
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx1.clearRect(0, 0, canvas.width, canvas.height);
var s = (new Date()).getTime();
op.draw(points);
document.getElementById("ms").innerHTML = ( (new Date()).getTime() - s );
prepare_lines(ctx2, points);
draw_canvas(ctx, ctx1, ctx2);
drag = null;
}, false);
canvas.addEventListener("mouseout", function(event) {
event.preventDefault();
drag = null;
}, false);
canvas.addEventListener("mouseenter", function(event) {
event.preventDefault();
drag = null;
}, false);
像这个演示：
http://www.html5.jp/test/perspective_canvas/demo1_en.html
https://github.com/wanadev/perspective.js/
但我的代码在智能手机的浏览器上不起作用。
我在点击监听器上添加了touchstart, touchmove,touchend监听器就像相同的代码。但在智能手机的浏览器上，我的边缘根本不动。
触摸监听：
canvas.addEventListener('touchstart', function(event){
event.preventDefault();
var p = get_mouse_position(event);
for( var i=0; i<4; i++ ) {
var x = points[i][0];
var y = points[i][1];
if( p.x < x + 10 && p.x > x - 10 && p.y < y + 10 && p.y > y - 10 ) {
drag = i;
break;
}
}
}, false);
canvas.addEventListener('touchmove', function(event){
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
prepare_lines(ctx2, points, true);
draw_canvas(ctx, ctx1, ctx2);
}, false);
canvas.addEventListener('touchend', function(event){
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx1.clearRect(0, 0, canvas.width, canvas.height);
var s = (new Date()).getTime();
op.draw(points);
document.getElementById("ms").innerHTML = ( (new Date()).getTime() - s );
prepare_lines(ctx2, points);
draw_canvas(ctx, ctx1, ctx2);
drag = null;
}, false);
我想在智能手机的浏览器（如网络浏览器）上处理 4-edges。但我无法在智能手机的浏览器上移动 4-edges。
一个TouchEvent可能由多个 Touch 对象（又名多点触控）组成。
这些不同的Touch对象可通过Event的.touches TouchList属性获得。
只有这些对象会保存您感兴趣的坐标，因此，在您的处理程序中，您需要选择这些 Touch 对象之一，这通常是第一个（单点触摸应用程序）。
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
// attach all our handlers
canvas.addEventListener('mousedown', handleDown);
canvas.addEventListener('touchstart', handleDown);
document.addEventListener('mouseup', handleUp);
document.addEventListener('touchend', handleUp);
document.addEventListener('mousemove', handleMove);
document.addEventListener('touchmove', handleMove);
var mouse = {
lastX: null,
lastY: null,
x: null,
y: null,
down: false
};
// Here we want to check whether it is a touch event or a mouse event
function update_coords(evt) {
evt.preventDefault();
var ev;
// touch event?
if (evt.touches && evt.touches.length) {
ev = evt.touches[0];
} else ev = evt; // mouse
var rect = canvas.getBoundingClientRect();
// update our mouse object
mouse.lastX = mouse.x;
mouse.lastY = mouse.y;
mouse.x = ev.clientX - rect.left;
mouse.y = ev.clientY - rect.top;
}
function handleDown(evt) {
mouse.down = true;
update_coords(evt);
draw();
}
function handleUp(evt) {
mouse.down = false;
mouse.lastX = mouse.lastY = mouse.x = mouse.y = null;
}
function handleMove(evt) {
if (mouse.down) {
update_coords(evt);
draw();
}
}
function draw() {
if(mouse.lastX === null) return;
ctx.beginPath();
ctx.moveTo(mouse.lastX, mouse.lastY);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}canvas{
border: 1px solid;
}<canvas id="canvas" width="500" height="300"></canvas>要在移动设备上进行测试，请切换到Stackoverflow的完整站点版本（在页面底部）或试试这个fiddle。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句