util.js 1.5 KB

12345678910111213141516171819202122232425262728293031
  1. export var VIEW_BOX_SIZE = 100;
  2. export var getCircleStyle = function getCircleStyle(perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth) {
  3. var stepSpace = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;
  4. var offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
  5. var positionDeg = gapDegree === 0 ? 0 : {
  6. bottom: 0,
  7. top: 180,
  8. left: 90,
  9. right: -90
  10. }[gapPosition];
  11. var strokeDashoffset = (100 - percent) / 100 * perimeterWithoutGap;
  12. // Fix percent accuracy when strokeLinecap is round
  13. // https://github.com/ant-design/ant-design/issues/35009
  14. if (strokeLinecap === 'round' && percent !== 100) {
  15. strokeDashoffset += strokeWidth / 2;
  16. // when percent is small enough (<= 1%), keep smallest value to avoid it's disappearance
  17. if (strokeDashoffset >= perimeterWithoutGap) {
  18. strokeDashoffset = perimeterWithoutGap - 0.01;
  19. }
  20. }
  21. var halfSize = VIEW_BOX_SIZE / 2;
  22. return {
  23. stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
  24. strokeDasharray: "".concat(perimeterWithoutGap, "px ").concat(perimeter),
  25. strokeDashoffset: strokeDashoffset + stepSpace,
  26. transform: "rotate(".concat(rotateDeg + offsetDeg + positionDeg, "deg)"),
  27. transformOrigin: "".concat(halfSize, "px ").concat(halfSize, "px"),
  28. transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',
  29. fillOpacity: 0
  30. };
  31. };