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, но там конечно не сложно и интуитивно понятно)
  • Вопрос задан
  • 175 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 30 000 до 65 000 руб.
BSSL Москва
от 50 000 до 150 000 руб.
от 60 000 до 90 000 руб.
16 июл. 2019, в 23:23
5000 руб./за проект
16 июл. 2019, в 22:43
10000 руб./за проект