1

在构建并运行我的应用程序后，拖动 raphaelJS 对象几次后似乎出现了严重的减速。我已经从 JQuery + JQMobile 更改为 zepto，但我仍然在减速。它在 PC 上运行良好，所以我怀疑任何人都可以在 JSFiddle 中复制该问题，如果人们想测试该应用程序，我将在下面的评论中提供 build.phonegap 链接。

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 = '0123456789ABCDEF'.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;
}
4

1 回答 1

0

我不知道减速的原因，但是您可以执行一些小的解决方法以使其工作得更快一点。

//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-29T13:29:38.177 回答