首页
所有分类
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 相关文章推荐
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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
SSH(3) 数据表(1) 算法(1) 2022年7月新番(1) 后端(1) Vscode(3) OVERLORD(1) 人人对战(1) 双人对弈(1) 时钟(1)
You might like
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
利用python进行文件操作
2020/12/04 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Mio Skincare美国官网：身体紧致及孕期身体护理
2017/03/05 全球购物
英国街头品牌：Bee Inspired Clothing
2018/02/12 全球购物
英国最大的在线照明商店：Litecraft
2020/08/31 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
总经理岗位职责范本
2014/02/02 职场文书
采购助理岗位职责
2014/02/16 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
运动会主持人开幕词
2016/03/04 职场文书