Как отобразить определенную часть изображения в квадрате - PullRequest
Новая
       40

Как отобразить определенную часть изображения в квадрате

1 голос
/ 23 сентября 2019

У меня проблема с компонентом изображения в реагировать родной.Я хотел бы отобразить определенную часть изображения в некотором квадрате.Например:

Допустим, у меня есть изображение в разрешении: 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>

Здесь возникает первая проблема: изображение выходит за пределы квадрата. Как я могу показать только часть моего изображения (но с оригинальным разрешением).

Второй вопрос: есть ли способ показать определенный фрагмент моего изображения?Это мужчины, если я установлю top: -64, слева: -64 Я бы хотел, чтобы исходное изображение двигалось по диагонали на 64 пикселя.

Ответы [ 4 ]

2 голосов
/ 23 сентября 2019

Чтобы показать ваше изображение с полным разрешением, но только с выбранным разделом, вам нужно будет отобразить изображение в контейнере фиксированного размера.Это изображение также должно быть фоновым изображением в атрибуте style. 

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

1 голос
/ 23 сентября 2019

Jroslaw.это может быть полезно для вас. 

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>
          ...
        );
    }
}

this is the ref image of this code

0 голосов
/ 23 сентября 2019

Предоставление «переполнения:« скрытый »» родительскому представлению также работает для меня.Режим изменения размера: содержать не будет работать, так как он изменит размер вашего изображения, чтобы он полностью поместился в контейнер 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>
0 голосов
/ 23 сентября 2019

Попробуйте опцию resizeMode prop для изображения в реагирующем нативе, которое вы можете использовать (реквизиты 'cover', 'содержать', 'stretch', 'repeat', 'center') также: - 

<View>

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

</View>

Ссылка: - https://facebook.github.io/react-native/docs/image.html#resizemode

...