围绕特定点而不是中心旋转 View/Image (React Native)

Question

我试图在 React Native 中围绕某个点而不是中心旋转视图（就像 css 中的 transform-origin）。此时元素只能绕中心旋转。结果应该是两个 views/images 包含一个恰好在这一点上彼此重叠的点，而其中一个视图在所需的点处旋转。 React Native 尚不支持此布局功能，因此我必须计算偏移量，然后使用 translateX 和 translateY 添加它们。

我尝试了几种方法，例如但我没有得到想要的结果。 Reacts 矩阵变换已弃用，所以最好不要使用它。我知道它必须是简单的三角函数，但我不知道。

我想首先我需要将点的位置与物体的中心进行差分，然后应用一个角度，然后呢？如果我使用在应用旋转之前计算的偏移量，我不会在所需的点获得旋转。

感谢解答！

here is an image of the problem

Answer 1

所以我终于找到了计算偏移量的方法和公式。当向对象应用角度时，所需的旋转点也会明显旋转。所以我必须做的是通过使用具有对象中心 (m) 和所需旋转点 (p) 位置的旋转矩阵来获取该点的位置（我们称之为 pRotated），如下所示：

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 旋转 alpha。

我已附上 scribble 以作进一步说明。

Answer 2

我刚刚制作了一个 withAnchorPoint 函数，使在 react-native 中更容易使用锚点进行变换。 https://github.com/sueLan/react-native-anchor-point。

你可以这样使用它：

import { withAnchorPoint } from 'react-native-anchor-point';

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0.5, y: 0 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};

<Animated.View style={[styles.blockBlue, this.getTransform()]} />

我也为它写了一篇文章。

围绕特定点而不是中心旋转 View/Image (React Native)

Rotate View/Image around specific point, not center (React Native)

math

trigonometry

transform

rotation

react-native