Если вы рисуете, используя код в своем приложении/веб-сайте, а размер виджета/представления/холста не всегда одинаков, это должно помочь вам сохранить его согласованность на разных размерах экрана!

Эта статья в первую очередь для меня способ быстро найти эту информацию, в конце концов, эта формула была у меня на бумаге возле моего стола. Но я хочу, чтобы он был где-нибудь в Интернете, и я подумал о том, чтобы поделиться им со всеми, так как я публикую несколько статей о том, как делать простые рисунки в Swift.

Мы будем использовать очень простой пример, чтобы было легче понять, что делают формулы.

Начнем с примера

Я сделал простую форму SVG с помощью Figma, и с этим я начал рисовать на ней код. Кроме того, моя цель состоит в том, чтобы каждая точка занимала одно и то же относительное положение на каждом устройстве, независимо от того, изменяется размер моего экрана или нет.

Хорошо. Наше изображение 5x5 (ширина x высота), и самая первая точка нашего SVG — это точка (x: 2, y: 3). Мы хотим перевести его в рамку 1000х1000 (ширина х высота).

При просмотре квадрат к квадрату легче увидеть, где находится наша точка, но как вычислить, где должна быть наша точка?

Приведенные ниже формулы для расчета того, где должны быть новые точки, с учетом исходных и новых размеров кадра и исходных точек.

  • Вл: Исходная ширина;
  • О: Исходная высота;
  • Cw: текущая ширина;
  • Канал: Текущая высота;
  • x: Исходное положение X точки;
  • y: Исходное положение Y точки;

При этом вы получите правильную относительную точку. Используя это с нашим предыдущим примером, мы можем вычислить точки:

From frame (5 x 5) to frame (1000 x 1000)
Original point at (x: 2, y: 3)
XPoint(2) = x * Cw / Ow = 2 * 1000 / 5 = 400
YPoint(3) = y * Ch / Oh = 3 * 1000 / 5 = 600

При этом мы знаем, что наша точка должна быть в (x: 400, y: 600). Следующие графики предназначены для сравнения, первый — это исходная точка с исходным размером кадра, а второе изображение — это новый размер кадра с точкой, которую мы только что вычислили:

Хороший! Мы поняли. Теперь, если мы хотим преобразовать его в другие размеры (например, 200x300 и 500x200), мы знаем, что наши точки всегда будут оставаться в определенной нами относительной точке:

Чуть выше половины высоты, чуть раньше половины ширины. Аккуратный!

Что еще?

Возможно, вы поняли, что есть данные, которые будут повторяться при их вычислении. Мы можем упростить формулу, когда у нас уже есть исходная точка и исходный размер. Начиная с нашего предыдущего примера, с точкой (x: 2, y: 3) с сеткой 5x5, мы можем предварительно вычислить:

Kx = 2/5 = 0,4 // x divided by width
Ky = 3/5 = 0,6 // y divided by height

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

Где K — константа, которую мы рассчитали выше.

Спасибо за чтение! Если вы хотите связаться со мной, пожалуйста, добавьте комментарий или отправьте мне сообщение в Twitter!

Кроме того, я не нашел никаких материалов об этом или другом имени, определяющем это. Если найдете, с удовольствием прочту!