paper js 예제

이 아름다운 사운드 시각화 도우미는 Paper.js와 HTML5 오디오 API를 결합합니다. 다음 예제에서는 여러 그리기 도구를 만들고 간단한 UI를 사용하여 여러 도구를 전환하는 것이 얼마나 쉬운지 보여 줍니다.이 경우 한 도구 또는 다른 도구를 활성화하는 두 개의 HTML 링크만 있습니다. 글로벌 범위에 속합니다. 이 작업은 수동으로 수행할 수 있으며 프로젝트, 보기 및 도구가 하나만 있는 한 잘 작동합니다. 그러나 이러한 배수로 활성 참조(프로젝트, 보기 및 도구)에 대한 전역 참조는 최신 상태로 유지되지 않습니다. 이러한 참조가 동기화 유지되도록 내부적으로 일부 자바 스크립트 속임수를 수행하는 방법이 있습니다: paper.install (창). 이 것을 통해 위의 예제의 코드를 다시 작성할 수 있습니다. 이러한 특성은 PaperScript 태그에서 지원됩니다: keepalive=”true”: 배터리 전원 및 CPU 사용량을 절약하기 위해 Paper.js는 일반적으로 창에 초점을 맞추지 않을 때 모든 애니메이션 이벤트를 중지합니다. 창이 배경에 있더라도 애니메이션을 계속 재생하려면 캔버스 태그에 keepalive=”true”를 설정합니다. 그리고 다시 유효성 검사를 위해 데이터 페이퍼 키살 =”true”도 작동합니다. 이 Google DevArt 우승자는 Paper.js와 바디 트래킹을 멋진 방법으로 결합합니다.

Four Square는 Paper.js를 사용하여 사용자가 체크인 기록을 시각적으로 재현할 수 있도록 합니다. Paper.js는 캔버스 태그: src=”URL”: PaperScript 코드를 로드하는 URL에 속성을 추가하여 몇 가지 다른 방법으로 구성할 수 있습니다. 가장 쉬운 방법은 기존 종이 객체를 사용하고 paperScope.setup(캔버스) 메서드를 사용하여 빈 프로젝트와 뷰를 초기화하는 것입니다. 우리는 자바 스크립트에서 직접 작업 할 때 추가로 필요한 것을 확인하기 위해 Paper.js작업에서 예제를 다시 사용 : hidpi = „off”: 기본적으로 Paper.js는 고유 해상도와 일치하도록 Hi-DPI (망막) 화면의 고해상도 캔버스로 렌더링하고, 모든 추가 변환을 투명하게 처리합니다. 메모리 사용 공간이 부족하거나 렌더링 성능이 높은 경우와 같은 이 동작을 원하지 않는 경우 캔버스 태그에 hidpi=”off”를 설정하여 해제할 수 있습니다.