React-SVG圆环_034

React 圆环 SemiCircle

代码

import React from "react";

class SemiCircle extends React.Component {
  constructor(props) {
    super(props);
  }

  polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
    var angleInRadians = ((angleInDegrees - 180) * Math.PI) / 180;

    return {
      x: centerX + radius * Math.cos(angleInRadians),
      y: centerY + radius * Math.sin(angleInRadians)
    };
  };

  describeArc = (x, y, radius, startAngle, endAngle) => {
    var start = this.polarToCartesian(x, y, radius, endAngle);
    var end = this.polarToCartesian(x, y, radius, startAngle);
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
    var d = [
      "M",
      start.x,
      start.y,
      "A",
      radius,
      radius,
      0,
      largeArcFlag,
      0,
      end.x,
      end.y
    ].join(" ");
    return d;
  };
  render() {
    const { size, scoreSafe, strokeColor, safeText } = this.props;
    const gradient = strokeColor => {
      if (!strokeColor) return;
      let arr = strokeColor.map((item, index) => {
        let { offset, color, opacity } = item;
        return (
          
        );
      });
      return (
        
          
            {arr}
          
        
      );
    };
    return (
      

        
      
    );
  }
}

export default SemiCircle;

// 示例