首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

react-native 圆弧拖动进度条实现的示例代码

Posted in Javascript onApril 12, 2018

本文介绍了react-native 圆弧拖动进度条实现的示例代码，分享给大家，具体如下：

先上效果图

react-native 圆弧拖动进度条实现的示例代码

因为需求需要实现这个效果图 非原生实现，

  1. 难点1：绘制 使用svg
  2. 难点2：点击事件的处理
  3. 难点3：封装

由于绘制需要是使用svg

此处自行百度 按照svg以及api 教学

视图代码块

render() {
 return (
  <View pointerEvents={'box-only'}
  //事件处理
  {...this._panResponder.panHandlers}>
  //实际圆环
  {this._renderCircleSvg()}
  // 计算中心距离
  <View
   style={{
   position: 'relative',
   top: -this.props.height / 2 - this.props.r,
   left: this.props.width / 2 - this.props.r,
   flex: 1,
   }}>
   // 暴露给外部渲染圆环中心的接口
   {this.props.renderCenterView(this.state.temp)}
  </View>
  </View>
 );


 _renderCircleSvg() {
 //中心点
 const cx = this.props.width / 2;
 const cy = this.props.height / 2;
 //计算是否有偏差角 对应图就是下面缺了一块的
 const prad = this.props.angle / 2 * (Math.PI / 180);
 //三角计算起点
 const startX = -(Math.sin(prad) * this.props.r) + cx;
 const startY = cy + Math.cos(prad) * this.props.r; 
 //终点
 const endX = Math.sin(prad) * this.props.r + cx;
 const endY = cy + Math.cos(prad) * this.props.r;

 // 计算进度点
 const progress = parseInt(
  this._circlerate() * (360 - this.props.angle) / 100,
  10
 );
 // 根据象限做处理 苦苦苦 高中数学全忘了，参考辅助线
 const t = progress + this.props.angle / 2;
 const progressX = cx - Math.sin(t * (Math.PI / 180)) * this.props.r;
 const progressY = cy + Math.cos(t * (Math.PI / 180)) * this.props.r;

// SVG的描述 这里百度下就知道什么意思
 const descriptions = [
  'M',
  startX,
  startY,
  'A',
  this.props.r,
  this.props.r,
  0,
  1,
  1,
  endX,
  endY,
 ].join(' ');

 const progressdescription = [
  'M',
  startX,
  startY,
  'A',
  this.props.r,
  this.props.r,
  0,
  //根据角度是否是0，1 看下效果就知道了
  t >= 180 + this.props.angle / 2 ? 1 : 0,
  1,
  progressX,
  progressY,
 ].join(' ');
 return (
  <Svg
  height={this.props.height}
  width={this.props.width}
  style={styles.svg}>
  <Path
   d={descriptions}
   fill="none"
   stroke={this.props.outArcColor}
   strokeWidth={this.props.strokeWidth} />
  <Path
   d={progressdescription}
   fill="none"
   stroke={this.props.progressvalue}
   strokeWidth={this.props.strokeWidth} />
  <Circle
   cx={progressX}
   cy={progressY}
   r={this.props.tabR}
   stroke={this.props.tabStrokeColor}
   strokeWidth={this.props.tabStrokeWidth}
   fill={this.props.tabColor} />
  </Svg>
 );
 }
}

事件处理代码块

// 参考react native 官网对手势的讲解
 iniPanResponder() {
 this.parseToDeg = this.parseToDeg.bind(this);
 this._panResponder = PanResponder.create({
  // 要求成为响应者：
  onStartShouldSetPanResponder: () => true,
  onStartShouldSetPanResponderCapture: () => true,
  onMoveShouldSetPanResponder: () => true,
  onMoveShouldSetPanResponderCapture: () => true,
  onPanResponderGrant: evt => {
  // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
  if (this.props.enTouch) {
   this.lastTemper = this.state.temp;
   const x = evt.nativeEvent.locationX;
   const y = evt.nativeEvent.locationY;
   this.parseToDeg(x, y);
  }
  },
  onPanResponderMove: (evt, gestureState) => {
  if (this.props.enTouch) {
   let x = evt.nativeEvent.locationX;
   let y = evt.nativeEvent.locationY;
   if (Platform.OS === 'android') {
   x = evt.nativeEvent.locationX + gestureState.dx;
   y = evt.nativeEvent.locationY + gestureState.dy;
   }
   this.parseToDeg(x, y);
  }
  },
  onPanResponderTerminationRequest: () => true,
  onPanResponderRelease: () => {
  if (this.props.enTouch) this.props.complete(this.state.temp);
  },
  // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
  onPanResponderTerminate: () => {},
  // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
  // 默认返回true。目前暂时只支持android。
  onShouldBlockNativeResponder: () => true,
 });
 }

//画象限看看就知道了 就是和中线点计算角度
parseToDeg(x, y) {
 const cx = this.props.width / 2;
 const cy = this.props.height / 2;
 let deg;
 let temp;
 if (x >= cx && y <= cy) {
  deg = Math.atan((cy - y) / (x - cx)) * 180 / Math.PI;
  temp =
  (270 - deg - this.props.angle / 2) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 } else if (x >= cx && y >= cy) {
  deg = Math.atan((cy - y) / (cx - x)) * 180 / Math.PI;
  temp =
  (270 + deg - this.props.angle / 2) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 } else if (x <= cx && y <= cy) {
  deg = Math.atan((x - cx) / (y - cy)) * 180 / Math.PI;
  temp =
  (180 - this.props.angle / 2 - deg) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 } else if (x <= cx && y >= cy) {
  deg = Math.atan((cx - x) / (y - cy)) * 180 / Math.PI;
  if (deg < this.props.angle / 2) {
  deg = this.props.angle / 2;
  }
  temp =
  (deg - this.props.angle / 2) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 }
 if (temp <= this.props.min) {
  temp = this.props.min;
 }
 if (temp >= this.props.max) {
  temp = this.props.max;
 }
 //因为提供步长，所欲需要做接近步长的数
 temp = this.getTemps(temp);
 this.setState({
  temp,
 });
 this.props.valueChange(this.state.temp);
 }

 getTemps(tmps) {
 const k = parseInt((tmps - this.props.min) / this.props.step, 10);
 const k1 = this.props.min + this.props.step * k;
 const k2 = this.props.min + this.props.step * (k + 1);
 if (Math.abs(k1 - tmps) > Math.abs(k2 - tmps)) return k2;
 return k1;
 }

完整代码块

import React, { Component } from 'react';
import { View, StyleSheet, PanResponder, Platform, Text } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

export default class CircleView extends Component {
 static propTypes = {
 height: React.PropTypes.number,
 width: React.PropTypes.number,
 r: React.PropTypes.number,
 angle: React.PropTypes.number,
 outArcColor: React.PropTypes.object,
 progressvalue: React.PropTypes.object,
 tabColor: React.PropTypes.object,
 tabStrokeColor: React.PropTypes.object,
 strokeWidth: React.PropTypes.number,
 value: React.PropTypes.number,
 min: React.PropTypes.number,
 max: React.PropTypes.number,
 tabR: React.PropTypes.number,
 step: React.PropTypes.number,
 tabStrokeWidth: React.PropTypes.number,
 valueChange: React.PropTypes.func,
 renderCenterView: React.PropTypes.func,
 complete: React.PropTypes.func,
 enTouch: React.PropTypes.boolean,
 };

 static defaultProps = {
 width: 300,
 height: 300,
 r: 100,
 angle: 60,
 outArcColor: 'white',
 strokeWidth: 10,
 value: 20,
 min: 10,
 max: 70,
 progressvalue: '#ED8D1B',
 tabR: 15,
 tabColor: '#EFE526',
 tabStrokeWidth: 5,
 tabStrokeColor: '#86BA38',
 valueChange: () => {},
 complete: () => {},
 renderCenterView: () => {},
 step: 1,
 enTouch: true,
 };
 constructor(props) {
 super(props);
 this.state = {
  temp: this.props.value,
 };
 this.iniPanResponder();
 }
 iniPanResponder() {
 this.parseToDeg = this.parseToDeg.bind(this);
 this._panResponder = PanResponder.create({
  // 要求成为响应者：
  onStartShouldSetPanResponder: () => true,
  onStartShouldSetPanResponderCapture: () => true,
  onMoveShouldSetPanResponder: () => true,
  onMoveShouldSetPanResponderCapture: () => true,
  onPanResponderGrant: evt => {
  // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
  if (this.props.enTouch) {
   this.lastTemper = this.state.temp;
   const x = evt.nativeEvent.locationX;
   const y = evt.nativeEvent.locationY;
   this.parseToDeg(x, y);
  }
  },
  onPanResponderMove: (evt, gestureState) => {
  if (this.props.enTouch) {
   let x = evt.nativeEvent.locationX;
   let y = evt.nativeEvent.locationY;
   if (Platform.OS === 'android') {
   x = evt.nativeEvent.locationX + gestureState.dx;
   y = evt.nativeEvent.locationY + gestureState.dy;
   }
   this.parseToDeg(x, y);
  }
  },
  onPanResponderTerminationRequest: () => true,
  onPanResponderRelease: () => {
  if (this.props.enTouch) this.props.complete(this.state.temp);
  },
  // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
  onPanResponderTerminate: () => {},
  // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
  // 默认返回true。目前暂时只支持android。
  onShouldBlockNativeResponder: () => true,
 });
 }
 componentWillReceiveProps(nextProps) {
 if (nextProps.value != this.state.temp) {
  this.state = {
  temp: nextProps.value,
  };
 }
 }
 parseToDeg(x, y) {
 const cx = this.props.width / 2;
 const cy = this.props.height / 2;
 let deg;
 let temp;
 if (x >= cx && y <= cy) {
  deg = Math.atan((cy - y) / (x - cx)) * 180 / Math.PI;
  temp =
  (270 - deg - this.props.angle / 2) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 } else if (x >= cx && y >= cy) {
  deg = Math.atan((cy - y) / (cx - x)) * 180 / Math.PI;
  temp =
  (270 + deg - this.props.angle / 2) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 } else if (x <= cx && y <= cy) {
  deg = Math.atan((x - cx) / (y - cy)) * 180 / Math.PI;
  temp =
  (180 - this.props.angle / 2 - deg) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 } else if (x <= cx && y >= cy) {
  deg = Math.atan((cx - x) / (y - cy)) * 180 / Math.PI;
  if (deg < this.props.angle / 2) {
  deg = this.props.angle / 2;
  }
  temp =
  (deg - this.props.angle / 2) /
   (360 - this.props.angle) *
   (this.props.max - this.props.min) +
  this.props.min;
 }
 if (temp <= this.props.min) {
  temp = this.props.min;
 }
 if (temp >= this.props.max) {
  temp = this.props.max;
 }

 temp = this.getTemps(temp);
 this.setState({
  temp,
 });
 this.props.valueChange(this.state.temp);
 }

 getTemps(tmps) {
 const k = parseInt((tmps - this.props.min) / this.props.step, 10);
 const k1 = this.props.min + this.props.step * k;
 const k2 = this.props.min + this.props.step * (k + 1);
 if (Math.abs(k1 - tmps) > Math.abs(k2 - tmps)) return k2;
 return k1;
 }


 render() {
 return (
  <View pointerEvents={'box-only'} {...this._panResponder.panHandlers}>
  {this._renderCircleSvg()}
  <View
   style={{
   position: 'relative',
   top: -this.props.height / 2 - this.props.r,
   left: this.props.width / 2 - this.props.r,
   flex: 1,
   }}>
   {this.props.renderCenterView(this.state.temp)}
  </View>
  </View>
 );
 }

 _circlerate() {
 let rate = parseInt(
  (this.state.temp - this.props.min) *
  100 /
  (this.props.max - this.props.min),
  10
 );
 if (rate < 0) {
  rate = 0;
 } else if (rate > 100) {
  rate = 100;
 }
 return rate;
 }
 _renderCircleSvg() {
 const cx = this.props.width / 2;
 const cy = this.props.height / 2;
 const prad = this.props.angle / 2 * (Math.PI / 180);
 const startX = -(Math.sin(prad) * this.props.r) + cx;
 const startY = cy + Math.cos(prad) * this.props.r; // // 最外层的圆弧配置
 const endX = Math.sin(prad) * this.props.r + cx;
 const endY = cy + Math.cos(prad) * this.props.r;

 // 计算进度点
 const progress = parseInt(
  this._circlerate() * (360 - this.props.angle) / 100,
  10
 );
 // 根据象限做处理 苦苦苦 高中数学全忘了，参考辅助线
 const t = progress + this.props.angle / 2;
 const progressX = cx - Math.sin(t * (Math.PI / 180)) * this.props.r;
 const progressY = cy + Math.cos(t * (Math.PI / 180)) * this.props.r;

 const descriptions = [
  'M',
  startX,
  startY,
  'A',
  this.props.r,
  this.props.r,
  0,
  1,
  1,
  endX,
  endY,
 ].join(' ');

 const progressdescription = [
  'M',
  startX,
  startY,
  'A',
  this.props.r,
  this.props.r,
  0,
  t >= 180 + this.props.angle / 2 ? 1 : 0,
  1,
  progressX,
  progressY,
 ].join(' ');
 return (
  <Svg
  height={this.props.height}
  width={this.props.width}
  style={styles.svg}>
  <Path
   d={descriptions}
   fill="none"
   stroke={this.props.outArcColor}
   strokeWidth={this.props.strokeWidth} />
  <Path
   d={progressdescription}
   fill="none"
   stroke={this.props.progressvalue}
   strokeWidth={this.props.strokeWidth} />
  <Circle
   cx={progressX}
   cy={progressY}
   r={this.props.tabR}
   stroke={this.props.tabStrokeColor}
   strokeWidth={this.props.tabStrokeWidth}
   fill={this.props.tabColor} />
  </Svg>
 );
 }
}

const styles = StyleSheet.create({
 svg: {},
});

外部调用

<View style={styles.container}>
  <CircleProgress
   width={width}
   height={height}
   r={r}
   angle={60}
   min={5}
   max={35}
   step={0.5}
   value={22}
   complete={temp => {

   }}
   valueChange={temp => {}}
   renderCenterView={temp => (
   <View style={{ flex: 1 }}>

   </View>
   )}
   enTouch={true} />
  </View>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

react-native 圆弧拖动进度条实现的示例代码

- Author -

林胖子的私生活

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
javascript正则表达式定义（语法）总结
Jan 08 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
关于vue中 $emit的用法详解
Apr 12 #Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 #Javascript
JS中promise化微信小程序api
Apr 12 #Javascript
vue配置请求本地json数据的方法
Apr 11 #Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
JS实现的合并多个数组去重算法示例
Apr 11 #Javascript
JS实现的JSON数组去重算法示例
Apr 11 #Javascript
慰问信(53) 党团范文(807) 开幕词(63) 汇报材料(247) 计划(88) 导游词(322) 报告(147) 工作总结(1972) 闭幕词(9) 口号(179)
You might like
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
一个不错的应用,用于提交获取文章内容，不推荐用
2007/03/03 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jQuery 性能优化指南（2）
2009/05/21 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Conforama西班牙：您的家具、装饰和电器商店
2020/02/21 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
单位办理社保介绍信
2014/01/10 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
离婚协议书范本样本
2014/08/19 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
转正申请报告格式
2015/05/15 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python