构建并运行我的应用程序后,拖动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;
}
答案 0 :(得分: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以使其按预期工作
EDIT !! 哎呀我写了setInterval,我的意思是setTimeout。固定!