如何在 React Native 中制作图像编辑器?
how can i make image editor in react native?
我正在使用 React Native 制作图像编辑器应用程序。
只是增加了圆形或方形等形状的功能。
_handleAddCircle() {
let circle = {
left: 20,
top: 84
};
let circles = this.state.circles;
circles.push(circle);
this.setState({
circles: circles
});
},
render: function() {
let circles = this.state.circles.map((circle, key) => {
return (
<Circle key={key} left={circle.left} top={circle.top} updatePosition={this.updatePosition} />
);
});
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.button}
onPress={this._handleAddCircle}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>add</Text>
</TouchableHighlight>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
<TouchableHighlight
style={styles.button}
onPress={this._handleSave}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>save</Text>
</TouchableHighlight>
</View>
);
}
但是我在工作后找不到保存图像。
我想没有母语很难制作图像编辑器。
我需要什么包或插件?
您可以使用像 https://github.com/gre/react-native-view-shot 这样的包,它可以让您包装图像 + 叠加层:
<ViewShot ref="viewShot" options={{ format: "png", quality: 1 }}>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
</ViewShot>
然后捕获它:
this.refs.viewShot.capture()
您还可以使用 https://github.com/eneskarpuz/react-native-drag-text-editor 在图像编辑器应用中进行所有文本编辑操作。
...
import DragTextEditor from 'react-native-drag-text-editor';
...
<DragTextEditor
minWidth={100}
minHeight={100}
w={200}
h={200}
x={WINDOW.width/4}
y={WINDOW.height/3}
FontColor={"#000000"}
LineHeight={15}
TextAlign={"left"}
LetterSpacing={0}
FontSize={15}
isDraggable={true}
isResizable={true}
/>
...
只需浏览一下这个很棒的库:gl-react-native,您可以使用它创建自己的滤镜、图像裁剪器等等
我正在使用 React Native 制作图像编辑器应用程序。
只是增加了圆形或方形等形状的功能。
_handleAddCircle() {
let circle = {
left: 20,
top: 84
};
let circles = this.state.circles;
circles.push(circle);
this.setState({
circles: circles
});
},
render: function() {
let circles = this.state.circles.map((circle, key) => {
return (
<Circle key={key} left={circle.left} top={circle.top} updatePosition={this.updatePosition} />
);
});
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.button}
onPress={this._handleAddCircle}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>add</Text>
</TouchableHighlight>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
<TouchableHighlight
style={styles.button}
onPress={this._handleSave}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>save</Text>
</TouchableHighlight>
</View>
);
}
但是我在工作后找不到保存图像。
我想没有母语很难制作图像编辑器。
我需要什么包或插件?
您可以使用像 https://github.com/gre/react-native-view-shot 这样的包,它可以让您包装图像 + 叠加层:
<ViewShot ref="viewShot" options={{ format: "png", quality: 1 }}>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
</ViewShot>
然后捕获它:
this.refs.viewShot.capture()
您还可以使用 https://github.com/eneskarpuz/react-native-drag-text-editor 在图像编辑器应用中进行所有文本编辑操作。
...
import DragTextEditor from 'react-native-drag-text-editor';
...
<DragTextEditor
minWidth={100}
minHeight={100}
w={200}
h={200}
x={WINDOW.width/4}
y={WINDOW.height/3}
FontColor={"#000000"}
LineHeight={15}
TextAlign={"left"}
LetterSpacing={0}
FontSize={15}
isDraggable={true}
isResizable={true}
/>
...
只需浏览一下这个很棒的库:gl-react-native,您可以使用它创建自己的滤镜、图像裁剪器等等