Как отобразить верхнее левое изображение размером 50x50 без изменения размера, только с собственным разрешением?

Question

Я пытаюсь сделать анимацию с помощью таблицы спрайтов (без использования внешних библиотек)

В настоящее время пытаюсь отобразить верхний левый угол изображения (50 на 50 пикселей) в центре моего экрана Android

Однако все, что я получаю, - это мое оригинальное изображение, уменьшенное до 50x50Как мне сделать так, чтобы исходное изображение не изменялось, а только левый верхний угол 50x50 этого изображения?

Answer 1

Вы можете использовать ImageEditor , который не является внешней библиотекой, а является модулем, предоставленным реагирующим родным: как вы можете видеть в следующем коде, я обрезаю из левого верхнего угла (так как смещение для x и yравно 0) и я обрезаю 150x150 пикселей, как указано в state.croppedWidth-croppedHeight:

import React, { Component } from "react";
import { View, Image, ImageEditor } from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cropedPath: null,
      cropedWidth: 150,
      cropedHeight: 150,
      path:
        "https://blog.addthiscdn.com/wp-content/uploads/2016/03/01125908/200-200-pixels.png"
    };
  }

  componentDidMount() {
    this.crop(this.state.path, this.state.cropedWidth, this.state.cropedHeight);
  }

  crop(path, cropedWidth, cropedHeight) {
    ImageEditor.cropImage(
      path,
      (cropData = {
        offset: { x: 0, y: 0 },
        size: { width: cropedWidth, height: cropedHeight },
        resizeMode: "cover"
      }),
      uri => this.setState({ cropedPath: uri }),
      error => console.log("error", error)
    );
  }

  loadImage(path, width, height) {
    return (
      <Image source={{ uri: path }} style={{ width: width, height: height }} />
    );
  }

  render() {
    return (
      <View>
        {this.loadImage(this.state.path, 200, 200)}
        {this.loadImage(
          this.state.cropedPath,
          this.state.cropedWidth,
          this.state.cropedHeight
        )}
      </View>
    );
  }
}

Снимок экрана после выполнения: