react-native 画笔(写字板、手写板)--2

目前已完成功能包括线条标注箭头、圆圈、画笔、矩形、粗细、颜色、撤销、清空、保存。移动图片,标注文字暂时未完成,还有后期的一些功能未完善,如标注后,点击改标注可以随意修改其大小、位置、方向等,后面有时间再研究下。

其中箭头是最麻烦的,其他功能一旦熟悉花的时间不多,但是光是箭头花了差不多五天的时间,因为没有思路,想过用svg rotate旋转,后来发现也是不太好实现,除了触摸点,箭头三角形其他点也是需要旋转一样的角度,这个不太好算。
后面经过分析通过三角函数将三角形箭头的两侧的点算出来,算的三角形两个侧边点在屏幕的坐标,就可以做出来了。当然,箭头三角形是等腰三角形,要是想要搞成像微信截图那样的箭头,需要自己深入计算一下,思路一样,SVG不是很熟悉的可以看一下我之前写的这篇https://www.jianshu.com/p/ef91237a89a4,也可以自己上菜鸟教程简单的练一下再上手。先上效果图后上代码。

111571643003776_.pic.jpg

111561643003775_.pic.jpg
111621643003922_.pic.jpg

案例:

复制以下代码,添加安装react-native-svg、react-native-view-shot 、替换里面的图片,新建一个页面就可以查看效果

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, PanResponder, TouchableOpacity, TextInput} from 'react-native'
import Svg, {Path, Rect, Circle, Ellipse, Line} from "react-native-svg";
// import Util from "../common/util";
// import MyToast from "../common/MyToast";
import ViewShot from "react-native-view-shot";

// 这两个是为了写字板样式若是有什么边距问题,有padding或margin的加上去,以屏幕手势起始点开始,如果没有边距问题都赋值为0就好
let marginY = 50  //头部导航height 50
let marginX = 0  // 图片与父盒子距离 0

class Comp3 extends Component {
    constructor(props) {
        super(props);
        this.allPathPointsAsign = ''  //所有点的合并
        this.allPathPointsList = []   //所有路径点数组、用来操作撤销
        this.state = {
            /**画笔**/
            drawPath: '',

            /**规格**/
            size_id: 0,
            color_id: 0,
            currentSize: 3,   //默认线条粗细
            currentColor: '#FF0000', //默认线条颜色
            line_list: [
                {size: 3, selectColor: ''},
                {size: 6, selectColor: ''},
                {size: 9, selectColor: ''},
            ],
            color_list: ['#FF0000', '#000000', '#00FF00', '#0000FF', '#FF7700', '#FF00FF', '#00FFFF', '#000000', '#FF0000', '#00FF00', '#0000FF', '#FF7700', '#FF00FF', '#00FFFF', '#FF00FF', '#00FFFF',],

            /**矩形**/
            rectWidth: 0,
            rectHeight: 0,

            /**椭圆**/
            circleWidth: 0,
            circleHeight: 0,

            /**箭头*/
            arrowPath: '',
            arrowSPath: '',

            /**所有操作集合数组**/
            myAllList: [],

            inputStyle: {
                left: 0,
                top: 0,
            },
            inputWidth: 0,
            inputHeight: 0,

            isShowLineSize: false,
            isShowColorful: false,
            isDrawing: false,
            drawType: 4,
            angle: 0,
            image_url: this.props.image_url,
        }
    }


    UNSAFE_componentWillMount() {
        this._panResponderDrawLine = PanResponder.create({
            // 要求成为响应者:
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
            onMoveShouldSetPanResponder: (evt, gestureState) => false,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => false,

            onPanResponderGrant: (evt, gestureState) => {
                this.isMove = false
                this._onPanResponderGrant(evt, gestureState)
            },

            onPanResponderMove: (evt, gestureState) => {
                console.log('画画夺权')
                this.isMove = true
                this._onPanResponderMove(evt, gestureState)
            },

            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                if (this.isMove) {   //判断是否是移动后,因为有些只是点一下,但是并没有画线也push到了数组
                    this._onPanResponderRelease(evt, gestureState)
                }

            },

            onPanResponderTerminate: (evt, gestureState) => {
            },

            onShouldBlockNativeResponder: (evt, gestureState) => {
                return true;
            },
        })

        this._panResponderChange = PanResponder.create({
            // 要求成为响应者:
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            onPanResponderGrant: (evt, gestureState) => {
                //在这里点的时候激活一个矩形边框,类似微信截图的(当然这个边框是需要自己算的它的长宽高和距离顶部、左边位置)
                console.log('点击==激活===========', evt, gestureState)
            },

            onPanResponderMove: (evt, gestureState) => {
                //上方激活后,可以在这里变形这个图形rotate、scale、translate、变形完了添加到数组里面的属性遍历出来即可
                console.log('移动夺权移动变形的在这里添加,如rotate、scale、translate等加到数组属性里')

            },

            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                console.log('放手======onPanResponderRelease==========', this.pathRef)
            },

            onPanResponderTerminate: (evt, gestureState) => {
            },

            onShouldBlockNativeResponder: (evt, gestureState) => {
                return true;
            },
        })
    }

    _onPanResponderGrant(evt, gestureState) {
        let drawType = this.state.drawType
        this.setState({
            isDrawing: true
        })

        /**画线**/
        if (drawType === 4) {
            console.log('手指开始接触====', evt.nativeEvent)
            let tempfirstX = evt.nativeEvent.pageX - marginX
            let tempFirstY = evt.nativeEvent.pageY - marginY
            this.firstPoint = ` M${tempfirstX} ${tempFirstY}`
            this.allPathPointsAsign = this.firstPoint
        }

        /**矩形**/
        if (drawType === 5) {
            console.log('矩形开始接触====', evt.nativeEvent)
            this.rectFirstPageX = evt.nativeEvent.pageX - marginX    //减去marginX,marginY 是为了手势起始点要以图片左上角开始
            this.rectFirstPageY = evt.nativeEvent.pageY - marginY
            this.setState({
                rectFirstPageX: this.rectFirstPageX,
                rectFirstPageY: this.rectFirstPageY,
                rectWidth: 0,   //把上一次的矩形宽高清零
                rectHeight: 0,
            })
        }

        /**椭圆**/
        if (drawType === 3) {
            console.log('椭圆开始接触====', evt.nativeEvent)
            this.circleFirstPageX = evt.nativeEvent.pageX - marginX    //减去marginX,marginY 是为了手势起始点要以图片左上角开始
            this.circleFirstPageY = evt.nativeEvent.pageY - marginY
            this.setState({
                circleFirstPageX: this.circleFirstPageX,
                circleFirstPageY: this.circleFirstPageY,
                circleWidth: 0,   //把上一次的矩形宽高清零
                circleHeight: 0,
            })
        }

        /**箭头**/
        if (drawType === 2) {
            // console.log('箭头开始接触====', evt.nativeEvent)
            this.arrowFirstPageX = evt.nativeEvent.pageX - marginX    //减去marginX,marginY 是为了手势起始点要以图片左上角开始
            this.arrowFirstPageY = evt.nativeEvent.pageY - marginY

            let str = ` M${this.arrowFirstPageX} ${this.arrowFirstPageY}`
            console.log('str====', str)
            this.firstArrowPoint = str
            this.setState({
                arrowPath: '',
                arrowSPath: '',
            })
        }

        /**输入文本**/
        if (drawType === 1) {
            this.touchPageX = evt.nativeEvent.pageX - marginX    //减去marginX,marginY 是为了手势起始点要以图片左上角开始
            this.touchPageY = evt.nativeEvent.pageY - marginY
            // return
            // console.log('this.touchPageX',this.touchPageX,'this.touchPageY',this.touchPageY)
        }
    }

    _onPanResponderMove(evt, gestureState) {
        let drawType = this.state.drawType

        /**画线**/
        if (drawType === 4) {
            let pointX = evt.nativeEvent.pageX - marginX
            let pointY = evt.nativeEvent.pageY - marginY
            let point = ` L${pointX} ${pointY}`
            this.allPathPointsAsign += point
            // console.log('point====', this.allPathPointsAsign)
            let drawPath = this.allPathPointsAsign   //一次性画了之后存到一个数组,目的是为了后面的撤销操作

            let tempId = this.state.size_id            //在移动的时候才给他赋值颜色/线条。而不是在选择颜色的时候就直接赋值改变线条的颜色,
            let tempColorId = this.state.color_id          //若是在选择颜色/线条的时候直接赋值,会改变前一次画好的线的颜色/线条,不可取
            let currentSize = this.state.line_list[tempId].size  //使用临时粗细是为了在切换线条大小的时候,前一次画好的线条粗细不会发生变化
            let currentColor = this.state.color_list[tempColorId]  //使用临时颜色是为了在切换线条大小的时候,前一次画好的线条颜色不会发生变化

            this.setState({
                currentSize,   //当前线的粗细
                currentColor,   //当前线的颜色
                drawPath,
            })
        }

        /**矩形**/
        if (drawType === 5) {
            // console.log('矩形move====', evt.nativeEvent.pageX,'===',evt.nativeEvent.pageY)
            let pointX = evt.nativeEvent.pageX - marginX
            let pointY = evt.nativeEvent.pageY - marginY
            let rectWidth = pointX - this.rectFirstPageX
            let rectHeight = pointY - this.rectFirstPageY
            console.log('矩形宽高===', rectWidth, rectHeight)

            let tempId = this.state.size_id            //在移动的时候才给他赋值颜色/线条。而不是在选择颜色的时候就直接赋值改变线条的颜色,
            let tempColorId = this.state.color_id          //若是在选择颜色/线条的时候直接赋值,会改变前一次画好的线的颜色/线条,不可取
            let currentSize = this.state.line_list[tempId].size  //使用临时粗细是为了在切换线条大小的时候,前一次画好的线条粗细不会发生变化
            let currentColor = this.state.color_list[tempColorId]  //使用临时颜色是为了在切换线条大小的时候,前一次画好的线条颜色不会发生变化

            // 这部分代码在以创建矩形时初始坐标为原点(0,0),在向右或者向上框选的时候,是负值的,此时矩形时宽或者高是负数的,不会显示
            // 所以在将宽高转为整数的时候,这时候将宽高的绝对值作为初始值坐标的增减,这样才能实现宽高的增减

            let newPageX = this.rectFirstPageX + rectWidth
            let newPageY = this.rectFirstPageY + rectHeight
            if (rectHeight < 0) {
                rectHeight = Math.abs(rectHeight)   //高为绝对值
                this.setState({
                    rectFirstPageY: newPageY    //重新定位原点Y坐标
                })
            }
            if (rectWidth < 0) {
                rectWidth = Math.abs(rectWidth)  //宽为绝对值
                this.setState({
                    rectFirstPageX: newPageX,  //重新定位原点X坐标
                })
            }
            this.setState({
                rectWidth,
                rectHeight,
                currentSize,   //当前线的粗细
                currentColor,   //当前线的颜色
            })
        }

        /**椭圆**/
        if (drawType === 3) {
            console.log('椭圆正在画====', evt.nativeEvent)
            let pointX = evt.nativeEvent.pageX - marginX
            let pointY = evt.nativeEvent.pageY - marginY
            let circleWidth = pointX - this.circleFirstPageX
            let circleHeight = pointY - this.circleFirstPageY
            console.log('矩形宽高===', circleWidth, circleHeight)

            let tempId = this.state.size_id            //在移动的时候才给他赋值颜色/线条。而不是在选择颜色的时候就直接赋值改变线条的颜色,
            let tempColorId = this.state.color_id          //若是在选择颜色/线条的时候直接赋值,会改变前一次画好的线的颜色/线条,不可取
            let currentSize = this.state.line_list[tempId].size  //使用临时粗细是为了在切换线条大小的时候,前一次画好的线条粗细不会发生变化
            let currentColor = this.state.color_list[tempColorId]  //使用临时颜色是为了在切换线条大小的时候,前一次画好的线条颜色不会发生变化

            // 这部分代码在以创建矩形时初始坐标为原点(0,0),在向右或者向上框选的时候,是负值的,此时矩形时宽或者高是负数的,不会显示
            // 所以在将宽高转为整数的时候,这时候将宽高的绝对值作为初始值坐标的增减,这样才能实现宽高的增减

            let newPageX = this.circleFirstPageX + circleWidth
            let newPageY = this.circleFirstPageY + circleHeight
            if (circleHeight < 0) {
                circleHeight = Math.abs(circleHeight)   //高为绝对值
                this.setState({
                    circleFirstPageY: newPageY    //重新定位原点Y坐标
                })
            }
            if (circleWidth < 0) {
                circleWidth = Math.abs(circleWidth)  //宽为绝对值
                this.setState({
                    circleFirstPageX: newPageX,  //重新定位原点X坐标
                })
            }
            this.setState({
                circleWidth,
                circleHeight,
                currentSize,   //当前线的粗细
                currentColor,   //当前线的颜色
            })
        }

        /**箭头**/
        if (drawType === 2) {
            let pointX = evt.nativeEvent.pageX - marginX
            let pointY = evt.nativeEvent.pageY - marginY
            let y = 0, x = 0
            if (pointY > this.arrowFirstPageY) {
                y = -(pointY - this.arrowFirstPageY)    //如果超过原始点就为 -y  即在y的负半轴
            }
            if (pointY < this.arrowFirstPageY) {
                y = this.arrowFirstPageY - pointY    //如果小于原始点就为 y  即在y的正半轴
            }
            if (pointX > this.arrowFirstPageX) {
                x = pointX - this.arrowFirstPageX    //如果超过原始点就为 x  即在x的正半轴
            }
            if (pointX < this.arrowFirstPageX) {
                x = -(this.arrowFirstPageX - pointX)    //如果小于原始点就为 -x  即在x的负半轴
            }
            let k = y / x    //直线(箭头)的斜率
            if (!k) {
                return
            }
            let c1 = Math.sqrt(Math.pow(Math.abs(x), 2) + Math.pow(Math.abs(y), 2))   //这是整个直线(箭头)的长度
            let radian = Math.atan(Math.abs(k))   //主线条与X轴的弧度值
            let angle = radian * (180 / Math.PI)   //主线条与X轴的夹角    角度 = 弧度值 * (180/π)

            let {a, b} = this.autoSize(c1)   //三角形自动大小
            // console.log('a====>>>',a,'b====>>>',b,)
            let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))  //根据勾股定理计算斜边,即三角形侧边长
            let a1, b1    //三角形侧边点与触摸点的宽或高
            let newAngle = 45 - angle   //根据相似三角形求得夹角
            a1 = Math.sin(Math.PI / (180 / newAngle)) * c   //顺时针方向三角形第一个侧边点与触摸点的距离宽,用来计算第一个侧边点x坐标
            b1 = Math.cos(Math.PI / (180 / newAngle)) * c   //顺时针方向三角形第一个侧边点与触摸点的距离高,用来计算第一个侧边点y坐标

            // console.log('x、y===>>>', x, y)
            // console.log('k===>>>', k)
            // console.log('angle===>>>', angle)   //线与x轴的夹角
            let {twoPoints, tangle} = this.drawArrowPath(pointX, pointY, a1, b1, k, angle)
            let finalPath = twoPoints + tangle

            console.log('finalPath===>>>>', finalPath)
            console.log('tangle===>>>>', tangle)

            this.arrowPath = finalPath
            this.arrowSPath = tangle
            let tempId = this.state.size_id            //在移动的时候才给他赋值颜色/线条。而不是在选择颜色的时候就直接赋值改变线条的颜色,
            let tempColorId = this.state.color_id          //若是在选择颜色/线条的时候直接赋值,会改变前一次画好的线的颜色/线条,不可取
            let currentSize = this.state.line_list[tempId].size  //使用临时粗细是为了在切换线条大小的时候,前一次画好的线条粗细不会发生变化
            let currentColor = this.state.color_list[tempColorId]  //使用临时颜色是为了在切换线条大小的时候,前一次画好的线条颜色不会发生变化
            this.setState({
                currentSize,   //当前线的粗细
                currentColor,   //当前线的颜色
                arrowPath: finalPath,
                arrowSPath: tangle
            })
        }
    }

    autoSize(c1) {
        let a = 25, b = 12.5   //三角形三边
        let size_id = this.state.size_id
        console.log('size_id====', size_id)
        if (c1 < 80 || size_id === 0) {
            a = 10;
            b = 10;
        } else if (c1 < 120 || size_id === 1) {
            a = 15;
            b = 15;
        } else if (c1 < 150 || size_id === 1) {
            a = 25;
            b = 12.5;
        }
        return {a, b}
    }

    drawArrowPath(pointX, pointY, a1, b1, k, angle) {
        let tangle   //定义三角形
        let firstM1  // 主体斜宽线与三角形连接点1
        let firstM2  // 主体斜宽线与三角形连接点2
        if (pointY < this.arrowFirstPageY && pointX > this.arrowFirstPageX) {   //第一象限
            tangle = ` M${pointX} ${pointY} L${pointX - a1} ${pointY + b1} L${pointX - b1} ${pointY - a1}`
            firstM1 = ` L${pointX - (a1 / 2)} ${pointY + (b1 / 2)}`
            firstM2 = ` L${pointX - (b1 / 2)} ${pointY - (a1 / 2)}`
        }
        if (pointY < this.arrowFirstPageY && pointX < this.arrowFirstPageX) {   //第二象限
            tangle = ` M${pointX} ${pointY} L${pointX + b1} ${pointY - a1} L${pointX + a1} ${pointY + b1}`
            firstM1 = ` L${pointX + (b1 / 2)} ${pointY - (a1 / 2)}`
            firstM2 = ` L${pointX + (a1 / 2)} ${pointY + (b1 / 2)}`
        }
        if (pointY > this.arrowFirstPageY && pointX < this.arrowFirstPageX) {   //第三象限
            tangle = ` M${pointX} ${pointY} L${pointX + a1} ${pointY - b1} L${pointX + b1} ${pointY + a1}`
            firstM1 = ` L${pointX + (a1 / 2)} ${pointY - (b1 / 2)}`
            firstM2 = ` L${pointX + (b1 / 2)} ${pointY + (a1 / 2)}`
        }
        if (pointY > this.arrowFirstPageY && pointX > this.arrowFirstPageX) {   //第四象限
            tangle = ` M${pointX} ${pointY} L${pointX - b1} ${pointY + a1} L${pointX - a1} ${pointY - b1}`
            firstM1 = `L${pointX - (b1 / 2)} ${pointY + (a1 / 2)}`
            firstM2 = `L${pointX - (a1 / 2)} ${pointY - (b1 / 2)}`
        }

        // firstM1 + `M${pointX - b1} ${pointY + a1} L${pointX} ${pointY}` +  firstM2
        if (k === 0 && pointX < this.arrowFirstPageX) {   //在 X 负半轴 上时,即k=0
            tangle = ` M${pointX} ${pointY} L${pointX + a1} ${pointY - b1} L${pointX + a1} ${pointY + b1}`
            firstM1 = `L${pointX + (a1 / 2)} ${pointY - (b1 / 2)}`
            firstM2 = `L${pointX + (a1 / 2)} ${pointY + (b1 / 2)}`
        }
        if (k === 0 && pointX > this.arrowFirstPageX) {  //在 X 正半轴 上时,即k=0
            tangle = ` M${pointX} ${pointY} L${pointX - a1} ${pointY + b1} L${pointX - a1} ${pointY - b1}`
            firstM1 = `L${pointX - (a1 / 2)} ${pointY + (b1 / 2)}`
            firstM2 = `L${pointX - (a1 / 2)} ${pointY - (b1 / 2)}`
        }
        if (angle === 90 && pointY > this.arrowFirstPageY) {  //在 Y 负半轴 上时
            tangle = ` M${pointX} ${pointY} L${pointX - a1} ${pointY - b1} L${pointX + a1} ${pointY - b1}`
            firstM1 = `L${pointX - (a1 / 2)} ${pointY - (b1 / 2)}`
            firstM2 = `L${pointX + (a1 / 2)} ${pointY - (b1 / 2)}`
        }
        if (angle === 90 && pointY < this.arrowFirstPageY) {  //在 Y 正半轴 上时
            tangle = ` M${pointX} ${pointY} L${pointX + a1} ${pointY + b1} L${pointX - a1} ${pointY + b1}`
            firstM1 = `L${pointX + (a1 / 2)} ${pointY + (b1 / 2)}`
            firstM2 = `L${pointX - (a1 / 2)} ${pointY + (b1 / 2)}`
        }
        // console.log('firstM1===', firstM1, 'firstM2===', firstM2,)

        let twoPoints = this.firstArrowPoint + firstM1 + firstM2   //两点一直线
        return {twoPoints, tangle}
    }

    _onPanResponderRelease(evt, gestureState) {
        let drawType = this.state.drawType
        this.setState({
            isDrawing: false
        })
        /**画线**/
        if (drawType === 4) {
            let obj = {
                size_id: this.state.size_id,
                color_id: this.state.color_id,
                path: this.allPathPointsAsign,
                pathType: 'line'
            }
            this.allPathPointsList.push(obj)      //将所有画过的线以及他的粗细、颜色等保存起来
            console.log('this.allPathPointsList====', this.allPathPointsList)
            this.setState({
                myAllList: this.allPathPointsList
            })
        }

        /**矩形**/
        if (drawType === 5) {
            console.log('矩形放开手指====', evt.nativeEvent)
            let obj = {
                size_id: this.state.size_id,
                color_id: this.state.color_id,
                pageX: this.state.rectFirstPageX,
                pageY: this.state.rectFirstPageY,
                rectHeight: this.state.rectHeight,
                rectWidth: this.state.rectWidth,
                pathType: 'rect'
            }
            this.allPathPointsList.push(obj)      //将所有画过的矩形以及他的粗细、颜色等保存起来
            console.log('this.allPathPointsList====', this.allPathPointsList)
            this.setState({
                myAllList: this.allPathPointsList
            })
        }

        /**椭圆**/
        if (drawType === 3) {
            console.log('椭圆完成====', evt.nativeEvent)
            let obj = {
                size_id: this.state.size_id,
                color_id: this.state.color_id,
                pageX: this.state.circleFirstPageX,
                pageY: this.state.circleFirstPageY,
                circleHeight: this.state.circleHeight,
                circleWidth: this.state.circleWidth,
                pathType: 'circle'
            }
            this.allPathPointsList.push(obj)      //将所有画过的矩形以及他的粗细、颜色等保存起来
            console.log('this.allPathPointsList====', this.allPathPointsList)
            this.setState({
                myAllList: this.allPathPointsList
            })
        }

        /**箭头**/
        if (drawType === 2) {
            console.log('箭头完成====', evt.nativeEvent)
            let obj = {
                size_id: this.state.size_id,
                color_id: this.state.color_id,
                arrowPath: this.arrowPath,
                arrowSPath: this.arrowSPath,
                pathType: 'arrow'
            }
            this.allPathPointsList.push(obj)
            this.setState({
                myAllList: this.allPathPointsList
            })
            console.log('myAllList====', this.state.myAllList)
        }

        /**输入文本**/
        if (drawType === 1) {
            // console.log('箭头开始接触====', evt.nativeEvent)
            this.touchPageX = evt.nativeEvent.pageX - marginX    //减去marginX,marginY 是为了手势起始点要以图片左上角开始
            this.touchPageY = evt.nativeEvent.pageY - marginY
            console.log('this.touchPageX', this.touchPageX, 'this.touchPageY', this.touchPageY)
            // if(){
            //
            // }
            let inputStyle = {
                left: this.touchPageX,
                top: this.touchPageY - this.state.inputHeight / 2,
            }
            this.setState({
                inputStyle
            })
        }

    }

    //撤销
    revoke() {
        this.allPathPointsList.pop(1)
        this.setState({
            drawPath: '',  //这是清除已经刚刚画好的
            myAllList: this.allPathPointsList,
            rectWidth: 0,
            rectHeight: 0,
            circleWidth: 0,
            circleHeight: 0,
        })
    }

    //清空
    clearOut() {
        this.allPathPointsList = []
        this.setState({
            drawPath: '',  //这是清除已经刚刚画好的
            myAllList: [],
            rectWidth: 0,
            rectHeight: 0,
            circleWidth: 0,
            circleHeight: 0,
        })
    }

    //保存画板内容
    savePhoto() {
        this.refs.viewShot.capture().then(uri => {
            console.log("do something with ", uri);
            // Util.saveLocalImage(uri,(res)=>{
            //     console.log('保存成功====1111',res)
            //     MyToast.show('图片保存成功');
            // },(err)=>{
            //     MyToast.show('图片保存失败')
            //     console.log('保存失败====',err)
            // })
        });
    }

    //选择线的粗细
    onSelectLineSize(item, id) {
        console.log('选择线条粗细===', item)
        this.setState({
            isShowLineSize: false,
            size_id: id
        })
    }

    //选择颜色id
    onSelectColor(item, id) {
        this.setState({
            isShowColorful: false,
            color_id: id
        })
    }

    //选择绘画类型(操作类型):  0:拖动、1:添加字符、2-5:线条类型、6:粗细、7:色彩
    onSelectDrawType(type) {
        switch (type) {
            case 6 :
                this.setState({isShowLineSize: true});
                break;
            case 7 :
                this.setState({isShowColorful: true});
                break;
            default:
                this.setState({drawType: type});
        }
    }

    _onLayout(e) {
        console.log('_onLayout1===', e.nativeEvent)
        this.setState({
            inputWidth: e.nativeEvent.layout.width,
            inputHeight: e.nativeEvent.layout.height,
        })
    }

    render() {
        let {line_list, isShowColorful, color_list, drawType, isDrawing, image_url} = this.state
        return (
            
                

                    
                        


                            
                            
                                {
                                    //这是已经存储过的线
                                    this.state.myAllList.map((item, id) => {
                                        return (
                                            item.pathType === 'line' ?
                                                 this.pathRef = ref}
                                                    key={id}
                                                    d={item.path}
                                                    fill="none"
                                                    strokeLinecap="round"
                                                    stroke={color_list[item.color_id]}
                                                    strokeWidth={line_list[item.size_id].size}
                                                    {...this._panResponderChange.panHandlers}
                                                /> :
                                                item.pathType === 'rect' ?
                                                     :
                                                    item.pathType === 'circle' ?
                                                         :
                                                        
                                                            
                                                            
                                                        

                                        )
                                    })
                                }
                                {/**这是正在画着的线**/}
                                {
                                    drawType === 4 && isDrawing ?
                                         : null
                                }

                                {/**画笔 结束**/}
                                {/***这是正在画的矩形***/}
                                {
                                    drawType === 5 && isDrawing ?
                                         : null
                                }
                                {/***这是正在画的椭圆***/}
                                {
                                    drawType === 3 && isDrawing ?
                                         : null
                                }
                                {/***这是箭头***/}
                                {
                                    drawType === 2 && isDrawing ?
                                        <>
                                            
                                            
                                         : null
                                }
                            
                        
                    
                    {
                        // 
                        //      this.setState({phone_mob: text})}
                        //         underlineColorAndroid={'transparent'}
                        //     />
                        // 
                    }
                    {isShowColorful ? this.renderColorful() : null}
                    {this.renderBottom()}
                
            
        );
    }


    renderBottom() {
        let {size_id, line_list, isShowLineSize, color_list, drawType} = this.state
        return (
            
                
                    选择
                    
                        
                            
                        
                         this.onSelectDrawType(1)}>
                            
                        
                    
                

                
                    线条选择
                    
                         this.onSelectDrawType(2)}>
                            
                        
                         this.onSelectDrawType(3)}>
                            
                        
                         this.onSelectDrawType(4)}>
                            
                        
                         this.onSelectDrawType(5)}>
                            
                        
                    
                

                
                    
                        粗细
                        颜色
                    
                    
                         this.onSelectDrawType(6)}
                                          style={{flexDirection: 'row', alignItems: 'center'}}>
                            
                            
                                
                            
                        

                         this.onSelectDrawType(7)}>
                            
                            
                        
                    
                    {isShowLineSize ? this.renderLineSize() : null}
                

                
                    操作
                    
                         this.revoke()} style={styles.bottom_btn}>
                            撤销
                        
                         this.clearOut()} style={styles.bottom_btn}>
                            清空
                        
                         this.savePhoto()}
                                          style={[styles.bottom_btn, {backgroundColor: '#203990'}]}>
                            保存
                        
                    
                
            
        )
    }

    //线条
    renderLineSize() {
        let {line_list} = this.state
        return (
            
                {
                    line_list.map((item, id) => {
                        return (
                             this.onSelectLineSize(item, id)}
                                              key={id} style={{flex: 1, justifyContent: 'center'}}>
                                
                            
                        )
                    })
                }
            
        )
    }

    //颜色
    renderColorful() {
        let {color_list} = this.state
        return (
            
                {
                    color_list.map((item, id) => {
                        return (
                             this.onSelectColor(item, id)}
                                              key={id} style={[styles.ColorItem, {backgroundColor: item}]}>
                            
                        )
                    })
                }
            
        )
    }

}

export default Comp3;
const styles = StyleSheet.create({
    /**内容*/
    container: {
        flex: 1,
    },
    camera_bottom: {
        backgroundColor: '#fff',
        height: '25%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },

    bottom_item: {
        paddingHorizontal: 10,
        borderRightWidth: 1,
        borderColor: '#eee',
        height: '70%',
        justifyContent: 'space-between'
    },
    bottom_icon: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    bottom_title: {fontSize: 12, marginBottom: 10},
    bottom_btn: {
        borderWidth: 1,
        borderRadius: 999,
        width: '30%',
        borderColor: '#A5AAC1',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 3
    },
    colorSelect: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        borderRadius: 5,
        paddingHorizontal: 2,
        paddingVertical: 2,
        borderColor: '#eee'
    },
    lineSelect: {
        backgroundColor: 'red',
        position: 'absolute',
        // bottom:0,
        height: '100%',
        width: 85,
    },
    kindsOfColors: {
        width: '100%',
        backgroundColor: '#fff',
        height: '50%',
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        paddingVertical: 10
    },
    ColorItem: {
        height: '50%',
        width: 60,
        borderWidth: 1,
        marginBottom: 5,
        borderColor: '#eee'
    },


});

你可能感兴趣的:(react-native 画笔(写字板、手写板)--2)