Компонент FocalPointPicker в WordPress предназначен для создания интерфейса, который позволяет выбрать главный визуальный элемент на изображении. Этот компонент полезен для предотвращения нежелательного обрезания важных областей изображения, особенно на устройствах с небольшим экраном. Выбранная пользователем точка фокуса возвращается в виде пары чисел (x и y), где значения находятся в диапазоне от 0 до 1. Эти значения могут быть легко преобразованы в свойство CSS background-position, что помогает всегда сохранять важные области изображения видимыми.
Пример:
- Выбранная точка:
{ x: 0.4, y: 0.2 } - CSS:
background-position: 40% 20%
Использование
Импортируем и инициализируем FocalPointPicker, используя React и хуки.
import { useState } from 'react';
import { FocalPointPicker } from '@wordpress/components';
const FocalPointExample = () => {
const [focalPoint, setFocalPoint] = useState({ x: 0.3, y: 0.3 });
const imageUrl = '/path/to/your-image.jpg';
const backgroundStyle = {
backgroundImage: `url(${imageUrl})`,
backgroundPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`,
height: '300px',
width: '400px',
backgroundSize: 'cover',
};
return (
<>
<FocalPointPicker
url={imageUrl}
value={focalPoint}
onDragStart={setFocalPoint}
onDrag={setFocalPoint}
onChange={setFocalPoint}
/>
<div style={backgroundStyle} />
</>
);
};
Подробное Описание Параметров
1. url
- Тип: Строка
- Обязательный: Да
- Описание: URL изображения или видео, для которого выбирается точка фокуса.
url="https://example.com/image.jpg"
2. value
- Тип: Объект
- Обязательный: Да
- Описание: Координаты точки фокуса. Объект должен содержать ключи
xиy, где значения варьируются от 0 до 1.
value={{ x: 0.6, y: 0.4 }}
3. onChange
- Тип: Функция
- Обязательный: Да
- Описание: Колбэк, вызываемый при изменении точки фокуса. Получает объект с новыми координатами
xиy.
onChange={(newFocalPoint) => setFocalPoint(newFocalPoint)}
4. onDrag
- Тип: Функция
- Обязательный: Нет
- Описание: Колбэк, вызываемый во время перетаскивания точки фокуса. Полезен для динамического отслеживания координат в процессе изменения.
onDrag={(draggingPoint) => console.log(draggingPoint)}
5. onDragStart
- Тип: Функция
- Обязательный: Нет
- Описание: Колбэк, вызываемый при начале перетаскивания точки фокуса.
onDragStart={() => console.log('Dragging started')}
6. onDragEnd
- Тип: Функция
- Обязательный: Нет
- Описание: Колбэк, вызываемый в конце перетаскивания точки фокуса. Полезен для выполнения действий после завершения выбора фокуса.
onDragEnd={() => console.log('Dragging ended')}
7. resolvePoint
- Тип: Функция
- Обязательный: Нет
- Описание: Функция, вызываемая перед обновлением состояния. Получает текущее значение фокуса и может вернуть изменённое значение, чтобы скорректировать выбор пользователя.
resolvePoint={(currentPoint) => ({ x: currentPoint.x, y: Math.min(currentPoint.y, 0.8) })}
8. autoPlay
- Тип: Булевый
- Обязательный: Нет
- Значение по умолчанию:
true - Описание: Управляет автозапуском видео. Применимо только при использовании видео в качестве источника.
autoPlay={false}
9. __next40pxDefaultSize
- Тип: Булевый
- Обязательный: Нет
- Значение по умолчанию:
false - Описание: Экспериментальный параметр для удаления внешних отступов по умолчанию.
__next40pxDefaultSize={true}
10. __nextHasNoMarginBottom
- Тип: Булевый
- Обязательный: Нет
- Значение по умолчанию:
false - Описание: Экспериментальный параметр, устраняющий нижний отступ.
__nextHasNoMarginBottom={true}
Пример: Интеграция FocalPointPicker в Интерфейс с Настраиваемыми Параметрами
Следующий пример демонстрирует, как можно использовать FocalPointPicker для создания настраиваемого интерфейса с дополнительными параметрами:
import { useState } from 'react';
import { FocalPointPicker } from '@wordpress/components';
const CustomFocalPoint = () => {
const [ focalPoint, setFocalPoint ] = useState({ x: 0.3, y: 0.7 });
const imageUrl = 'https://example.com/sample-image.jpg';
const style = {
backgroundImage: `url(${imageUrl})`,
backgroundPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`,
backgroundSize: 'cover',
height: '250px',
width: '100%',
marginBottom: '20px',
};
return (
<>
<FocalPointPicker
url={imageUrl}
value={focalPoint}
onDragStart={() => console.log('Start dragging')}
onDrag={(point) => setFocalPoint(point)}
onChange={(newPoint) => setFocalPoint(newPoint)}
onDragEnd={() => console.log('Drag ended')}
resolvePoint={(point) => ({ x: Math.max(point.x, 0.2), y: point.y })}
autoPlay={true}
__next40pxDefaultSize={true}
__nextHasNoMarginBottom={true}
/>
<div style={style}></div>
</>
);
};
В этом примере мы создаем интерфейс с обработкой события onDragEnd и дополнительной функцией resolvePoint, которая ограничивает минимальное значение координаты x до 0.2.
Заключение
Компонент FocalPointPicker — Это отличный инструмент в WordPress для создания интерфейса, который позволяет выбрать главный визуальный элемент на изображении. Используйте его в своих проектах для улучшения UX.