2011-11-28 55 views
2

我試圖創建的iPhone的HTML5 Web應用程序。我正在使用jQuery Mobile。我的應用程序涉及在畫布中繪製這很像使用畫布渲染草圖的繪畫應用程序。用戶可以從任何方向在屏幕上滑動和應用程序應該能夠計算出的位置,然後跨過點來繪製線。jQuery Mobile的iPhone應用程序

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應用程序創建繪圖應用程序?任何幫助將不勝感激。

回答

6

你錯過了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 
    } 
}); 
+0

大,感謝) – Sandeep

相關問題