Привет всем, я фронтенд-брат Сигуа.

Масштабирование холста — это базовая функция графического редактора. Его функция — увеличивать детали редактирования графики и уменьшать их для общего обзора. Давайте посмотрим, как Figma реализует масштабирование холста.

zoom

Используйте масштабирование, чтобы указать коэффициент масштабирования холста.

Например, если масштаб равен 1 (т. е. 100%), это означает, что холст не будет масштабироваться и будет иметь исходный размер. Увеличение 2 означает, что холст увеличивается вдвое. Увеличение 0,5 означает, что размер холста увеличивается вдвое.

Увеличение холста соответствует методу ZoomIn, и значение масштабирования становится больше.

«Внутри» функции ZoomIn означает приближение камеры к сцене. Изображение больше, потому что оно ближе, что называется «больше вблизи и меньше вдали».

Масштабирование холста — это ZoomOut, и значение масштабирования становится меньше. Камера находится дальше от сцены, поэтому графика становится меньше.

Сочетания клавиш или кнопки для масштабирования холста

Обычно мы будем UI Кнопки масштабирования и увеличения холста предусмотрены в интерфейсе. Нажатие на них приведет к появлению кнопок. Возьмите центр холста в качестве центра масштабирования.,для масштабирования.

Сочетания клавиш:

• Увеличить холст：Ctrl/Command +
• Уменьшить холст：Ctrl/Command -

Я обнаружил, что Figma действительно может масштабировать напрямую с помощью + или -, но в пользовательском интерфейсе нет подсказки.

Figma В этом случае пусть Значение масштабирования попадает на несколько конкретных значений.。

const zoomLevels = [
  0.015625, 0.03125, 0.0625, 0.125, 0.25, 0.5, 
  1, 2, 4, 8, 16, 32, 64, 128, 256
]

Вы должны увидеть закономерность, это геометрическая последовательность с общим соотношением 2 и средним значением 1 (т.е. 100%). При этом 256 и 0,015625 — это еще и максимальное и минимальное значения масштабирования.

Например, текущий масштаб составляет 198 %, увеличение станет 200 %, а уменьшение – 100 %.

Вот как найти элементы массива по обе стороны от целевого значения в отсортированном массиве.

const getNearestVals = (arr, target) => {
  let left = 0;
  let right = arr.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) {
      right = mid - 1;
      left = mid + 1;
      break;
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  if (right < 0) right = 0;
  if (left >= arr.length) left = arr.length - 1;
  return [arr[right], arr[left]];
};

getNearestVals(zoomLevels, 1.98) // [1, 2]

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

Вы можете обнаружить, что масштаб пользовательского интерфейса не соответствует. Например, он должен быть 0,125, но в пользовательском интерфейсе он отображается как 13%. На самом деле округление происходит не на уровне данных, а на отображении пользовательского интерфейса.

Если вы хотите получить реальное значение масштабирования, вы можете получить его через свойство Figma.viewport.zoom API плагина Figma.

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

Масштабирование колесика мыши

Figma Он также поддерживает масштабирование с помощью колеса прокрутки и будет На основе коэффициента масштабирования ZoomRatio и масштабирование, используя позицию курсора в качестве центра масштабирования.。

Удерживая нажатой клавишу Ctrl или Command, переместите колесо прокрутки вперед, чтобы увеличить масштаб, и назад, чтобы уменьшить масштаб.

// Коэффициент масштабирования
const zoomRatio = 1.23
// Увеличить холст
zoom * zoomRatio
// Уменьшить холст
zoom / zoomRatio

zoomRatio Это не написано до смерти, и Чувствительность колеса мыши связанный.

(Ниже Windows настраивать Чувствительность колеса мышииз Способ）

Чувствительность колеса мышибудет реагироватьприезжать WheelEvent Объект события колеса deltaY включено, тем выше чувствительность, при каждой прокрутке deltaY Чем больше.

Нам нужно определить функцию: передать deltaY и получить коэффициент масштабирования ZoomRatio.

Возвращаемое значение этой функции находится в диапазоне от 0 до 2, а соотношение логарифмическое, то есть чем больше x, тем более плавное значение y.

Кстати, трекпад Mac не является обычным устройством ввода, поэтому на него не распространяется стандарт событий колеса.

Однако операция масштабирования сенсорной панели будет преобразована в поведение колеса прокрутки Ctrl + колесо прокрутки в браузере. Вы также можете получить deltaY, но значение очень маленькое, поэтому вы увидите, что его диапазон масштабирования отличается от этого. колеса прокрутки.

другой

Figma также поддерживает операции масштабирования.

• Введите новое значение масштаба в поле ввода и нажмите Enter, чтобы применить его;
• Увеличение составляет 50%/100%/200%. Некоторые часто используемые значения масштабирования, среди которых наиболее часто используется 100%, также называемые «масштабированием до исходного размера»;
• Увеличьте масштаб по размеру холста, чтобы сразу увидеть всю графику. При первом открытии рисунка он также будет адаптирован к холсту, но максимальный масштаб равен 1. Вы можете понять, что его можно только уменьшить (по сравнению с первоначальными 100%), но не увеличить.
• Адаптация к выбранной графике, масштабирование выбранной графики по размеру холста. Функция предназначена для просмотра деталей указанной графики.

В Figma нет специального инструмента масштабирования холста. Вероятно, он считается ненужным и излишним. Просто используйте сочетания клавиш.

В настройках есть флажок «Инвертировать направление масштабирования». Если этот флажок установлен, прокрутка вперед уменьшит значение масштаба.

окончание

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