我有一个演示页面,我正在查看对象在被拖动时应该捕捉的大约300个点的性能。
http://jsfiddle.net/digiguru/rVFje/
我通过在启动拖动时将每个“捕捉”点的边界加载到4个数组中来优化它。
var circleT = [];
var circleR = [];
var circleB = [];
var circleL = [];
var start = function (event) {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
var threshold = 15;
for (var myCircle in circles) {
circleT[myCircle] = circles[myCircle].attr("cy") - threshold;
circleR[myCircle] = circles[myCircle].attr("cx") + threshold;
circleB[myCircle] = circles[myCircle].attr("cy") + threshold;
circleL[myCircle] = circles[myCircle].attr("cx") - threshold;
}
circle.animate({ r: 20,fill: "#319F40", "stroke-width": 1 }, 200);
},
然后在移动事件中,我们使用以下内容计算每个捕捉点的拖动对象......
move = function (mx, my) {
var inrange = false;
var mouseCX = this.ox + mx;
var mouseCY = this.oy + my;
var lockX = 0;
var lockY = 0;
for (var myCircle in circles) {
if ((circleT[myCircle] < mouseCY
&& circleB[myCircle] > mouseCY )
&& (circleR[myCircle] > mouseCX
&& circleL[myCircle] < mouseCX )) {
inrange = true;
lockX = circles[myCircle].attr("cx");
lockY = circles[myCircle].attr("cy");
}
}
if (inrange) {
this.attr({
cx: lockX ,
cy: lockY
});
} else {
this.attr({
cx: mouseCX ,
cy: mouseCY
});
}
},
一般来说,性能很好,但你可以注意到稍微老一点的IE浏览器(IE8及以下版本)上的帧丢失。是否存在提高性能的忍者方法?也许我可以改进4 if语句?会使用另一个javascript库,比如处理JS会更好吗?
答案 0 :(得分:1)
目前您考虑每次迭代的每个圆圈。您可以通过使用与此类似的技术考虑更少的圆圈来提高性能。
http://en.wikipedia.org/wiki/Quadtree
基本上,为圆圈集合创建边界框。如果您拖动的圆圈超出界限,则不考虑边界框内的任何圆圈。我希望这有帮助。