thehighhomie
@thehighhomie

Удерживать один прямоугольник в границах другого, с одинаковым углом поворота?

С помощью каких вычислений можно удерживать один прямоугольник (назовем его target) в границах другого (назовем его targetBounds)?

Оба прямоугольника находятся в одной системе координат.

Прямоугольники могут иметь разную ширину и высоту, но угол всегда один.

Target может перемещаться и масштабироваться, но не должен выходит за границы targetBounds

Если угол равен 0 то я без проблем могу зафиксировать target в границах targetBounds
К примеру если при перемещении target, его x или y меньше чем у targetBounds, то target я задаю x/y как у targetBounds. Когда угол равен 0 - все просто.
5c987b3ce003a928154268.jpeg

Но когда объекты имеют угол < 0 или > 0, то я не могу зафиксировать target в границах targetBounds
5c98812ab2ee7148409288.jpeg

Я создал песочницу с примером: https://codesandbox.io/s/k970vyv415

При двойном клике на изображение, создается красный прямоугольник и накладывается на изображение. Его можно масштабировать и перемещать. Если у картинки угол равен 0 то красный прямоугольник не выходит за границы картинки, но если картинку сначала повернуть, а потом открыть кроп, то проверки уже не правильно работают, это видно, когда перемещаешь красный прямоугольник.

Пример в песочнице на vuejs + fabricjs, но весь код, который отвечает за эту задачу находится в src/canvas/addons/crop и там только javascript (конечно вместе с fabricjs, но там конечно не сложно и интуитивно понятно)
  • Вопрос задан
  • 180 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы