使用枢轴点 React Native 转换 [英] React Native transforms with pivot point

问题描述

我想以 -90deg 的角度旋转 Text 组件.组件应该从左角而不是中间旋转.我正在使用以下代码:

render() {返回 (<视图样式 = {{flex : 1}}><视图样式={styles.sidebar}><Text style={styles.lblSideBar} numberOfLines = {1} >DUMMY TEXT</Text></查看></查看>);}const 样式 = StyleSheet.create({侧边栏:{弹性:1，flexDirection : '行',alignItems : 'flex-end',justifyContent : '中心',宽度 : 30,},lbl侧边栏:{底部 : 20,变换:[{旋转:'-90度'}]，}});

我想要 20px 的底部空间，但是当从中心旋转时(默认情况下)，文本在旋转后覆盖底部区域.请建议如何实现?另外 react-native 需要 pivotPoint 或 anchorPoint 或 的支持transformOrigin 以便可以轻松实现此属性.

解决方案

我刚刚创建了一个 withAnchorPoint 函数，以便在 react-native 中更轻松地使用锚点进行转换.

以下棘手的代码用于设置视图的锚点或称为枢轴点.

1. 在 x 轴、y 轴、z 轴上通过 x、y、z 平移视图
2. 应用轮换
3. 在 x 轴、y 轴、z 轴上通过 -x、-y、-z 将视图平移回来

 translateX: -w/2旋转Y翻译X:w/2

这意味着将锚点设置为 (0, 0.5).我们将它应用在这样的变换样式中

 const transform = {转换: [{translateX: -w/2},旋转Y，{translateX:w/2}]}返回 (<Animated.View style={transform}></Animated.View>)}

 translateX: w/2旋转Y翻译X:-w/2

这意味着将锚点设置为(1, 0.5)

 translateX: -w/2翻译Y:-h/2旋转Z翻译X:w/2翻译Y:h/2

这意味着将锚点设置为(0, 0)

 translateX: w/2翻译Y:h/2旋转Z翻译X:-w/2翻译X:-h/2

这意味着将锚点设置为(1, 1)

在 iOS 中，它被称为锚点.关于锚点

layer.anchorPoint = CGPointMake(0, 0)

在 Android 中，它被称为枢轴点.

 viewToMove.setPivotX(0);viewToMove.setPivotY(0);

I want to rotate a Text component with an angle of -90deg. The component should be rotated from the left corner instead of middle. I am using below codes:

render() {
     return (
            <View style = {{flex : 1}}>
                <View style={styles.sidebar}>
                    <Text style={styles.lblSideBar} numberOfLines = {1} >DUMMY TEXT</Text>
                </View>
            </View>);
}

const styles = StyleSheet.create({
  sidebar : {
    flex : 1,
    flexDirection : 'row',
    alignItems : 'flex-end',
    justifyContent : 'center',
    width : 30,
  },
  lblSideBar : {
      bottom : 20,
      transform : [{rotate : '-90deg'}],
  }
});

I want the bottom space of 20px, but as rotation is happening from center(by default) the text is covering the bottom area after rotation. Please suggest how to achieve that? Also react-native needs the support of pivotPoint or anchorPoint or transformOrigin so that this property can be achieved easily.

解决方案

I just made a withAnchorPoint function to make transform working with anchor point easier in react-native. https://github.com/sueLan/react-native-anchor-point.

You can use it like this:

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()]} />

I also wrote an article for it.

The following tricky codes are to set the anchor point or called pivot point of a view.

1. translate the view by x, y, z on the x-axis, y-axis, z-axis
2. apply rotation
3. translate the view back by -x, -y, -z on the x-axis, y-axis, z-axis

          translateX: -w / 2
          rotateY
          translateX: w / 2

This means setting the anchor point as (0, 0.5). We apply it in the transform style like this

   const transform = {
      transform: [
          {translateX: -w / 2}, 
          rotateY, 
          {translateX: w / 2}
      ]
    }
    return (   
        <Animated.View style={transform}></Animated.View>
    )
  }

          translateX: w / 2
          rotateY
          translateX: -w / 2

This means setting the anchor point as (1, 0.5)

          translateX: -w / 2
          translateY: -h / 2
          rotateZ
          translateX: w / 2
          translateY: h / 2

This means setting the anchor point as (0, 0)

          translateX: w / 2
          translateY: h / 2
          rotateZ
          translateX: -w / 2
          translateX: -h / 2

This means setting the anchor point as (1, 1)

In iOS, it is called anchor point. About the anchorPoint

layer.anchorPoint = CGPointMake(0, 0)

In Android, it is called pivot point.

  viewToMove.setPivotX(0);
  viewToMove.setPivotY(0);

这篇关于使用枢轴点 React Native 转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！