目前已完成功能包括线条标注箭头、圆圈、画笔、矩形、粗细、颜色、撤销、清空、保存。移动图片，标注文字暂时未完成，还有后期的一些功能未完善，如标注后，点击改标注可以随意修改其大小、位置、方向等,后面有时间再研究下。
其中箭头是最麻烦的，其他功能一旦熟悉花的时间不多，但是光是箭头花了差不多五天的时间，因为没有思路，想过用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.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'
},
});