31 lines
1.5 KiB
JavaScript
31 lines
1.5 KiB
JavaScript
|
export var VIEW_BOX_SIZE = 100;
|
||
|
|
export var getCircleStyle = function getCircleStyle(perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth) {
|
||
|
|
var stepSpace = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;
|
||
|
|
var offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
|
||
|
|
var positionDeg = gapDegree === 0 ? 0 : {
|
||
|
|
bottom: 0,
|
||
|
|
top: 180,
|
||
|
|
left: 90,
|
||
|
|
right: -90
|
||
|
|
}[gapPosition];
|
||
|
|
var strokeDashoffset = (100 - percent) / 100 * perimeterWithoutGap;
|
||
|
|
// Fix percent accuracy when strokeLinecap is round
|
||
|
|
// https://github.com/ant-design/ant-design/issues/35009
|
||
|
|
if (strokeLinecap === 'round' && percent !== 100) {
|
||
|
|
strokeDashoffset += strokeWidth / 2;
|
||
|
|
// when percent is small enough (<= 1%), keep smallest value to avoid it's disappearance
|
||
|
|
if (strokeDashoffset >= perimeterWithoutGap) {
|
||
|
|
strokeDashoffset = perimeterWithoutGap - 0.01;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var halfSize = VIEW_BOX_SIZE / 2;
|
||
|
|
return {
|
||
|
|
stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
|
||
|
|
strokeDasharray: "".concat(perimeterWithoutGap, "px ").concat(perimeter),
|
||
|
|
strokeDashoffset: strokeDashoffset + stepSpace,
|
||
|
|
transform: "rotate(".concat(rotateDeg + offsetDeg + positionDeg, "deg)"),
|
||
|
|
transformOrigin: "".concat(halfSize, "px ").concat(halfSize, "px"),
|
||
|
|
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',
|
||
|
|
fillOpacity: 0
|
||
|
|
};
|
||
|
|
};
|