在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 
     }); 
    } 

},

Genrally性能還是不錯的，但你可以看到幀未落稍微老一點的IE瀏覽器（IE8及以下版本）。有沒有一種忍者的方式來提高性能？也許我可以改進4條if語句？會使用另一個JavaScript庫像處理JS yeild更好的結果？

來源

2011-04-12 digiguru

目前您在每次迭代時都會考慮每個圈子。通過使用類似於此的技術來考慮更少的圓圈，可以提高性能。

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

基本上，創建邊界框爲界的集合。如果您拖動的圓圈超出範圍，則不要考慮邊界框內的任何圓圈。我希望這有幫助。

來源

2011-10-03 13:43:49 bbrame

在RaphealJS中使用拖放操作捕捉點的性能優化

回答

相關問題