Skip to content

Commit cdea1f2

Browse files
CPPAlienCPPAlien
committed
fix: calc 引起的 dancePalette 问题
1 parent 5c155bf commit cdea1f2

File tree

4 files changed

+371
-414
lines changed

4 files changed

+371
-414
lines changed

‎lib/calc.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var calculate = function (s) {
1+
module.exports = function (s) {
22
s = s.trim();
33
const stack = new Array();
44
let preSign = '+';
@@ -45,6 +45,4 @@ var calculate = function (s) {
4545
ans += stack.pop();
4646
}
4747
return ans;
48-
};
49-
50-
module.exports = calculate;
48+
};

‎lib/pen.js

+42-39
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
const QR = require('./qrcode.js');
22
const GD = require('./gradient.js');
33

4+
export const penCache = {
5+
// 用于存储带 id 的 view 的 rect 信息
6+
viewRect: {},
7+
textLines: {},
8+
};
9+
export const clearPenCache = id => {
10+
if (id) {
11+
penCache.viewRect[id] = null;
12+
penCache.textLines[id] = null;
13+
} else {
14+
penCache.viewRect = {};
15+
penCache.textLines = {};
16+
}
17+
};
418
export default class Painter {
519
constructor(ctx, data) {
620
this.ctx = ctx;
721
this.data = data;
822
}
923

10-
isMoving = false;
11-
// 动态模板时的缓存，加速渲染
12-
movingCache = {};
13-
callbackInfo = {};
14-
// 用于存储带 id 的 view 的 rect 信息
15-
viewRect = {};
16-
paint(callback, isMoving, movingCache) {
24+
paint(callback) {
1725
this.style = {
1826
width: this.data.width.toPx(),
1927
height: this.data.height.toPx(),
2028
};
21-
if (isMoving) {
22-
this.isMoving = true;
23-
this.movingCache = movingCache;
24-
}
29+
2530
this._background();
2631
for (const view of this.data.views) {
2732
this._drawAbsolute(view);
2833
}
2934
this.ctx.draw(false, () => {
30-
callback && callback(this.callbackInfo);
35+
callback && callback();
3136
});
3237
}
3338

@@ -262,14 +267,14 @@ export default class Painter {
262267
width = Math.round(view.sWidth / ratio);
263268
height = Math.round(view.sHeight / ratio);
264269
} else if (view.css.width === 'auto') {
265-
height = view.css.height.toPx(false, this.style.height, this.viewRect);
270+
height = view.css.height.toPx(false, this.style.height);
266271
width = (view.sWidth / view.sHeight) * height;
267272
} else if (view.css.height === 'auto') {
268-
width = view.css.width.toPx(false, this.style.width, this.viewRect);
273+
width = view.css.width.toPx(false, this.style.width);
269274
height = (view.sHeight / view.sWidth) * width;
270275
} else {
271-
width = view.css.width.toPx(false, this.style.width, this.viewRect);
272-
height = view.css.height.toPx(false, this.style.height, this.viewRect);
276+
width = view.css.width.toPx(false, this.style.width);
277+
height = view.css.height.toPx(false, this.style.height);
273278
}
274279
break;
275280
}
@@ -278,41 +283,44 @@ export default class Painter {
278283
console.error('You should set width and height');
279284
return;
280285
}
281-
width = view.css.width.toPx(false, this.style.width, this.viewRect);
282-
height = view.css.height.toPx(false, this.style.height, this.viewRect);
286+
width = view.css.width.toPx(false, this.style.width);
287+
height = view.css.height.toPx(false, this.style.height);
283288
break;
284289
}
285290
let x;
286291
if (view.css && view.css.right) {
287292
if (typeof view.css.right === 'string') {
288-
x = this.style.width - view.css.right.toPx(true, this.style.width, this.viewRect);
293+
x = this.style.width - view.css.right.toPx(true, this.style.width);
289294
} else {
290295
// 可以用数组方式，把文字长度计算进去
291296
// [right, 文字id, 乘数（默认 1）]
292297
const rights = view.css.right;
293-
x = this.style.width - rights[0].toPx(true, this.style.width) - this.viewRect[rights[1]].width * (rights[2] || 1);
298+
x =
299+
this.style.width -
300+
rights[0].toPx(true, this.style.width) -
301+
penCache.viewRect[rights[1]].width * (rights[2] || 1);
294302
}
295303
} else if (view.css && view.css.left) {
296304
if (typeof view.css.left === 'string') {
297-
x = view.css.left.toPx(true, this.style.width, this.viewRect);
305+
x = view.css.left.toPx(true, this.style.width);
298306
} else {
299307
const lefts = view.css.left;
300-
x = lefts[0].toPx(true, this.style.width) + this.viewRect[lefts[1]].width * (lefts[2] || 1);
308+
x = lefts[0].toPx(true, this.style.width) + penCache.viewRect[lefts[1]].width * (lefts[2] || 1);
301309
}
302310
} else {
303311
x = 0;
304312
}
305313
//const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0);
306314
let y;
307315
if (view.css && view.css.bottom) {
308-
y = this.style.height - height - view.css.bottom.toPx(true, this.style.height, this.viewRect);
316+
y = this.style.height - height - view.css.bottom.toPx(true, this.style.height);
309317
} else {
310318
if (view.css && view.css.top) {
311319
if (typeof view.css.top === 'string') {
312-
y = view.css.top.toPx(true, this.style.height, this.viewRect);
320+
y = view.css.top.toPx(true, this.style.height);
313321
} else {
314322
const tops = view.css.top;
315-
y = tops[0].toPx(true, this.style.height) + this.viewRect[tops[1]].height * (tops[2] || 1);
323+
y = tops[0].toPx(true, this.style.height) + penCache.viewRect[tops[1]].height * (tops[2] || 1);
316324
}
317325
} else {
318326
y = 0;
@@ -396,7 +404,7 @@ export default class Painter {
396404
}
397405
this._doShadow(view);
398406
if (view.id) {
399-
this.viewRect[view.id] = {
407+
penCache.viewRect[view.id] = {
400408
width,
401409
height,
402410
left: x,
@@ -520,10 +528,9 @@ export default class Painter {
520528
this.ctx.save();
521529
const { width, height, extra } = this._preProcess(view, view.css.background && view.css.borderRadius);
522530
this.ctx.fillStyle = view.css.color || 'black';
523-
if (this.isMoving && JSON.stringify(this.movingCache) !== JSON.stringify({})) {
524-
this.viewRect[view.id] = this.movingCache.viewRect;
531+
if (view.id && penCache.textLines[view.id]) {
525532
this.ctx.textAlign = view.css.textAlign ? view.css.textAlign : 'left';
526-
for (const i of this.movingCache.lineArray) {
533+
for (const i of penCache.textLines[view.id]) {
527534
const { measuredWith, text, x, y, textDecoration } = i;
528535
if (view.css.textStyle === 'stroke') {
529536
this.ctx.strokeText(text, x, y, measuredWith);
@@ -550,12 +557,7 @@ export default class Painter {
550557
const _w = this.ctx.measureText(textArray[i]).width;
551558
textWidth = _w > textWidth ? _w : textWidth;
552559
}
553-
this.viewRect[view.id].width = width ? (textWidth < width ? textWidth : width) : textWidth;
554-
if (!this.isMoving) {
555-
Object.assign(this.callbackInfo, {
556-
viewRect: this.viewRect[view.id],
557-
});
558-
}
560+
penCache.viewRect[view.id].width = width ? (textWidth < width ? textWidth : width) : textWidth;
559561
}
560562
let lineIndex = 0;
561563
for (let j = 0; j < textArray.length; ++j) {
@@ -619,6 +621,7 @@ export default class Painter {
619621
lineX = x;
620622
break;
621623
}
624+
622625
const y =
623626
-(height / 2) +
624627
(lineIndex === 0 ? view.css.fontSize.toPx() : view.css.fontSize.toPx() + lineIndex * lineHeight);
@@ -661,16 +664,16 @@ export default class Painter {
661664
this.ctx.strokeStyle = view.css.color;
662665
this.ctx.stroke();
663666
}
664-
if (!this.isMoving) {
665-
this.callbackInfo.lineArray
666-
? this.callbackInfo.lineArray.push({
667+
if (view.id) {
668+
penCache.textLines[view.id]
669+
? penCache.textLines[view.id].push({
667670
text,
668671
x,
669672
y,
670673
measuredWith,
671674
textDecoration,
672675
})
673-
: (this.callbackInfo.lineArray = [
676+
: (penCache.textLines[view.id] = [
674677
{
675678
text,
676679
x,

0 commit comments

Comments
 (0)