Адаптивный холст с заданным соотношением сторон - PullRequest
Новая
       24

Адаптивный холст с заданным соотношением сторон

0 голосов
/ 08 мая 2020

Я разрабатываю приложение для рисования и столкнулся с проблемой, которую пытался решить, но пока не нашел надежного решения:

Эскизы имеют исходное разрешение 1280 x 720, и я хотел бы изменить размер холста при открытии страницы до максимально возможного размера (с учетом размеров экрана без панели инструментов, которую я разместил в верхней части страницы), сохраняя соотношение сторон 1280 x 720 . Холст должен быть отцентрирован на экране, а все остальное будут покрыты черными полосами: когда отношение размеров окна браузера меньше исходного отношения ш / в эскиза, будут горизонтальные черные полосы (рис. 1 ). , а когда он больше, вертикальные черные полосы (рис. 2 ).

Я пробовал использовать javascript, применяя к холсту offsetWidth и offsetHeight элемента div, содержащего вспомогательный невидимый объект. изображение, которое я генерирую программно с исходными размерами эскиза, но не кажется надежным способом сделать это. В большинстве случаев свойства смещения не готовы, когда страница загружается, и мне приходится ждать их с помощью таймера (или наблюдателей мутаций).

Некоторые изображения того, что я пытаюсь сделать:

Я потратил много времени на эту мелочь, и она сводит меня с ума, потому что каждое решение, которое я нашел, слишком хакерское или ненадежное. Мы будем очень благодарны за любую помощь.

Я использую Angular + Ioni c 4.

1 Ответ

0 голосов
/ 08 мая 2020

Если я вас правильно понимаю, вы хотите динамически изменять размер вашего холста в зависимости от размера окна. Единственное условие состоит в том, что он должен поддерживать соотношение 1280 x 720 (1: 0,5625).

Я попытаюсь предоставить решение, которое также будет отслеживать изменение размера окна после он был загружен. Имейте в виду, что это означает, что вам нужно будет перерисовать оттуда все на холсте.

HTML

<body>
  <canvas id="canvas"></canvas>
</body>

CSS

body {
  background-color: black;
}

JavaScript: 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

startListening();

function startListening() {
  // resize the canvas every time the window is adjusted
  window.addEventListener('resize', resizeCanvas, false);
  // manually call the resizeCanvas() function as the window loads with it's starting dimensions (before a resize has happened)
  resizeCanvas();
}

function resizeCanvas() {
  // if the canvas height isn't maxed out, match it to the width of the page at the correct aspect ration (1:0.5625)
  if(canvas.height < window.innerHeight){
    canvas.width = window.innerWidth;
    canvas.height = canvas.width * 0.5625;
  }
  
  // if the canvas height is maxed out, stop widening the canvas and lock the canvas height at 0.5625 of that locked height
  if(canvas.height >= window.innerHeight){
    canvas.height = canvas.width * 0.5625;
  }
  
  // lastly, if we are shrinking the width back down, readjust both the width and height to match
  if(canvas.width > window.innerWidth){
    canvas.width = window.innerWidth;
    canvas.height = canvas.width * 0.5625;
  }
  // redraw the canvas with our newly calculated dimensions
  redraw();
}

function redraw() {
  ctx.fillStyle = "#FF0000";
  // Draw the canvas in the center of the screen at the height and width calculated above in the resizeCanvas() function
  ctx.fillRect((window.innerWidth - canvas.width) / 2, (window.innerHeight - canvas.height) / 2, canvas.width, canvas.height);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...