Phonegap＆RaphaelJS減速

構建並運行我的應用程序後，幾次拖拉raphaelJS對象後似乎出現主要的減速。我已經從JQuery + JQMobile更改爲zepto，但我仍然在減速。它在PC上正常工作，所以我懷疑任何人都可以在JSFiddle中複製該問題，如果人們想測試應用程序，我將在下面的評論中提供build.phonegap鏈接。Phonegap＆RaphaelJS減速

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-width, target-densitydpi=device-dpi" /> 

     <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 

     <script src="js/zepto.min.js"></script> 
     <!-- // <script src="js/hammer.min.js"></script> --> 
     <script src="js/raphael-min.js"></script> 
     <script src="phonegap.js"></script> 
     <script src="js/index.js"></script> 
     <title>Mobile OneStop</title> 
    </head> 
    <body >   
     <div style=" border:1px solid #BBB; width:500px; height:500px;" id="Canvas"> 
     </div> 

    </body> 
</html>

JS：

我之所以刪除圓，然後添加新的是延長的時間量可以拖動的減速發生之前，如果沒有它你只能得到1-2拖動，然後慢慢停下來。

var MapView; 
var canvasW; 
var canvasH; 

var circle; 
var MapView, Background; 

$(document).ready(function(e) { 
    //For mobile devices document.addEventListener("deviceready", onDeviceReady, false); 
    CreateCanavs(); 
}); 

function onDeviceReady() { 
    CreateCanavs(); 
} 

function CreateCanavs() { 

    MapView = Raphael("Canvas", 500, 500); 
    canvasW = MapView.width; 
    canvasH = MapView.height; 

    var circle = MapView.circle(100, 100, 20).attr({ 
     fill: 'red', 
     stroke: 'black', 
     "stroke-width": '2' 
    }); 


    var circle1 = MapView.circle(300, 300, 20).attr({ 
     fill: 'blue', 
     stroke: 'black', 
     "stroke-width": '2' 
    }); 

    circle.drag(onMove, onStart, onEnd); 
    circle1.drag(onMove, onStart, onEnd); 
} 


function onMove(dx, dy) { 
    var nowX; 
    var nowY; 
    var radius = this.attr("r"); 
    var boundX = canvasW - radius; 
    var boundY = canvasH - radius; 

    if (this.attr("cx") > canvasW || this.attr("cy") > canvasH) { 
     this.attr('cx', this.ox + dx); 
     this.attr('cy', this.oy + dy); 
    } else { 

     nowX = Math.min(boundX, this.ox + dx); 
     nowX = Math.max(radius, nowX); 
     nowY = Math.min(boundY, this.oy + dy); 
     nowY = Math.max(radius, nowY); 
     this.attr({ 
      "cx": nowX, 
      "cy": nowY 
     }); 
    } 
} 

function onStart() { 
    this.ox = this.attr("cx"); 
    this.oy = this.attr("cy"); 
} 

function onEnd() { 
    var id = this.id; 
    console.log(id); 
    var x = this.attr("cx"); 
    var y = this.attr("cy"); 
    this.remove(); 

    var letters = 'ABCDEF'.split(''); 
    var col = '#'; 
    for (var i = 0; i < 6; i++) { 
     col += letters[Math.round(Math.random() * 15)]; 
    } 


    var circle = MapView.circle(x, y, 20).attr({ 
     fill: col, 
     stroke: 'black', 
     "stroke-width": '2' 
    }); 
    console.log(circle.attr("fill")); 

    circle.drag(onMove, onStart, onEnd); 
    circle.id = id; 
}

來源

2013-10-29 Sidedcore

這確實需要一些訪問權限，但他們什麼都不做，只是爲官方版本。 https://build.phonegap.com/apps/621133/share 這裏是github回購，所以你可以進一步查看：https：//github.com/sidecore/OnestopTesting – Sidedcore

我不知道減速的原因，但是您可以執行小的解決方法以使其工作更快一點。

//create array of planned updates 
var plannedUpdates = [] 

//create function to cancel pending updates 
var cancelPending = function(){ 
    for(var i = plannedUpdates.length - 1; i> -1;--i){ 
     var plannedUpdate =plannedUpdates.pop(); 
     window.clearTimeout(plannedUpdate) 
    } 
} 
//set update frequency as interval between updates 
var updateFrequency = 100; 

//modify your onMove function to plan updates instead of executing them immediatly: 

function onMove(dx, dy) { 
    var circle = this; 
    cancelPending(); 
    plannedUpdates.push(window.setTimeout(function(){ 
     planUpdate(dx,dy,circle) 
    }, updateFrequency)); 
} 

var planUpdate = function(dx,dy, circle){ 
    this = circle 
    var nowX; 
    var nowY; 
    var radius = this.attr("r"); 
    var boundX = canvasW - radius; 
    var boundY = canvasH - radius; 

    if (this.attr("cx") > canvasW || this.attr("cy") > canvasH) { 
     this.attr('cx', this.ox + dx); 
     this.attr('cy', this.oy + dy); 
    } else { 

     nowX = Math.min(boundX, this.ox + dx); 
     nowX = Math.max(radius, nowX); 
     nowY = Math.min(boundY, this.oy + dy); 
     nowY = Math.max(radius, nowY); 
     this.attr({ 
      "cx": nowX, 
      "cy": nowY 
     }); 
    } 
}

您可能需要調整updateFrequency，使其工作根據需要

編輯！糟糕，我寫了setInterval，我的意思是setTimeout。固定！

來源

2013-10-29 13:29:38

不幸的是，這是行不通的，經過幾次拖延後，減速仍然發生。 – Sidedcore

Phonegap＆RaphaelJS減速

回答

相關問題