jQuery Mobile Iphone 应用程序

Question

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

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.

在 Canvas 中为 iOs 应用程序创建绘图应用程序时，我是否应该遵循任何其他技术？任何帮助将不胜感激。

Answer 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
    }
});