如何在正方形中显示图像的特定部分

Question

我在 React Native 中遇到图像组件问题。我想在某个正方形中显示图像的特定部分。 F.e:

比方说，我的图像分辨率为：1280x720

private someImage = require('../Assets/someImage.jpg');

我想在正方形组件中显示此图像（具有恒定大小）

<View style={{width: 64, height: 64}}>
   <Image source={this.someImage}
          style={{position: 'absolute', top: 0, left: 0 }} />
</View>

第一个问题来了：图像超出正方形。 如何只显示部分图片（但使用原始分辨率）。

第二个问题是：有没有办法显示我图像的特定片段？那是男人，如果我设置顶部：-64，左侧：-64 我希望看到原始图像沿对角线移动大约 64 个像素。

Answer 1

尝试在 react-native 中对图像使用 resizeMode 道具，您可以使用 ('cover'、'contain'、'stretch'、'repeat'、'center') 道具还有：-

<View>

 <Image source={require: ('your path')} resizeMode={'contain'}} />

</View>

参考 link:- https://facebook.github.io/react-native/docs/image.html#resizemode

Answer 2

要以全分辨率显示您的图像但只显示您选择的部分，您需要在固定大小的容器中显示图像。此图像还需要是样式属性中的背景图像。

<View style={{background-image: this.someImage, background-position-x: -64px, background-position-y: -64px}}>

Answer 3

将“overflow:'hidden'”提供给父视图对我也有效。 Resize-mode:contain 将不起作用，因为它会调整您的图像大小以完全适合 64x64 容器，而不是您在这种情况下想要的。

        <View style={{width: 64, height: 64, overflow: 'hidden'}}>
          <Image
            source={{uri: 'https://picsum.photos/200/300'}}
            style={{
              height: 200,
              width: 200,
              top: -50,
              left: -70,
            }}
          />
        </View>

Answer 4

杰罗斯劳。这可能对你有帮助。

const someImage = require('../Assets/someImage.jpg');

class ImageClip extends Components {
  ...
    render() {
        return (
          ...
            <View style={{ width: 64, height: 64, overflow: 'hidden' }}> // width and height of image you want display.
                <Image
                    source={someImage}
                    style={{
                        top: 24,
                        left: 32,
                    }} //position of image you want display.
                />
            </View>
          ...
        );
    }
}

如何在正方形中显示图像的特定部分

How to display specific part of image in square

reactjs

react-native

react-native-image