Question

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

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

我认为首先我需要从物体中心衍射点的位置，然后应用一个角度，然后呢？如果我使用在应用旋转之前计算的偏移量，我不会在期望的点处获得旋转。

感谢您的回答！

here is an image of the problem

Answer 1

我刚刚制作了一个withAnchorPoint函数，以使在本机操作中使用锚点的转换更加容易。 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()]} />

我也为此写了一篇文章。

Answer 2

所以我终于找到了计算偏移量的方法和公式。当向物体施加角度时，期望的旋转点也明显地旋转。所以我要做的就是通过使用旋转矩阵来获取这一点的位置（让我们称之为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周围按alpha旋转。

我已附上scribble作进一步解释。

围绕特定点旋转视图/图像，而不是居中（React Native）

2 个答案: