42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* Get balanced dash-strokearray and dash-strokeoffset properties for a path of a given length.
|
||
|
|
* @param length The length of the path.
|
||
|
|
* @param strokeWidth The shape's stroke-width property.
|
||
|
|
* @param style The stroke's style: "dashed" or "dotted" (default "dashed").
|
||
|
|
* @param snap An interval for dashes (e.g. 4 will produce arrays with 4, 8, 16, etc dashes).
|
||
|
|
*/
|
||
|
|
export function getPerfectDashProps(
|
||
|
|
length: number,
|
||
|
|
strokeWidth: number,
|
||
|
|
style: 'dashed' | 'dotted' = 'dashed',
|
||
|
|
snap = 1
|
||
|
|
): {
|
||
|
|
strokeDasharray: string
|
||
|
|
strokeDashoffset: string
|
||
|
|
} {
|
||
|
|
let dashLength: number
|
||
|
|
let strokeDashoffset: string
|
||
|
|
let ratio: number
|
||
|
|
|
||
|
|
if (style === 'dashed') {
|
||
|
|
dashLength = strokeWidth * 2
|
||
|
|
ratio = 1
|
||
|
|
strokeDashoffset = (dashLength / 2).toString()
|
||
|
|
} else {
|
||
|
|
dashLength = strokeWidth / 4
|
||
|
|
ratio = 4
|
||
|
|
strokeDashoffset = '0'
|
||
|
|
}
|
||
|
|
|
||
|
|
let dashes = Math.floor(length / dashLength / (2 * ratio))
|
||
|
|
dashes -= dashes % snap
|
||
|
|
if (dashes === 0) dashes = 1
|
||
|
|
|
||
|
|
const gapLength = (length - dashes * dashLength) / dashes
|
||
|
|
|
||
|
|
return {
|
||
|
|
strokeDasharray: [dashLength, gapLength].join(' '),
|
||
|
|
strokeDashoffset,
|
||
|
|
}
|
||
|
|
}
|