在 RaphealJS 中使用拖放来优化捕捉点的性能

Question

我有一个演示页面，我正在其中查看对象被拖动时应捕捉到的大约 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）会产生更好的结果吗？

Answer 1

目前，您在每次迭代时都会考虑每个圆。您可以使用与此类似的技术考虑更少的圆圈来提高性能。

http://en.wikipedia.org/wiki/Quadtree

基本上，为集合创建边界框界。如果您拖动的圆圈超出边界，则不要考虑边界框内的任何圆圈。我希望这有帮助。