React-konva получение координат точек многоугольника при зуме
Вопрос такой. Приложение добавляет многоугольники. Каждый проходит валидацию, на предмет того, что каждый должен лежать внутри серого многоугольника и не должны пересекаться друг с другом. Приложение работает верно пока, не использую зум или драг по сцене. Проблема в getAbsoluteTransform() внутри getNewPoints. Так как при зуме отрабатывает не корректно. Использовал сначала getTransform, но потом пришлось объединить в группы ряды, а для элементов внутри групп getTransform не возвращает текущее положение. Подскажите как поправить проблему.
Ссылка на демо https://codesandbox.io/s/wonderful-tree-49utnt?file=/src/Editor.tsx
Ответы (1 шт):
Подсчеты не правильны, так как вы сравниваете точки в разных координатных системах:
checkPolygonInsidePolygon(getNewPoints(line), pointsWalls)
pointsWalls - используется как локальные координаты, в то время как getNewPoints(line) это обсолютные координаты (с учётом scale и смещения stage).
Нужно приводить всё в единую систему координат. Проще всего работать с локальными координатами, не обращая внимания на трансформации stage. Вариантов решения очень много. Можно передать любого родителя, например stage или mainGroup, в функцию getAbsoluteTransform. Тогда будут подсчитаны координаты, относительно переданного контейнера.
const transform = elem.getAbsoluteTransform(mainGroup.current);
https://codesandbox.io/s/confident-shape-xuc7v8?file=/src/Editor.tsx:3413-3476
P.S. Лучше вообще не использовать эти методы из Konva. Вся информация о координатах и положении фигур должна находится в состоянии приложения. Из состояния можно вычислить всё необходимые данные.