我怎样才能使图像编辑器反应原生？答案

【问题标题】：how can i make image editor in react native?我怎样才能使图像编辑器反应原生？
【发布时间】：2016-05-25 19:26:12
【问题描述】：

我正在使用 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>
    );
}

但我工作后找不到保存图像。

我猜想没有母语很难制作图像编辑器。

我需要什么包或插件？

【问题讨论】：

标签： android ios reactjs react-native image-editing

【解决方案1】：

您可以使用像 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()

【讨论】：

它会给我们同样的图像质量吗？还是图像质量会受到影响？

【解决方案2】：

您还可以使用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}
          /> 
...

【讨论】：

【解决方案3】：

只需浏览这个很棒的库：gl-react-native，您可以使用它创建自己的滤镜、图像裁剪器等等

【讨论】：