Правильный рендеринг HiDPI элементов Canvas (с Konva.js)?

Я создал небольшую анимацию HTML5 Canvas, используя компоненты из Konva.js. Все работает отлично, за исключением того, что размер элемента Canvas в 2 раза больше, чем я ожидал - я думаю, потому что у меня дисплей HiDPI / Retina. Конкретно элемент выглядит как

<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>

Размеры стилей - это то, что я ожидал, но значения свойств верхнего уровня width / height двойные.

Я попробовал полифилл HiDPI по адресу https://github.com/jondavidjohn/hidpi-canvas-polyfill, но хотя это делает мой элемент Canvas ожидаемого размера, кажется, что элементы Konva.js не меняют размер, и макет всех этих фигур полностью испорчен.

Итак, мне интересно, добился ли кто-нибудь хорошего поведения HiDPI с Konva.js - если да, то как, а если нет, какие-нибудь советы о том, как я могу заставить это работать? (Важно, чтобы моя анимация рендерилась одинаково на максимально возможном количестве устройств.)


person davewy    schedule 23.11.2017    source источник
comment
Я тестировал это только в Chrome в Windows - другие браузеры могут вести себя по-другому ...   -  person davewy    schedule 24.11.2017


Ответы (1)


Konva.js автоматически обрабатывает дисплей Retina. Konva увеличивает все размеры холста в два раза, чтобы автоматически получать четкий результат на устройствах HDPI. Так что вам не о чем беспокоиться.

person lavrton    schedule 24.11.2017
comment
Но мой холст занимает почти весь мой экран - 2048x1000 - на моем экране HiDPI. На моем экране он должен занимать только 1024x500 пикселей. Я понимаю, что он должен иметь эти двукратные размеры, чтобы изображение было четким, но оно должно занимать примерно половину экрана, а не весь экран. Могу ли я сделать какое-то масштабирование? - person davewy; 24.11.2017
comment
@davewy Вы уверены, что он занимает размер 2048x1000? Как я вижу, у холста правильные стили: width: 1024px; height: 500px; - person lavrton; 24.11.2017
comment
Оказалось, что машина, на которой я тестировал, имела глобальный коэффициент масштабирования, примененный в настройках ОС, из-за чего весь контент отображался с 2-кратным размером. Значит, Конва ведет себя как надо. Большое спасибо за отличную библиотеку! :) - person davewy; 03.12.2017