1
This commit is contained in:
+37
@@ -0,0 +1,37 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.getCircleStyle = exports.VIEW_BOX_SIZE = void 0;
|
||||
const VIEW_BOX_SIZE = exports.VIEW_BOX_SIZE = 100;
|
||||
const getCircleStyle = (perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth, stepSpace = 0) => {
|
||||
const offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
|
||||
const positionDeg = gapDegree === 0 ? 0 : {
|
||||
bottom: 0,
|
||||
top: 180,
|
||||
left: 90,
|
||||
right: -90
|
||||
}[gapPosition];
|
||||
let 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;
|
||||
}
|
||||
}
|
||||
const halfSize = VIEW_BOX_SIZE / 2;
|
||||
return {
|
||||
stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
|
||||
strokeDasharray: `${perimeterWithoutGap}px ${perimeter}`,
|
||||
strokeDashoffset: strokeDashoffset + stepSpace,
|
||||
transform: `rotate(${rotateDeg + offsetDeg + positionDeg}deg)`,
|
||||
transformOrigin: `${halfSize}px ${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
|
||||
};
|
||||
};
|
||||
exports.getCircleStyle = getCircleStyle;
|
||||
Reference in New Issue
Block a user