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

【问题标题】：Rotate View/Image around specific point, not center (React Native)围绕特定点旋转视图/图像，而不是中心（React Native）
【发布时间】：2018-06-12 15:35:18
【问题描述】：

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

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

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

感谢您的回答！

here is an image of the problem

【问题讨论】：

标签： react-native math rotation transform trigonometry

【解决方案1】：

我刚刚创建了一个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()]} />

我还为此写了一篇文章。

【讨论】：

【解决方案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 以供进一步解释。

【讨论】：

p 和 m 代表什么？
p 是边缘点，m 是围绕对象旋转的中间点
这里的 aplha 是什么