如何镜像和调整具有固定宽度和高度的图像部分 [英] How to mirror and resize the part of image with fixed width and height
问题描述
我正在构建从照片标记功能。
- 当用户移动或捏住图像上的方块时，
- PanResponder改变x坐标的状态（左），y-坐标（顶部），方形长度（thumbSize）
- 根据数据，我想显示方形实时部分
所以下图应该放在A，All All左边的上图中。
这是渲染部分显示裁剪的图像。
console.log（左）// 80
console.log（上）// 200
console.log（thumbSize）// 150
< ;进出口年龄
source = {{uri：image}}
style = {{height：70，width：70，bottom：（ - top），right：（ - left）
}}< ; - 风格不完整。我正在提供一些示例代码
/>
这是一个持续的问题：
好吧，我终于设法创建了一个有效的React Native代码（以前从未使用它，对不起，如果它是noobish代码），就像我的其他答案。
以下是代码：
从'react'导入React，{Component};来自'react-native'的
import {TouchableWithoutFeedback，ImageBackground，Image，View，StyleSheet};
const IMAGEURI ='http://fakeimg.pl/300x300/';
const SIZERATIO = .6;
const IMAGEWIDTH = 300;
const IMAGEHEIGHT = 300;
const CROPIMAGEWIDTH = 100;
const CROPIMAGEHEIGHT = 100;
导出默认类App扩展组件{
state = {
style：{
marginLeft：0，
marginTop：0，
} ，
uri：''
};
repositionImage（event）{
this.setState（{
style：{
marginLeft：CROPIMAGEWIDTH / 2 - event.nativeEvent.locationX * SIZERATIO，
marginTop：CROPIMAGEHEIGHT / 2 - event.nativeEvent.locationY * SIZERATIO
}，
uri：IMAGEURI
}）;
}
render（）{
return（
< View>
< TouchableWithoutFeedback onPress = {（event）=> this.repositionImage （事件）}>
<查看>
<图片
style = {styles.image}
source = {{uri：IMAGEURI}}
/ >
< / View>
< / TouchableWithoutFeedback>
< View style = {styles.tag}>
< ImageBackground style = {[styles.cropped ，this.state.style]} source = {{uri：this.state.uri}} />
< / View>
< / View>
）;
}
}
const styles = StyleSheet.create（{
image：{
width：IMAGEWIDTH，
height：IMAGEHEIGHT，
}，
标签：{
borderWidth：1，
borderColor：'＃000'，
宽度：CROPIMAGEWIDTH，
高度：CROPIMAGEHEIGHT ，
溢出：'隐藏'
}，
裁剪：{
宽度：IMAGEWIDTH * SIZERATIO，
身高：IMAGEHEIGHT * SIZERATIO
}
}）;
这是小吃
我真的希望它有所帮助!!祝你好运!!
编辑：好的，我会解释一下我在这里做的事情。
第一，我设置了一个状态，参数将根据某些变化而变化事件：
state = {
style：{
marginLeft：0，
marginTop： 0，
}，
uri：''
};
然后，我让组件从该状态获取其属性：
< ImageBackground style = {[styles.cropped， this.state.style ]} source = {{uri： this.state.uri }} />
最后，我准备 onPress 事件来调用一个更新状态的函数：
< TouchableWithoutFeedback onPress = {（event）=> this.repositionImage（event）}>
我在这里使用事件对象提供我的功能，这样我就可以获得用户按下的坐标。
最后一个函数获取数据从事件和更新状态。该视图将自动刷新新状态数据。
repositionImage（event）{
this.setState（{
样式：{
marginLeft：CROPIMAGEWIDTH / 2 - event.nativeEvent.locationX * SIZERATIO，
marginTop：CROPIMAGEHEIGHT / 2 - event.nativeEvent.locationY * SIZERATIO
}，
uri：IMAGEURI
}）;
}
要定位图像，我只需进行数学运算：
CROPIMAGEWIDTH 是我的代码元素的宽度，所以为了获得中心我将它除以2.然后，我减去 locationX 将图像向左移动的事件，使locationX位于标签的中心。
这仅用于定位。要缩放它，只需将图像和locationX的大小乘以相同的值即可。 注意我将图像的宽度和高度乘以裁剪样式中的SIZERATIO
裁剪：{
宽度：IMAGEWIDTH * SIZERATIO，
身高：IMAGEHEIGHT * SIZERATIO
}
此缩放内容的一个示例：
如果您的图片宽度为200，并且您希望将其缩放到一半，那么乘以0.5。因此，如果您点击左边的像素180，则缩放图像的等效像素也必须乘以0.5，它将为90.
如果有什么我没有清楚地解释清楚，请再次问我，我很乐意帮助你。
I'm building "Tagging from photo" functionality.
- When the user move or pinch the square on the image,
- PanResponder changes the state of x-coordinate(left), y-coordinate(top), the length of square(thumbSize)
- With the data, I want to show the part of square real-time
So this image below should be placed into the left of A, All All from the image above.
Here is the part of render showing the "cropped" image.
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
/>
This is continuous problem from: How to show the only part of the image.
It works but the solution doesn't meet my expectation.
- It's not changing width and height ( I want to fix resize the image from 'the width of square' to '70' for each width and height)
- It breaks the whole style (A, All, All things disappear)
I've been trying to solve this idea for days but couldn't find the exact way.
Update: I almost solved it but resizing matters
I changed Image to CroppedImage (new component)
<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>
);
It seems working but it can't resize (from square width x height to 70x70).
Well, I finally managed to create a working React Native code (never used it before, sorry if it is noobish code) doing the same as in my other answer.
Here is the code:
import React, { Component } from 'react';
import { TouchableWithoutFeedback, ImageBackground, Image, View, StyleSheet } from 'react-native';
const IMAGEURI = 'http://fakeimg.pl/300x300/';
const SIZERATIO = .6;
const IMAGEWIDTH = 300;
const IMAGEHEIGHT = 300;
const CROPIMAGEWIDTH = 100;
const CROPIMAGEHEIGHT = 100;
export default class App extends Component {
state = {
style: {
marginLeft: 0,
marginTop: 0,
},
uri: ''
};
repositionImage(event) {
this.setState({
style: {
marginLeft: CROPIMAGEWIDTH/2 - event.nativeEvent.locationX*SIZERATIO,
marginTop: CROPIMAGEHEIGHT/2 - event.nativeEvent.locationY*SIZERATIO
},
uri: IMAGEURI
});
}
render() {
return (
<View>
<TouchableWithoutFeedback onPress={(event) => this.repositionImage(event)}>
<View>
<Image
style={styles.image}
source={{ uri: IMAGEURI }}
/>
</View>
</TouchableWithoutFeedback>
<View style={styles.tag}>
<ImageBackground style={[styles.cropped,this.state.style]} source={{uri: this.state.uri }} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
image: {
width: IMAGEWIDTH,
height: IMAGEHEIGHT,
},
tag: {
borderWidth: 1,
borderColor: '#000',
width: CROPIMAGEWIDTH,
height: CROPIMAGEHEIGHT,
overflow: 'hidden'
},
cropped: {
width: IMAGEWIDTH*SIZERATIO,
height: IMAGEHEIGHT*SIZERATIO
}
});
And here is the Snack
I really hope it helped!! Good luck!!
EDIT: Ok I will explain a bit what I'm doing here.
First, I set a State with the parameters that will change based on some event:
state = {
style: {
marginLeft: 0,
marginTop: 0,
},
uri: ''
};
Then, I make the component to get its properties from that state:
< ImageBackground style={[styles.cropped,this.state.style]} source={{uri: this.state.uri }} />
Finally, I prepare the onPress event to call a function which will update the state:
< TouchableWithoutFeedback onPress={(event) => this.repositionImage(event)}>
Here I'm feeding my function with the event object so I will be available to get the coordinates where the user pressed.
That last function takes the data from the event and updates the state. The view will automatically refresh with the new state data.
repositionImage(event) {
this.setState({
style: {
marginLeft: CROPIMAGEWIDTH/2 - event.nativeEvent.locationX*SIZERATIO,
marginTop: CROPIMAGEHEIGHT/2 - event.nativeEvent.locationY*SIZERATIO
},
uri: IMAGEURI
});
}
To position the image, I simply do a math operation:
CROPIMAGEWIDTH is the width of my tag element so to get the center I divide it by 2. Then, I substract the locationX of the event to move the image to the left so the locationX will be at the center of the tag.
That is only for positioning. To scale it just multiply the size of the image and the locationX by the same value. Note I multiplied the width and height of the image with the SIZERATIO in the cropped style
cropped: {
width: IMAGEWIDTH*SIZERATIO,
height: IMAGEHEIGHT*SIZERATIO
}
An example of this scaling stuff:
If your image has 200 width and you want to scale it to a half, you multiply it by 0.5. So if you click at the, say, pixel 180 starting for the left, the equivalent pixel for your scaled image will have to be multiplied by 0.5 too and it will be 90.
If there is something I didn't explaing clearly enough just ask me again a I will be glad to help you.
这篇关于如何镜像和调整具有固定宽度和高度的图像部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
