jQuery Mobile iPhone 应用程序

Posted 2023-05-08

【中文标题】jQuery Mobile iPhone 应用程序

【英文标题】：jQuery Mobile Iphone application

【发布时间】：2012-01-08 05:29:03

【问题描述】：

我正在尝试为 iPhone 创建一个 html5 Web 应用程序。我正在使用 jQuery Mobile。我的应用程序涉及在画布中绘图。它很像一个使用画布渲染草图的绘图应用程序。用户可以从任何方向在屏幕上滑动，应用程序应该能够计算出位置，然后在这些点上画线。

jQuery Mobile 只为滑动控件提供了以下一些基本事件，但我认为我需要对滑动进行更多控制，因为用户可以向任何方向滑动并且可以是任何像素长。另一方面，我应该能够捕捉到大部分的点，这样我就可以更清晰、更精确地想象这幅画了。

tap
Triggers after a quick, complete touch event.
taphold
Triggers after a held complete touch event (close to one second).
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
swipeleft
Triggers when a swipe event occurred moving in the left direction.
swiperight
Triggers when a swipe event occurred moving in the right direction.

在 ios 应用程序的画布中创建绘图应用程序时，我应该遵循任何其他技术吗？任何帮助将不胜感激。

【参考方案1】：

您在 jQuery Mobile 文档的事件页面上错过的一些事件是虚拟事件：http://jquerymobile.com/demos/1.0/docs/api/events.html

vmousedown
    Normalized event for handling touchstart or mousedown events

vmousemove
    Normalized event for handling touchmove or mousemove events

vmouseup
    Normalized event for handling touchend or mouseup events

vmousecancel
    Normalized event for handling touch or mouse mousecancel events

我将使用vmousedown 事件开始跟踪光标的移动，vmousemove 继续跟踪光标的路径，vmouseup 结束跟踪光标的移动。

一个简单的例子是：

//setup a variable to store the cursor's movement
var tracks = [];

//bind to the three events described above
$(document).bind('vmousedown vmousemove vmouseup', function (event) 

    //check to see what event is being fired
    if (event.type == 'vmousedown') 

        //if the `vmousedown` event is fired then reset the value of the `tracks` variable and add the first point to the variable
        tracks = [ x : event.pageX, y : event.pageY];
     else if (event.type == 'vmousemove') 

        //if the `vmousemove` event is fired then add a new point to the `tracks` variable
        tracks.push( x : event.pageX, y : event.pageY);
     else if (event.type == 'vmouseup') 

        //if the `vmouseup` event is fired then the user is done drawing and you can draw their line for them
    
);