RaphealJS에서 끌어서 놓기를 사용하여 스냅 점의 성능 최적화

나는 끌어서 놓을 때 물체가 스냅되어야하는 약 300 포인트의 성능을보고있는 데모 페이지가 있습니다.RaphealJS에서 끌어서 놓기를 사용하여 스냅 점의 성능 최적화

내가 드래그를 시작할 때 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 이하). 성능을 향상시키는 닌자 (ninja) 방법이 있습니까? 아마도 if 문을 개선 할 수 있을까요? 더 나은 JS 결과 처리와 같은 다른 자바 스크립트 라이브러리를 사용 하시겠습니까?

출처

2011-04-12 digiguru

현재 모든 반복마다 모든 서클을 고려하십시오. 이와 유사한 기술을 사용하여 더 적은 서클을 고려하여 성능을 향상시킬 수 있습니다.

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

기본적으로, 원의 컬렉션에 대한 경계 박스를 만들 수 있습니다. 드래그하는 원이 범위를 벗어난 경우 경계 상자 내의 원을 고려하지 마십시오. 이게 도움이 되길 바란다.

출처

2011-10-03 13:43:49 bbrame

RaphealJS에서 끌어서 놓기를 사용하여 스냅 점의 성능 최적화

답변

관련 문제