Skip to content

Commit 0ef1010

Browse files
author
lusen
committed
fix:增加模版2
1 parent eba0a16 commit 0ef1010

6 files changed

+224
-6
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎font-family/44b5dDG7-HRBhsh4rHP3Y.woff

2.25 KB
Binary file not shown.

‎font-family/44b5dDG7-HRBhsh4rHP3Y.woff2

1.57 KB
Binary file not shown.

‎module.html

+17-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,25 @@
22
<html>
33
<head>
44
<meta charset="utf-8"/>
5-
<link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">
5+
<!-- <link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet"> -->
6+
<style type="text/css">
7+
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
8+
@font-face {
9+
font-family: "阿里巴巴普惠体 2.0 105 Heavy";
10+
font-weight: 900;
11+
src: url("./font-family/44b5dDG7-HRBhsh4rHP3Y.woff2") format("woff2"),
12+
url("./font-family/44b5dDG7-HRBhsh4rHP3Y.woff") format("woff");
13+
font-display: swap;
14+
}
15+
16+
html,body {
17+
font-family: "阿里巴巴普惠体 2.0 105 Heavy";
18+
}
19+
20+
</style>
621
</head>
722
<body>
823
<canvas id="canvas"></canvas>
9-
10-
<script src="./module.js"></script>
24+
<script async src="./module2.js"></script>
1125
</body>
1226
</html>

‎module.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const json = {
1010
"top": "50"
1111
},
1212
"config": {
13-
"textAlign": "center",
13+
"textAlign": "right",
1414
"textBaseline": "top",
1515
"lineHeight": 30,
1616
"font": {
@@ -51,7 +51,6 @@ const json = {
5151
}
5252
}
5353

54-
5554
function parseJsonToCanvas(json) {
5655
const canvas = document.querySelector('canvas');
5756
const ctx = canvas.getContext('2d');
@@ -101,5 +100,5 @@ function renderLinearGradient(text, gradient, ctx) {
101100
});
102101
return _gradient;
103102
}
103+
parseJsonToCanvas(json);
104104

105-
parseJsonToCanvas(json);

‎module2.js

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
const json = {
2+
"moduleId": 10000,
3+
"name": "effectText",
4+
"canvas": {
5+
"width": 700,
6+
"height": 1000
7+
},
8+
"position": {
9+
// "left": "0",
10+
// "top": "50"
11+
},
12+
"config": {
13+
"font": {
14+
"fontStyle": "normal",
15+
"fontWeight": 900,
16+
"fontSize": "60px",
17+
"fontFamily": "SimSun, Songti SC",
18+
},
19+
"contents": [
20+
{
21+
"text": "通勤风长袖条纹",
22+
"fillStyle": '#BEFE1F',
23+
"textAlign": 'center',
24+
"shadowOffsetX": 3,
25+
"shadowOffsetY": 2,
26+
"shadowColor": '#000000',
27+
"position": {
28+
"top": "50",
29+
"right": "0",
30+
"left": "0"
31+
},
32+
"effects": [
33+
{
34+
"strokeStyle": '#000000',
35+
"lineWidth": 4
36+
}
37+
]
38+
},
39+
{
40+
"text": "水洗超高腰",
41+
"fillStyle": '#FCE370',
42+
"textAlign": 'left',
43+
"position": {
44+
"top": "50",
45+
"right": "0",
46+
"left": "0"
47+
},
48+
"effects": [
49+
{
50+
"strokeStyle": '#000000',
51+
"lineWidth": 4
52+
}
53+
]
54+
},
55+
{
56+
"text": "直筒长裤",
57+
"fillStyle": '#FCE370',
58+
"effects": [
59+
{
60+
"strokeStyle": '#000000',
61+
"lineWidth": 4
62+
}
63+
]
64+
},
65+
{
66+
"text": "迷你自动白色",
67+
"fillStyle": '#FFFFFF',
68+
"textAlign": 'left',
69+
"lineHeight": 10,
70+
"position": {
71+
"left": "60"
72+
},
73+
"effects": [
74+
{
75+
"strokeStyle": '#000000',
76+
"lineWidth": 6
77+
}
78+
]
79+
},
80+
{
81+
"text": "生活电器",
82+
"fillStyle": '#000000',
83+
"textAlign": 'left',
84+
"position": {
85+
"left": "60",
86+
},
87+
"effects": [
88+
{
89+
"strokeStyle": '#ffffff',
90+
"lineWidth": 6
91+
}
92+
]
93+
},
94+
{
95+
"text": "OL风两件套",
96+
"fillStyle": '#FFFFFF',
97+
"textAlign": 'right',
98+
"lineHeight": 10,
99+
"shadowOffsetX": 5,
100+
"shadowOffsetY": 4,
101+
"shadowColor": '#6D92FF',
102+
"shadowBlur":0,
103+
"position": {
104+
"right": "10"
105+
},
106+
"effects": [
107+
{
108+
"strokeStyle": '#0546FF',
109+
"lineWidth": 4
110+
}
111+
]
112+
},
113+
{
114+
"text": "职业装",
115+
"fillStyle": '#FFFFFF',
116+
"textAlign": 'right',
117+
"effects": [
118+
{
119+
"strokeStyle": '#0546FF',
120+
"lineWidth": 4
121+
}
122+
]
123+
},
124+
],
125+
}
126+
}
127+
128+
function parseJsonToCanvas(json) {
129+
const canvas = document.querySelector('canvas');
130+
const ctx = canvas.getContext('2d');
131+
canvas.width = json.canvas.width;
132+
canvas.height = json.canvas.height;
133+
134+
ctx.x = json.position.left || canvas.width/2;
135+
ctx.y = json.position.top || canvas.height/2;
136+
137+
// 渲染默认字体大小
138+
ctx.font = json.config.font && Object.values(json.config.font).join(" ");
139+
ctx.fontSize = json.config.font && json.config.font.fontSize && parseInt(json.config.font.fontSize, 10);
140+
141+
json.config.contents.forEach((item, index) => {
142+
Object.keys(item).forEach(key => {
143+
item[key] ? ctx[key] = item[key] : '';
144+
});
145+
const text = item.text;
146+
const _textZh = ctx.measureText(item.text);
147+
ctx.textBaseline = item.textBaseline || 'top';
148+
ctx.lineHeight = item.lineHeight ? parseInt(item.lineHeight, 10) : 10;
149+
if(item.textAlign) {
150+
ctx.textAlign = item.textAlign
151+
}
152+
153+
//x 轴设置, left,right 同时存在为居中，不设置position: left/right 则默认居中。优先级：right > left > center
154+
if(item.position && item.position.left && item.position.right) {
155+
if (item.textAlign === 'left') {
156+
ctx.x = canvas.width/2 - _textZh.width/2;
157+
}
158+
if (item.textAlign === 'right') {
159+
ctx.x = canvas.width/2 + _textZh.width/2;
160+
}
161+
if (item.textAlign === 'center') {
162+
ctx.x = canvas.width/2
163+
}
164+
} else if (item.position && item.position.right) {
165+
ctx.x = canvas.width - parseInt(item.position.right, 10)
166+
} else if(item.position && item.position.left) {
167+
ctx.x = parseInt(item.position.left, 10);
168+
}
169+
170+
// y 轴设置
171+
if(item.position && item.position.top) {
172+
ctx.y = item.position.top
173+
}
174+
175+
// 渲染描边
176+
item.effects && item.effects.forEach((effect) => {
177+
if (effect.strokeStyle) {
178+
ctx.strokeStyle = effect.strokeStyle;
179+
}
180+
if (effect.gradient && effect.gradient.length > 0) {
181+
const _strokeStyle = renderLinearGradient(text, effect.gradient, ctx);
182+
ctx.strokeStyle = _strokeStyle;
183+
}
184+
185+
ctx.lineWidth = effect.lineWidth;
186+
ctx.strokeText(text, ctx.x, Number(ctx.y)+ index*(ctx.fontSize + ctx.lineHeight));
187+
});
188+
189+
// 渲染文字
190+
ctx.fillText(item.text, ctx.x, Number(ctx.y)+ index*(ctx.fontSize + ctx.lineHeight));
191+
});
192+
}
193+
194+
function renderLinearGradient(text, gradient, ctx) {
195+
const text_width = ctx.measureText(text);
196+
const _gradient = ctx.createLinearGradient(0,0,text_width.width,0);
197+
gradient.forEach(y => {
198+
Object.entries(y).forEach(u => {
199+
_gradient.addColorStop(u[0],u[1]);
200+
});
201+
});
202+
return _gradient;
203+
}
204+
parseJsonToCanvas(json);
205+

0 commit comments

Comments
 (0)