如何处理智能手机浏览器上的触摸 - javascript

S.M_Emamian

我想在智能手机上处理触摸监听器。我的代码适用于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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

仅为智能手机加载不同的JavaScript

来自分类Dev

Javascript / Jquery在桌面浏览器中运行很快,但在移动/智能手机浏览器中运行缓慢...我应该拆分站点并使用jQuery Mobile吗?

来自分类Dev

如何使用JavaScript启用或禁用智能手机的GPS服务?

来自分类Dev

如何使用Javascript发现智能手机或平板电脑的型号?

来自分类Dev

如何通过JavaScript / CSS检测智能手机?

来自分类Dev

通过PushOver的Javascript(用户脚本)智能手机通知

来自分类Dev

在智能手机浏览器上检测悬停或鼠标悬停

来自分类Dev

我可以在智能手机的浏览器上播放音频()吗?

来自分类Dev

是否可以从浏览器访问智能手机的蓝牙?

来自分类Dev

如何使文章在智能手机阅读器上可读?

来自分类Dev

Javascript 无需“HTML5 地理定位”和互联网即可获取智能手机 GPS

来自分类Dev

Div宽度在智能手机中越来越小-在Web浏览器中呈现良好

来自分类Dev

如何使我的网站响应智能手机

来自分类Dev

如何安装智能手机以恢复文件

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

如何在Windows中将Android智能手机安装为驱动器?

来自分类Dev

如何在xamarin中单击智能手机,并在winforms上显示结果?

来自分类Dev

通过智能手机浏览器(ASP.net Core MVC 3.1)查看时,剪切网页的标题

来自分类Dev

哪些视频格式可以普遍观看?(跨浏览器,平板电脑和智能手机等)和标准尺寸

来自分类Dev

为什么粘性页脚在内置浏览器的三星智能手机Note 2上不起作用?

来自分类Dev

触摸菜单以外的任何地方时,如何折叠(关闭)iPhone,iPad,智能手机,平板电脑等设备上的Bootstrap扩展菜单?

来自分类Dev

平板电脑/智能手机和触摸屏计算机不同

来自分类Dev

在智能手机上关闭Chrome浏览器时,会话Cookie不会过期

来自分类Dev

plupload智能手机和平板电脑浏览按钮事件未触发

来自分类Dev

如何在实时Android设备(智能手机等)上连接和配置Android Studio?

来自分类Dev

如何在实时Android设备(智能手机等)上连接和配置Android Studio?

来自分类Dev

智能手机文本输入“完成”的 JS 事件处理程序是什么

来自分类Dev

检测平板电脑和智能手机

来自分类Dev

OOP设计与智能手机的性能

Related 相关文章

  1. 1

    仅为智能手机加载不同的JavaScript

  2. 2

    Javascript / Jquery在桌面浏览器中运行很快,但在移动/智能手机浏览器中运行缓慢...我应该拆分站点并使用jQuery Mobile吗?

  3. 3

    如何使用JavaScript启用或禁用智能手机的GPS服务?

  4. 4

    如何使用Javascript发现智能手机或平板电脑的型号?

  5. 5

    如何通过JavaScript / CSS检测智能手机?

  6. 6

    通过PushOver的Javascript(用户脚本)智能手机通知

  7. 7

    在智能手机浏览器上检测悬停或鼠标悬停

  8. 8

    我可以在智能手机的浏览器上播放音频()吗?

  9. 9

    是否可以从浏览器访问智能手机的蓝牙?

  10. 10

    如何使文章在智能手机阅读器上可读?

  11. 11

    Javascript 无需“HTML5 地理定位”和互联网即可获取智能手机 GPS

  12. 12

    Div宽度在智能手机中越来越小-在Web浏览器中呈现良好

  13. 13

    如何使我的网站响应智能手机

  14. 14

    如何安装智能手机以恢复文件

  15. 15

    返回浏览器时,PHP会话在智能手机上丢失

  16. 16

    如何在Windows中将Android智能手机安装为驱动器?

  17. 17

    如何在xamarin中单击智能手机,并在winforms上显示结果?

  18. 18

    通过智能手机浏览器(ASP.net Core MVC 3.1)查看时,剪切网页的标题

  19. 19

    哪些视频格式可以普遍观看?(跨浏览器,平板电脑和智能手机等)和标准尺寸

  20. 20

    为什么粘性页脚在内置浏览器的三星智能手机Note 2上不起作用?

  21. 21

    触摸菜单以外的任何地方时,如何折叠(关闭)iPhone,iPad,智能手机,平板电脑等设备上的Bootstrap扩展菜单?

  22. 22

    平板电脑/智能手机和触摸屏计算机不同

  23. 23

    在智能手机上关闭Chrome浏览器时,会话Cookie不会过期

  24. 24

    plupload智能手机和平板电脑浏览按钮事件未触发

  25. 25

    如何在实时Android设备(智能手机等)上连接和配置Android Studio?

  26. 26

    如何在实时Android设备(智能手机等)上连接和配置Android Studio?

  27. 27

    智能手机文本输入“完成”的 JS 事件处理程序是什么

  28. 28

    检测平板电脑和智能手机

  29. 29

    OOP设计与智能手机的性能

热门标签

归档