如何仅显示图像的一部分

地狱工程师

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

在此处输入图片说明

给定

  • 图片(整个图片的图片uri;示例中为600x600图片)
  • 左(x坐标;示例中为50)
  • 顶部(y坐标;示例中为100)
  • 宽度(图像宽度;示例中为300)
  • 高度(图像的高度;示例中为300)

我想要的是

  • 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
  };
}

来自zvona的工作演示的更新,我想要的是这个。

在此处输入图片说明 但没有别的。

在此处输入图片说明

萨穆利·哈科涅米

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

这个想法是“裁剪”View在其中Image具有自定义尺寸的位置。我在示例中使用常量来澄清这种情况。

<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仅出于示例目的,在实际实现中并不需要。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章