如何显示图像的唯一部分 [英] How to show the only part of the image

问题描述

更新由于问题复杂且不清楚，我正在重写我的问题，以使其更简单。

UPDATE Since the question was complicating and unclear, I'm rewriting my question to make it much simpler.

给定

• 图像（整个图像的图像uri;示例中的600x600图像）


• left（x -coordinate; 50来自示例）


• top（y坐标;示例中的100）


• width（图像的宽度; 300来自示例）


• 高度（图​​像的高度;示例中的300）

• image (image uri for entire image; 600x600 image from the example)
• left(x-coordinate; 50 from the example)
• top(y-coordinate; 100 from the example)
• width(width of the image; 300 from the example)
• height (height of the image; 300 from the example)

我想要的东西

• 300 x 300图像（裁剪成图像）


• 70 x 70图片（我最终将图片大小调整为70 x 70尺寸）

这是我的示例代码

// render the part of the image
console.log(left); // 50
console.log(thumbSize); // 300
return (
        <Image
          source={{uri: image}}
          style={selectedStyle(left, top, thumbSize)}/>
      );
... 
function selectedStyle(left, top, thumbSize) {
  return {
    left,
    top,
    width: thumbSize,
    height: thumbSize
  };
}

更新，我想要什么是这个。

UPDATE from zvona's working demo, what I want is this.

但没有别的。

< a href =https://i.stack.imgur.com/5GRfC.jpg =nofollow noreferrer>

推荐答案

以下是一个工作示例： https://snack.expo.io/@zvona/cropped-image

Here is a working example: https://snack.expo.io/@zvona/cropped-image

想法是裁剪查看其中图像位于其中并带有自定义尺寸。我在我的例子中使用常量来澄清这种情况。

The idea is to have "cropped" View where Image is positioned inside it with custom dimensions. I use constants in my example to clarify the case.

<View style={styles.cropped}>
  <Image
    style={styles.image}
    source={{uri: 'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'}} />
</View>

和款式：

  image: {
    marginLeft: -OFFSET_LEFT,
    marginTop: -OFFSET_TOP,
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT,
  },

  cropped: {
    width: 150,
    height: 150,
    overflow: 'hidden',
    position: 'absolute',
    left: OFFSET_LEFT,
    top: OFFSET_TOP,
  },

请注意 ImageBackground 仅用于示例目的，在实际实现中不需要。

Note that ImageBackground is only for example purposes and it's not needed in the actual implementation.

这篇关于如何显示图像的唯一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！