open/PainterCore
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 解决textDecoration错位问题

Browse Source
This commit is contained in:
0JARVIS0 2019-11-26 11:55:39 +08:00
parent 6dc9e69fa1
commit a48b0e0a04
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
lib/pen.js
View File

@ -583,15 +583,19 @@ export default class Painter {
} }
this.ctx.setTextAlign(view.css.textAlign ? view.css.textAlign : 'left'); this.ctx.setTextAlign(view.css.textAlign ? view.css.textAlign : 'left');
let x; let x;
let lineX;
switch (view.css.textAlign) { switch (view.css.textAlign) {
case 'center': case 'center':
x = 0; x = 0;
lineX = x - measuredWith / 2;
break; break;
case 'right': case 'right':
x = (width / 2); x = (width / 2);
lineX = x - measuredWith;
break; break;
default: default:
x = -(width / 2); x = -(width / 2);
lineX = x;
break; break;
} }
const y = -(height / 2) + (lineIndex === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + lineIndex * lineHeight)); const y = -(height / 2) + (lineIndex === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + lineIndex * lineHeight));
@ -605,27 +609,27 @@ export default class Painter {
if (view.css.textDecoration) { if (view.css.textDecoration) {
this.ctx.beginPath(); this.ctx.beginPath();
if (/\bunderline\b/.test(view.css.textDecoration)) { if (/\bunderline\b/.test(view.css.textDecoration)) {
this.ctx.moveTo(x, y); this.ctx.moveTo(lineX, y);
this.ctx.lineTo(x + measuredWith, y); this.ctx.lineTo(lineX + measuredWith, y);
!this.isMoving && (this.callbackInfo.textDecoration = { !this.isMoving && (this.callbackInfo.textDecoration = {
moveTo: [x, y], moveTo: [lineX, y],
lineTo: [x + measuredWith, y] lineTo: [lineX + measuredWith, y]
}) })
} }
if (/\boverline\b/.test(view.css.textDecoration)) { if (/\boverline\b/.test(view.css.textDecoration)) {
this.ctx.moveTo(x, y - fontSize); this.ctx.moveTo(lineX, y - fontSize);
this.ctx.lineTo(x + measuredWith, y - fontSize); this.ctx.lineTo(lineX + measuredWith, y - fontSize);
!this.isMoving && (this.callbackInfo.textDecoration = { !this.isMoving && (this.callbackInfo.textDecoration = {
moveTo: [x, y - fontSize], moveTo: [lineX, y - fontSize],
lineTo: [x + measuredWith, y - fontSize] lineTo: [lineX + measuredWith, y - fontSize]
}) })
} }
if (/\bline-through\b/.test(view.css.textDecoration)) { if (/\bline-through\b/.test(view.css.textDecoration)) {
this.ctx.moveTo(x, y - fontSize / 3); this.ctx.moveTo(lineX, y - fontSize / 3);
this.ctx.lineTo(x + measuredWith, y - fontSize / 3); this.ctx.lineTo(lineX + measuredWith, y - fontSize / 3);
!this.isMoving && (this.callbackInfo.textDecoration = { !this.isMoving && (this.callbackInfo.textDecoration = {
moveTo: [x, y - fontSize / 3], moveTo: [lineX, y - fontSize / 3],
lineTo: [x + measuredWith, y - fontSize / 3] lineTo: [lineX + measuredWith, y - fontSize / 3]
}) })
} }
this.ctx.closePath(); this.ctx.closePath();