如何镜像和调整图像中固定宽度和高度的部分

我正在构建“从照片标记”功能。

1. 当用户移动或捏住图像上的方块时，
2. PanResponder 改变 x 坐标（左）、y 坐标（上）、正方形长度（thumbSize）的状态
3. 有了数据，我想实时显示正方形的部分

因此，下图应放置在上图中 A、All All 的左侧。

这是显示“裁剪”图像的渲染部分。

console.log(left) // 80
console.log(top) // 200
console.log(thumbSize) // 150
<Image
      source={{uri: image}}
      style={{height:70, width: 70, bottom: (-top), right: (-left)
      }} <- style is not complete. I'm putting some example code
/>

这是一个持续存在的问题：如何显示图像的唯一部分 https://stackoverflow.com/questions/47362222/how-to-show-the-only-part-of-the-image.

它有效，但解决方案不符合我的期望。

• 它不会改变宽度和高度（我想修复将每个宽度和高度的图像大小从“正方形宽度”调整为“70”）
• 它打破了整个风格（A，全部，所有东西都消失了）

我几天来一直试图解决这个想法，但找不到确切的方法。

Update:我几乎解决了这个问题，但调整大小很重要

我变了Image to CroppedImage（新组件）

<CroppedImage
      source={{uri: image}}
      cropTop={top}
      cropLeft={left}
      cropWidth={thumbSize}
      cropHeight={thumbSize}
      width={width(100)}
      height={width(100)}
      resizeMode="contain" />

Here is CroppedImage

return (
  <View style={[{
    overflow: 'hidden',
    height: this.props.cropHeight,
    width: this.props.cropWidth,
    backgroundColor: 'transparent'
    }, this.props.style]}>
    <Image style={{
      position: 'absolute',
      top: this.props.cropTop * -1,
      left: this.props.cropLeft * -1,
      width: this.props.width,
      height: this.props.height
    }}
      source={this.props.source}
      resizeMode={this.props.resizeMode}>
      {this.props.children}
    </Image>
  </View>
);

似乎有效但无法调整大小（从正方形宽度 x 高度到 70x70）。

我做了一个小提琴来展示您必须执行哪些计算才能正确定位标签图像并调整标签图像的大小：

$('#image').click(function(event) {
  var size_ratio = .6;

  var img_src = $(this).attr('src');
  
  var tag = $('#tag-rectangle');
  
  var top_position = tag.height()/2 - event.offsetX*size_ratio;
  var left_position = tag.width()/2 - event.offsetY*size_ratio;
  $('#tag-rectangle').css({
  	'background-image': 'url('+img_src+')',
    'background-position': top_position +'px '+ left_position + 'px',
    'background-size': $(this).width()*size_ratio + 'px ' + $(this).height()*size_ratio + 'px'
    });
});

#tag-rectangle {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="image" src="http://fakeimg.pl/250x100/" alt="">

<div id="tag-rectangle"></div>