/
readme.js
115 lines (110 loc) · 4.45 KB
/
readme.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
const http = require('http');
const querystring = require('querystring');
function generateCircle(params) {
let svg = `
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
>
<rect rx="10" ry="10" width="${params.width}" height="${params.height}" style="background: #1a1b27;"></rect>
<text x="100" y="75" stroke="${params.color}" fill="none" stroke-width=".5" text-anchor="middle">${params.name}</text>
<path d="M 100 25 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 Z" fill="none" stroke="#ccc" stroke-width="5"></path>
<path d="M 100 25 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 Z" fill="none" stroke="${params.color}" stroke-width="5" stroke-linecap="round" stroke-dasharray="314.1592653589793">
<animate attributeName="stroke-dashoffset" from="314.1592653589793" to="0" dur="3s" repeatCount="1" />
</path>
</svg>
`;
return svg
}
function generateText(params) {
/**
* svg path A参数说明
* A rx ry x-axis-rotation large-arc-flag sweep-flag x y
* rx: x轴半径
* ry: y轴半径
* x-axis-rotation: 指椭圆的X轴与水平方向顺时针方向夹角,可以想象成一个水平的椭圆绕中心点顺时针旋转的角度
* large-arc-flag: 1表示大角度弧线,0为小角度弧线
* sweep-flag: 1为顺时针方向,0位逆时针方向
* x: 结束点x坐标
* y: 结束点y坐标
*/
const svg = `<svg width="${params.width}" height="${params.height}" viewBox="0 0 ${params.width} ${params.height}" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="textCircle" d="M 20 100 A 80 80 0 0 1 180 100 A 80 80 0 0 1 20 100" fill="none" stroke="#333"></path>
</defs>
<text class="textCircle" fill="${params.color}" style="font-size: ${params.size}px; letter-spacing: 4px;">
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#textCircle">${params.text}</textPath>
</text>
</svg>`
return svg;
}
function animateWord(params) {
const textCopy = `fill: none;stroke-dasharray: 7% 28%;stroke-width: 3px;`;
const texts = [
{ color: '#360745', v: '7%' },
{ color: '#D61C59', v: '14%' },
{ color: '#E7D84B', v: '21%' },
{ color: '#EFEAC5', v: '28%' },
{ color: '#1B8798', v: '35%' }
];
params.text = params.text || 'btea'
const svg = `
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 ${params.width} ${params.height}"
width="${params.width}px" height="${params.height}px"
>
<rect rx="10" ry="10" width="${params.width}" height="${params.height}" style="background: #1a1b27;"></rect>
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" style="font-size:2em;">${params.text}</text>
</symbol>
<g>
${texts
.map(t => {
return `<use xlink:href="#s-text" style="${textCopy}stroke:${t.color};stroke-dashoffset:${t.v};">
<animate attributeName="stroke-dashoffset" from="${t.v}" to="35%" dur="9s" repeatCount="indefinite" />
<animate attributeName="stroke-dasharray" from="7% 28%" to="0 87.5%" dur="9s" repeatCount="indefinite" />
</use>`;
})
.join('')}
</g>
</svg>
`;
return svg;
}
function generateSvg(params) {
const obj = {
name: 'btea',
color: '#6cf',
type: 'image',
width: 200,
height: 150
}
params = Object.assign(obj, params);
let img, type = params.type;
if (type === 'image') {
img = generateCircle(params);
}
if (type === 'text') {
img = generateText(params);
}
if (type === 'animate') {
img = animateWord(params);
}
return img;
}
http.createServer((req, res) => {
let { url } = req;
let params = url.split('?');
let val = params[0];
if (/image$/.test(val)) {
res.setHeader('Cache-Control', ['no-cache', 'must-revalidate']);
res.setHeader('Pragma', 'no-cache');
res.setHeader('Content-Type', 'image/svg+xml;charset=utf-8');
params = querystring.parse(params[1] || '');
let image = generateSvg(params);
res.end(image);
return;
}
res.end('');
}).listen(3322);