css - 如何对图像中固定宽高的部分进行镜像和调整大小

Question

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

1. 当用户移动或捏合图片上的方 block 时，
2. PanResponder改变x坐标(左)，y坐标(上)，正方形的长度(thumbSize)
3. 有了数据，我想实时展示square的部分

所以下图应该放在 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
/>

这是连续的问题:How to show the only part of the image .

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

• 它没有改变宽度和高度(我想将每个宽度和高度的图像大小从“正方形宽度”调整为“70”)
• 它打破了整个风格(A，All，All things disappear)

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

---

更新:我几乎解决了它，但调整大小很重要

我将 Image 更改为 CroppedImage(新组件)

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

这是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)。

Answer 1

我制作了一个 fiddle 来展示您必须进行哪些计算才能正确定位和调整标签图像的大小:

$('#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>