Вы можете задать точку фокуса, чтобы важные части изображения не обрезались. Точки фокуса особенно полезны при работе с адаптивными макетами, когда одно изображение может отображаться в нескольких размерах.
Точки фокуса для фоновых изображений
Ограничения при работе с точками фокуса
- Тип масштабирования изображения. Свойство "Масштаб" должно иметь значение Кадрировать или Нет.
- Тип источника изображения. Источник должен быть локальным и не может быть внешним URL.
- Динамические объявления. Точки фокуса не поддерживаются в динамических объявлениях.
- Анимация. Точки фокуса не поддерживают анимацию. Если при анимации изменяются размеры изображения, то заданная точка фокуса будет применяться к его исходному варианту.
Если вы включите точку фокуса, то параметры выравнивания учитываться не будут.
Настройка точки фокуса
- Откройте диалоговое окно Изменить точку фокуса изображения. Для этого выполните одно из следующих действий:
- Выберите изображение в рабочей области, а затем на панели Свойства поставьте флажок Включить точку фокуса.
- Нажмите правой кнопкой мыши на изображение и в контекстном меню выберите Задать точку фокуса.
- Перетащите точку фокуса в нужное место.
- По умолчанию точка фокуса устанавливается в центре изображения.
- Элемент управления точкой фокуса выглядит как белый круг, который легко увидеть и нажать. Фактическая точка фокуса находится на пересечении линий в центре круга.
- С помощью клавиш со стрелками точку фокуса можно перемещать с шагом в один пиксель.
- Чтобы вернуть точку фокуса в центр изображения, нажмите на изображение правой кнопкой мыши и в контекстном меню выберите Сбросить настройки или нажмите Ctrl+R (Windows) или ⌘+R (Mac).
- Переключитесь на вкладку Предварительный просмотр, чтобы увидеть, как точка фокуса влияет на кадрирование изображения при разных соотношениях сторон.
- Нажмите ОК.
Если вы измените источник изображения, Google Web Designer предложит оставить, отредактировать или отменить настройки точки фокуса.
Изменение точки фокуса
Ранее настроенное положение точки фокуса можно изменить.
- Откройте диалоговое окно Изменить точку фокуса изображения. Для этого выполните одно из следующих действий:
- Нажмите правой кнопкой мыши на изображение и в контекстном меню выберите Изменить точку фокуса.
- Выберите изображение и нажмите кнопку Задать положение точки фокуса
возле флажка Включить точку фокуса на панели "Свойства".
- Перетащите точку фокуса в новое место.
- Нажмите ОК.
Включение и отключение точки фокуса
Вы можете отключить точку фокуса, чтобы посмотреть, как изображение будет выглядеть, если использовать выравнивание. Если вы повторно включите точку фокуса, Google Web Designer применит ее предыдущее положение.
Чтобы включить или отключить точку фокуса, выполните одно из следующих действий:
- Установите или снимите флажок Включить точку фокуса на панели "Свойства".
- Нажмите правой кнопкой мыши на изображение и в контекстном меню выберите Включить точку фокуса или Отключить точку фокуса.
Удаление точки фокуса
- Нажмите правой кнопкой мыши на изображение.
- В контекстном меню выберите Удалить точку фокуса.
Замена изображения с точкой фокуса
Выбрав функцию Поменять изображение или изменив источник изображения, для которого включена точка фокуса, вы можете оставить такую же точку фокуса, отредактировать или удалить ее.
Точки фокуса и правила обработки мультимедиа
Нельзя изменять положение точки фокуса с помощью правил обработки мультимедиа. Если нужно показывать разные изображения в зависимости от размера области просмотра, но нельзя использовать для них одну и ту же точку фокуса, вы можете добавить оба изображения в документ, а затем с помощью правил обработки мультимедиа уменьшить прозрачность каждого изображения до 0 для тех размеров области просмотра, при которых их не должно быть видно.
Точки фокуса в режиме просмотра кода
В режиме просмотра кода координаты точки фокуса задаются в атрибуте focalpoint элемента gwd-image. Примеры:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>