paper.js 경로를 백그라운드에서 비 인터랙티브 픽셀로 두십시오.

Question

작은 무작위 점으로 배경을 천천히 그림에 그려주는 작은 프로그램이 있습니다. 문제는 애니메이션의 초기에 이러한 점들을 나타내는 너무 많은 심볼 객체가 지연되기 시작한다는 것입니다. 나는 모든 상징이 같은 원 경로를 기반으로함으로써 가능한 한 가볍게 만들었다. 대신에 동일한 경로에있는 모든 원을 기반으로하는 대신 새 경로를 사용하면 지연이 훨씬 더 일찍 시작됩니다.

정규 js 캔버스를 사용하여 모양을 그렸을 때 시스템에 더 이상 신경을 쓰지 않을 것임을 기억합니다. 난 (캔버스 절대 위치) 뒤에 별도의 캔버스를 시도했지만 크기 조정에 문제가 있습니다. 나는 paper.js 초기화가 양쪽 canvases의 크기와 함께한다고 생각한다.

일반 캔버스 JS와 마찬가지로 경로를 그립니다. 그런 다음 캔버스가이를 잊어 버리고 배경에 두도록 할 수 있습니까? 그렇지 않은 경우 누구에게 문제 해결 방법에 대한 아이디어가 있습니까?

감사

Answer 1

는 당신이 생성 할 점을 모두 포함하는 Group을 사용합니다. 각 프레임 후에 그룹을 이전 프레임과 함께 래스터 화 한 다음 group.remove()을 호출하십시오. 예를 들면 :

var raster = new Raster(); 

function onFrame(event){ 
    var raster2; 
    var group = new Group(); 

    // add the previous frame 
    group.appendBottom(raster); 

    var path; 
    for(i = 0; i < 70; i++){ 
     path = new Path.Circle({ 
      center: view.size * Point.random(), 
      radius: 20, 
      fillColor: new Color(Math.random(), Math.random(), Math.random(), Math.random()) 
     }); 
     group.appendTop(path); 
    } 
    raster2 = group.rasterize(); 
    group.remove(); 
    raster = raster2; 
} 

Here it is on sketch.paperjs.org.