Question

我有一个演示页面，我正在查看对象在被拖动时应该捕捉的大约300个点的性能。

我通过在启动拖动时将每个“捕捉”点的边界加载到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

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

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

1 个答案: