Я делаю редактор в React. Элементы холста генерируются с использованием HTML. Я добавил функцию для перемещения вокруг холста, используя Transform Translate. Теперь я не могу выяснить, как добавить ограничение, если пользователь прокрутился на границу холста, теперь он может прокручивать бесконечно. Размер самого холста всегда составляет 1920 на 1080 (почти всегда больше, чем родительский Div). < /P>
Вот код для движения и мои попытки добавить ограничение + jsx markup: < /p>
// drag
const [space, setSpace] = useState(false);
const [origin, setOrigin] = useState({ x: 0, y: 0 });
const [translate, setTranslate] = useState({ x: 0, y: 0 });
useEffect(() => {
const scrollDown = (event: KeyboardEvent): void => {
if (event.code === 'Space') {
setSpace(true);
}
};
const scrollUp = (event: KeyboardEvent): void => {
if (event.code === 'Space') {
setSpace(false);
}
};
window.addEventListener('keydown', scrollDown);
window.addEventListener('keyup', scrollUp);
return () => {
window.removeEventListener('keydown', scrollDown);
window.removeEventListener('keyup', scrollUp);
};
}, []);
const clampTranslate =
( x: number, y: number ):
{ x: number; y: number } | false => {
const wrapper = scrollWrapperRef.current;
const canvasWrapper = canvas.current;
if (!wrapper && !canvasWrapper) return { x, y };
const rect = wrapper.getBoundingClientRect();
const canvasRect = canvasWrapper.getBoundingClientRect();
const rectMaxX = rect.left + 50; // left
const rectMinX = rect.right + 50; // right
const rectMaxY = rect.top + 50; // top
const rectMinY = rect.bottom + 50; // bottom
console.log(rectMaxX, rectMinX, rectMaxY, rectMinY, x, y, canvasRect);
if (canvasRect.right < rectMinX) {
console.log('You have gone beyond the right edge');
}
if (canvasRect.left > rectMaxX) {
console.log('You have gone beyond the left edge');
}
if (canvasRect.top > rectMaxY) {
console.log('You have gone beyond the top edge.');
}
if (canvasRect.bottom < rectMinY) {
console.log('You have gone beyond the bottom edge');
}
console.log(maxX, minX, maxY, minY);
return {
x: x,
y: y,
};
};
// trackpad
const handleWheel = (event: React.WheelEvent): void => {
setIsDragging(true);
setTranslate((prev) => {
const next = { x: prev.x - event.deltaX, y: prev.y - event.deltaY };
return clampTranslate(next.x, next.y);
});
};
const handleMouseDown = (event: React.MouseEvent): void => {
if (!space) return;
setIsDragging(true);
setOrigin({ x: event.clientX - translate.x, y: event.clientY - translate.y });
event.preventDefault();
};
const handleMouseMove = (event: React.MouseEvent): void => {
if (!space) return;
if (!isDragging) return;
const newX = event.clientX - origin.x;
const newY = event.clientY - origin.y;
setTranslate(clampTranslate(newX, newY));
};
const handleMouseUp = (): void => {
setIsDragging(false);
};
{(draft || [])?.map((item, index) => {
return (
{
handleLayerClick(item.id);
}}
index={index}
disableDragging={isDragging}
/>
);
})}
;
< /code>
В функции Clamptranslate я могу использовать координаты родительского Div и Canvas, чтобы выяснить, пересекла ли пользователь границу, но я не могу понять, как ограничить движение. Если я добавлю вернуть ложь, движение будет заблокировано.
Подробнее здесь: https://stackoverflow.com/questions/796 ... -translate
