KonvaJS - отзывчивый этап и toDataURL полный - PullRequest
Новая
       14

KonvaJS - отзывчивый этап и toDataURL полный

0 голосов
/ 14 января 2019

Кто-нибудь знает, как создать отзывчивую сцену (которая в основном имеет ширину 4000 пикселей, но масштабируется до ширины устройства) таким образом, чтобы все добавленные в нее изображения автоматически масштабировались с сохранением соотношения?

А при использовании функции "toDataURL" сцена загружалась в оригинальном размере (то есть всего 4000 пикселей), а также соответствовала картинкам?

Привет! * * 1005

1 Ответ

0 голосов
/ 15 января 2019

Вы можете использовать scale для этапа реализации адаптивного поведения. Все узлы (и изображения) будут масштабированы на холсте. 

function onResize() {
  const availableWidth = window.innerWidth;
  const availableHeight = window.innerHeight - 50;

  const scale = availableWidth / VIRTUAL_WIDTH;

  stage.setAttrs({
    width: availableWidth,
    height: availableHeight,
    scaleX: scale,
    scaleY: scale
  });
  stage.draw();
}

Чтобы получить исходный размер для toDataURL, вам необходимо:

1 изменить размер сцены перед экспортом в базу 64 

 const oldSize = stage.size();
 // change size into required size
 stage.size({
  width: 4000,
  height: 2000
 })

 const url = stage.toDataURL();
 // restore size
 stage.size(oldSize);

2 Или используйте специальное свойство pixelRaio, чтобы изменить размер изображения .:

// VIRTUAL_WIDTH = 4000
const pixelRatio = VIRTUAL_WIDTH / stage.width();
const url = stage.toDataURL({ pixelRatio });

https://jsbin.com/goqemewolo/3/edit?js,output

...