느린 캔버스 요소

Question

캔버스 요소를 사용하여 한 요소에서 다른 요소로 선을 그립니다. 다른 요소는 드래그 가능하며 요소를 끌 때 선은 드래그 가능한 요소 다음에옵니다.

내 문제는 렌더링 (맥 파워 북에 FX는 3.5) 천천히 apears 나는 약간의 성능 정보를 제공 할 수 있습니다 캔버스 경험

누구나 전에 캔버스에 훨씬 더 나은 성능을 보았다 생각 이다? 다음 방법을 끌기에 이벤트라고

사전에

감사합니다,

// Runs when the element is dragged. 
function onDrag(key) 
{ 
    var ctx = canvas.context; 
    var fromRect = $('#box-' + key).offset(); 
    var fromHeight = $('#box-' + key).height(); 
    var fromWidth = $('#box-' + key).height(); 

    var toRect = $('#draggable').offset(); 
    var toWidth = $('#draggable').width(); 

    var startX = toRect.left + toWidth/2; 
    var startY = toRect.top + 4; 
    var endX = fromRect.left + fromWidth/2; 
    var endY = fromRect.top + fromHeight/2; 

    ctx.clearRect(0, 0, 5000, 5000); 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(endX, endY); 
    ctx.strokeStyle = "rgba(0, 0, 0,1)"; 
    ctx.stroke(); 

} 팁

감사합니다,

안부 에릭

Answer 1

I jQuery 함수 호출이 더 오래 걸릴 확률이 높습니다. 그림 그리기. 응용 프로그램에서 jQuery를 사용하지 않고도 쉽게 오프셋과 치수를 계산할 수있게되면 추가 속도를 얻을 수 있습니다.

Answer 2

수, 캐시 jQuery를 선택 :

var onDrag = (function(){ 

    var draggable = $('#draggable'), 
     ctx = canvas.context; // btw, don't you mean canvas.getContext('2d')? 

    return function(key) { 

     var box = $('#box-' + key), 
      fromRect = box.offset(), 
      fromHeight = box.height(), 
      fromWidth = box.height(), 
      toRect = draggable.offset(), 
      toWidth = draggable.width(), 
      startX = toRect.left + toWidth/2, 
      startY = toRect.top + 4, 
      endX = fromRect.left + fromWidth/2, 
      endY = fromRect.top + fromHeight/2; 

     ctx.clearRect(0, 0, 5000, 5000); 
     ctx.beginPath(); 
     ctx.moveTo(startX, startY); 
     ctx.lineTo(endX, endY); 
     ctx.strokeStyle = "rgba(0, 0, 0,1)"; 
     ctx.stroke(); 

    }; 

})(); 

---

일반 규칙 : 당신이 빠르게 연속해서 여러 번 실행하는 기능을 가지고 있다면 당신은 단지 가 절대적으로 무슨 일을하고 있는지 확인 기능을 호출 할 때마다을 작성해야합니다. 자신의 IDS에서 요소의 위치와 그 크기를 읽는 경우

Answer 3

가 병목 현상, 당신은 당신의 기능을 memoizing 시도 할 수 있습니다 :

function onDrag(key) { 
    var cached = onDrag.cache[key]; 

    if (!cached) { 
     cached = { 
      fromRect = $('#box-' + key).offset(); 
      // etc. 
     }; 

     onDrag.cache[key] = cached; 
    } 

    var toRect = $('#draggable').offset(); 
    // etc. 
} 

onDrag.cache = {}; 

이 힘가 당신에게 약간의 성능 향상을 제공합니다.

또한 큰 차이가 있는지 확인하기 위해 clearRect()을 사용해 볼 수 있습니까? 이전 드래그의 위치를 ​​저장하고 이전 행을 되돌아가 5000 x 5000 = 2500 만 픽셀을 그리는 대신 지우는 것이 좋습니다. 25M 픽셀을 채우는 것이 캔버스 구현을 기반으로하는 문제 일 수도 있고 아닐 수도 있습니다.

Answer 4

은 정말 당신이 특히 큰 표면, 최종

Answer 5

이 매우 느리게 수 있습니다 분에서 히며 closePath()을한다고 생각합니다. 대신 필요한 것을 정리하십시오.

ctx.clearRect (0, 0, 5000, 5000);