yylib-quick-mobile/dist/yylib/rotary/YYRotary.js

yylib-quick-mobile

import React, {Component} from 'react';
import classnames from 'classnames';
import './YYRotary.less';
class YYRotary extends Component{
  constructor() {
     super(...arguments);
    var config={
        initPageX:0,
        initPageX:0,
        preAngle:0,
        curAngle:0,
        centerPointX:0,
        centerPointY:0,
        transferAngle:0,
        currentDeg:0
      }
      Object.assign(this,config);
  }
  componentDidMount(){
    let {size}=this.props;
    var _this=this;
    if(this.refs.YYRotary){
      var rect = this.refs.YYRotary.getBoundingClientRect();//获取当前组件的坐标点
      this.centerPointX=rect.x+size/2;//圆心x坐标
      this.centerPointY=rect.y+size/2;//圆心y坐标
      this.refs.YYRotary.addEventListener('touchstart',(event)=>{
        var cX = event.touches[0].pageX;
        var cY = event.touches[0].pageY;
        _this.initPageX = cX - _this.centerPointX; //初始化X坐标
        _this.initPageY = cY - _this.centerPointY; //初始化Y坐标
        _this.preAngle = Math.atan2(_this.initPageY, _this.initPageX);
      })
      this.refs.YYRotary.addEventListener('touchmove',(event)=>{
        var cX = event.touches[0].pageX;
        var cY = event.touches[0].pageY;
        _this.curAngle = Math.atan2(cY - _this.centerPointY, cX - _this.centerPointX);
        _this.transferAngle = _this.curAngle - _this.preAngle;
        var value= (_this.transferAngle * 180 / Math.PI);
        _this.currentDeg =_this.currentDeg +value;
        _this.refs.YYRotary.style.transform='rotate('+_this.currentDeg+'deg)';
        _this.initPageX = cX;
        _this.initPageY = cY;
        _this.preAngle = _this.curAngle;
        _this.props.rotaryCallback&&_this.props.rotaryCallback(_this.currentDeg);
      })
    }
  }
  render() {
    let {size,borderRadius,className,type,align,borderColor,borderWidth,borderStyle,background,backgroundColor,children}=this.props;
    let wrapClz = classnames({
      'yy-rotary': true,
      [`${type}`]:true,
      [`${align}`]:true,
      className,
    });
    var rotaryStyle =
    {
      width:size+'px',
      height:size+'px',
      borderRadius:borderRadius,
      border:`${borderWidth}px ${borderStyle} ${borderColor}`,
      backgroundColor:background?backgroundColor?backgroundColor:borderColor:null
    };
    if (align==='right') {
      rotaryStyle = Object.assign(rotaryStyle,{left:`calc(100% - ${size}px)`});
    }
    return (
      <div
        ref="YYRotary"
        className={wrapClz}
        style={rotaryStyle}>
        {children}
       </div>
    )
  }
}
YYRotary.defaultProps = {
    size: 200,//转盘尺寸
    borderRadius:'none',//自定义转盘半径
    type:'circular',//转盘形状
    borderColor:'#ccc',//border颜色,
    borderWidth:1,//border的宽度
    backgroundColor:'#ccc',//背景颜色
    background:false,//是否显示背景颜色,
    align:'left',//对齐方式,
    borderStyle:'solid'//边框格式
}
module.exports = YYRotary;