javascript - Meteor app 製作繪畫頁面,"touchmove" event 效果出現問題
PHP中文网
PHP中文网 2017-04-11 11:50:56
0
0
709

我製作了一個繪畫的頁面,使用了 javascript 裡的 canvas。而當我使用 "mousemove" event 時,在電腦的瀏覽器上,進行了測試。當然效果是成功的。但是我在手機上進行測試,便出現了問題。

以下是我的編碼,我曾在不同的位置,放置了 alert 來進行測試。

'touchmove #canvas': function(event, template) {
var offset = $('#canvas').offset();   //alert 出現 offset 的資訊,裡面的數字是正確無誤。

var xAxisInCanvas = event.originalEvent.changedTouches[0].pageX - offset.left;   //alert 出現了數字,是由兩個數字相減後而來的,運算式及讀取數字是沒有問題的。

var yAxisInCanvas = event.originalEvent.changedTouches[0].pageY - offset.top;   //alert 出現了數字,是由兩個數字相減後而來的,運算式及讀取數字是沒有問題的。

var currentPoint = Points.findOne({$and: [{x: xAxisInCanvas}, {y: yAxisInCanvas}]});   //alert 顯示以上句式無誤,並且不會影響後面的運算。

if(Boolean(currentPoint) == true) {
    Meteor.call("removeOldPoint", currentPoint._id, function(error) {
        if(error) {console.log(error.message);}
    });
}   //alert 顯示以上句式無誤,並且不會影響後面的運算。

Meteor.call("insertNewPoint", xAxisInCanvas, yAxisInCanvas, "black", function(error) {
    if(error) {console.log(error.message);}
});  //alert 顯示上傳的時候,有正確的坐標顯示,以及 "meteor call" 運作沒有出現錯誤,程式依然繼續運作,於 "callback" 程式是可以出現 "result",並正常運作的。
},

但完成以上步驟後,以上坐標是沒有儲存於伺服器,並且沒有任何資料顯示在畫面上。

如果將 "touchmove" 改變 "mousemove" event,並且將 "event.originalEvent.changedTouches[0].pageX" 及 "event.originalEvent.changedTouches[0].pageY" 改為 "event.pageX" 及 "event.pageY",然後在電腦瀏覽器上使用,效果是運作正常無誤的,圖畫也能正確地繪製。

但當我改回以上版本後,在手機上運利程式,發現沒有任何顯示出來。我不知道發生甚麼問題,現在此尋求協助,請幫幫忙,非常感謝!

PHP中文网
PHP中文网

认证高级PHP讲师

모든 응답(0)
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!