Повернуть вид / изображение вокруг определенной точки, а не по центру (React Native)

Question

Я пытаюсь повернуть вид вокруг определенной точки, а не центра (точно так же, как transform-origin в css) в React Native.В это время элементы могут вращаться только вокруг центра.Результатом должны быть два вида / изображения, содержащие точку, лежащую друг на друге именно в этой точке, в то время как один из видов поворачивается в нужной точке.React Native пока не поддерживает эту функцию макета, поэтому мне нужно вычислить смещения, а затем добавить их, используя translateX и translateY.

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

Я думаю, что сначала мне нужно определить положение точки от центра объекта, а затем применить угол,а потом?Если я использую смещение, рассчитанное до применения поворота, я не получу вращение в нужной точке.

Спасибо за ответы!

вот изображение проблемы

Answer 1

Итак, я наконец нашел способ и формуляр для вычисления смещения.Желаемая точка вращения, очевидно, также поворачивается при наложении угла на объект.Поэтому мне нужно было получить положение этой точки (назовем ее pRotated), используя матрицы вращения с позицией как центра (m) объекта, так и желаемой точки вращения (p), например:

angle = alpha * (Math.PI / 180)
pRotated.x = m.x + (p.x - m.x) * Math.cos(angle) - (p.y - m.y) * Math.sin(angle)
pRotated.y = m.y + (p.x - m.x) * Math.sin(angle) + (p.y - m.y) * Math.cos(angle)

Тогда было легко получить смещение с помощью

translateX = pRotated.x - p.x
translateY = pRotated.y - p.y

, которое затем можно просто применить к объекту, а затем повернуть его на альфа вокруг точки p.

Я приложил каракули для дальнейшего объяснения.