2017-11-23 3 views
0

Konva.js의 구성 요소를 사용하여 작은 HTML5 캔버스 애니메이션을 만들었습니다. 캔버스 요소가 2 배 크기라는 점을 제외하면 모든 것이 훌륭하게 작동합니다. HiDPI/Retina 디스플레이가 있기 때문에 생각합니다. 특히 요소는 다음과 같습니다.Canvas 요소의 적절한 HiDPI 렌더링 (Konva.js 사용)?

<canvas width="2048" height="1000" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1024px; height: 500px;"></canvas> 

스타일 크기는 예상하고 있지만 최상위 너비/높이 속성 값은 두 배입니다.

https://github.com/jondavidjohn/hidpi-canvas-polyfill에서 HiDPI polyfill을 시도했지만 이것이 내 Canvas 요소의 예상 크기가되지만 Konva.js 요소는 크기가 조정되지 않은 것으로 보이며 모든 모양의 레이아웃이 완전히 엉망이됩니다.

누구나 Konva.js에서 좋은 HiDPI 동작을 얻었는지 궁금합니다. 그렇다면 어떻게, 어떻게, 그리고 그렇지 않으면, 어떻게 작동시킬 수 있을지에 대한 조언이 있습니까? (가능한 한 많은 장치에서 내 애니메이션을 렌더링하는 것이 중요합니다.)

+0

Windows 용 Chrome에서만 테스트했는데 다른 브라우저는 다르게 동작 할 수 있습니다 ... – davewy

답변

1

Konva.js은 자동으로 망막 디스플레이를 처리합니다. Konva은 모든 캔버스 크기를 두 배 더 크게하여 HDPI 장치에서 자동으로 선명한 결과를 얻습니다. 따라서 걱정할 필요가 없습니다.

+0

하지만 내 캔버스가 내 전체 화면 (2048x1000)을 내 HiDPI 화면에서 차지합니다. 내 화면에서 1024x500 크기를 차지해야합니다. 그것은 날카로운 물건을 유지하기 위해 그 2x 치수를 가져야한다, 이해한다. 그러나 그것은 나의 스크린의 전체가 아니라, 나의 스크린의 약 절반을 차지해야한다. 내가 할 수있는 스케일링이 있습니까? – davewy

+0

@davewy 2048x1000 크기가 맞습니까? 캔버스의 스타일은 다음과 같습니다. 'width : 1024px; height : 500px;' – lavrton

+0

OS 설정에서 전역 배율 인수가 적용되어 테스트 한 컴퓨터가 밝혀졌습니다. 이로 인해 모든 콘텐츠가 2 배 크기로 렌더링됩니다. 그래서 콘바는 완벽하게 행동해야합니다. 훌륭한 도서관에 많은 감사를드립니다! :) – davewy