Skip to content

Instantly share code, notes, and snippets.

@huanggm
Last active July 17, 2020 07:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save huanggm/41a2b0da9fa0390c9aad1d9de3980257 to your computer and use it in GitHub Desktop.
Save huanggm/41a2b0da9fa0390c9aad1d9de3980257 to your computer and use it in GitHub Desktop.
只用svg path命令绘制空心正五边形,需要注意fill的规则
//min: 内径长度
//max: 外径长度
function pentagon5(min, max) {
const minPoint = transform(getBasePoint(min), max);
const maxPoint = transform(getBasePoint(max), max);
maxPoint.reverse();
return toStr(minPoint) + toStr(maxPoint)
function getBasePoint(base) {
const sin = Math.sin;
const cos = Math.cos;
const pi = Math.PI;
return [
[0, -base],
[base * cos(1/10 * pi), -base * sin(1/10 * pi)],
[base * sin(1/5 * pi), base * cos(1/5 * pi)],
[-base * sin(1/5 * pi), base * cos(1/5 * pi)],
[-base * cos(1/10 * pi), -base * sin(1/10 * pi)]
]
}
function transform(point, offset) {
return point.map(arr => arr.map(x => x + offset))
}
function toStr(point) {
let str = '';
return point.reduce((acc, cur, index)=>{
const tmp = (~~cur[0]===cur[0] ? ''+cur[0] : cur[0].toFixed(3)) + ',' + (~~cur[1]===cur[1] ? ''+cur[1] : cur[1].toFixed(3));
if(index===0) {
acc+='M'+tmp;
} else {
acc+='L'+tmp;
}
if(index===point.length-1) {
acc+='Z'
}
return acc;
}, '');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment