여러 임의의 선 그리기가 고가입니다. EaselJS

Question

저는 행성/중력 시뮬레이터처럼 보이는 EaselJS를 사용하여 HTML5 2D "게임"을 프로그래밍하고 있으며 행성의 운동/궤도를 그것이 움직일 때 각 행성을 따라 간다.

문제는 다음과 같습니다 : 나는 모든에서 선을 작성하는 경우 (비싼있는 모든 틱에서 라인을 많이 그리기 때문에) 캔버스가 완전히 천천히가는 눈금, 그래서 여기에 빠른 GIF 데모입니다 루프 사이에 250ms 간격으로 비싼 코드를 setInterval으로 옮겼습니다. 모양이 많으면 루프 당 많은 선이 생기기 때문에 문제가 지속됩니다. 또한 각 루프 사이에 시간을 더 추가하면 결과가 보입니다 ... Minecraft-ish.

나는 모든 루프에 라인을 많이 만들어 포함됩니다 내가 생각할 수있는 모든 이후이 문제를 해결하는 방법에 대한 어떤 생각을 가지고 있지 않습니다. 나는 캐쉬를 사용해 보았지만이 작은 선들을 캐시하면 캐쉬 된 마지막 이미지에서 사라지기 때문에 문제는 라인을 업데이트하는 것이 아니라 새 것을 만드는 것이므로 캐싱은 아무 것도하지 않을 것이라고 생각한다.

setInterval(function() { 
    allObjs.forEach(function(obj1) { 
     if (typeof obj1.xpast !== "undefined" || typeof obj1.ypast !== "undefined") { 
      var trail = new createjs.Shape(); 
      trail.graphics.s("#fff").ss(1, "round").moveTo(obj1.xpast + .5, obj1.ypast + .5).lineTo(obj1.x + .5, obj1.y + .5); 
      trail.alpha = 0.25; 
      stage.addChild(trail); 
      setTimeout(function() { 
       createjs.Tween.get(trail).to({ 
        alpha: 0 
       }, 1000).call(function() { 
        stage.removeChild(trail); 
       }); 
      }, 10000); 
     } 
     obj1.xpast = obj1.x; 
     obj1.ypast = obj1.y; 
    }); 
}, 750); 

불행히도, 난 그 순간에 JSFiddle에 내 코드를 삽입 할 수 없습니다

다음은 관련 코드입니다.

Answer 1

캔버스를 각 프레임에 다시 그릴 때 (변경 내용을 반영하여 캔버스를 지울 때) 벡터 선이 매우 빠르게 추가됩니다. 그래픽 명령은 각 프레임마다 다시 그려지기 때문입니다. 캔버스에있는 벡터는 하드웨어 가속이 아니므로이 방법을 사용하면 많은 선으로 접근 할 때 속도가 매우 느려집니다.

최상의 방법은 벡터를 캐시 한 다음 새로운 것을 그리는 것입니다. 캐시 할 때 새로운 캔버스 요소가 장면 뒤에 만들어져 실제 그래픽 대신 사용됩니다. 즉, 성능을 변경하지 않고도 원하는만큼 복잡하게 만들 수 있습니다.

• 캐시 당신이 필요합니다 크기의 모양 (아마 캔버스 크기?)
• 는 프레임
• 업데이트 캐시의 새 그래픽을 그리기 (기존 캐시에 그래픽의 내용을 그립니다)
• 지우기 GitHub의에서이 예제가 다음에

에 대한 그래픽 :

은 16,
• http://createjs.com/Demos/EaselJS/Cache_update.html는
• http://createjs.com/Demos/EaselJS/CurveTo.html이 도움이

희망 (비 청산 단계를 사용하여 유사한 접근 방식을 보여줍니다) (행동 updateCache를 보여줍니다)!