оптимизация производительности точек привязки с помощью перетаскивания в RaphealJS - PullRequest
Новая
       2

оптимизация производительности точек привязки с помощью перетаскивания в RaphealJS

0 голосов
/ 12 апреля 2011

У меня есть демонстрационная страница, где я смотрю на производительность около 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, привести к лучшим результатам?

1 Ответ

1 голос
/ 03 октября 2011

В настоящее время вы рассматриваете каждый круг на каждой итерации. Вы можете улучшить производительность, рассматривая меньшее количество кругов, используя технику, подобную этой.

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

По сути, создайте ограничивающие рамки для коллекций кругов. Если круг, который вы перетаскиваете, находится за пределами границ, не считайте ни одного круга внутри ограничивающей рамки. Надеюсь, это поможет.

...