修复文字行数计算和实际绘制不一致问题

This commit is contained in:
dongqing 2019-12-01 16:48:41 +08:00
parent 0ca93907d2
commit 1836c3458a

View File

@ -184,6 +184,7 @@ export default class Painter {
let width = 0; let width = 0;
let height; let height;
let extra; let extra;
const paddings = this._doPaddings(view);
switch (view.type) { switch (view.type) {
case 'text': { case 'text': {
const textArray = view.text.split('\n'); const textArray = view.text.split('\n');
@ -203,8 +204,9 @@ export default class Painter {
const linesArray = []; const linesArray = [];
for (let i = 0; i < textArray.length; ++i) { for (let i = 0; i < textArray.length; ++i) {
const textLength = this.ctx.measureText(textArray[i]).width; const textLength = this.ctx.measureText(textArray[i]).width;
const partWidth = view.css.width ? view.css.width.toPx(false, this.style.width) : textLength; const partWidth = view.css.width ? view.css.width.toPx(false, this.style.width) - paddings[1] - paddings[3] : textLength;
const calLines = Math.ceil(textLength / partWidth); const calLines = Math.ceil(textLength / partWidth);
// 取最长的作为 width
width = partWidth > width ? partWidth : width; width = partWidth > width ? partWidth : width;
lines += calLines; lines += calLines;
linesArray[i] = calLines; linesArray[i] = calLines;
@ -346,13 +348,13 @@ export default class Painter {
x: view.css && view.css.right ? x - width : x, x: view.css && view.css.right ? x - width : x,
y: y y: y
}; };
const pd = this._doPaddings(view);
view.rect.left = view.rect.left - pd[3]; view.rect.left = view.rect.left - paddings[3];
view.rect.top = view.rect.top - pd[0]; view.rect.top = view.rect.top - paddings[0];
view.rect.right = view.rect.right + pd[1]; view.rect.right = view.rect.right + paddings[1];
view.rect.bottom = view.rect.bottom + pd[2]; view.rect.bottom = view.rect.bottom + paddings[2];
if (view.type === 'text') { if (view.type === 'text') {
view.rect.minWidth = view.css.fontSize.toPx() + pd[1] + pd[3]; view.rect.minWidth = view.css.fontSize.toPx() + paddings[1] + paddings[3];
} }
this.ctx.rotate(angle); this.ctx.rotate(angle);
@ -545,7 +547,7 @@ export default class Painter {
} }
let lineIndex = 0; let lineIndex = 0;
for (let j = 0; j < textArray.length; ++j) { for (let j = 0; j < textArray.length; ++j) {
const preLineLength = Math.round(textArray[j].length / linesArray[j]); const preLineLength = Math.ceil(textArray[j].length / linesArray[j]);
let start = 0; let start = 0;
let alreadyCount = 0; let alreadyCount = 0;
for (let i = 0; i < linesArray[j]; ++i) { for (let i = 0; i < linesArray[j]; ++i) {
@ -562,11 +564,7 @@ export default class Painter {
if (measuredWith < width) { if (measuredWith < width) {
text = textArray[j].substr(start, ++alreadyCount); text = textArray[j].substr(start, ++alreadyCount);
} else { } else {
if (text.length <= 1) { break;
// 如果只有一个字符时,直接跳出循环
break;
}
text = textArray[j].substr(start, --alreadyCount);
} }
measuredWith = this.ctx.measureText(text).width; measuredWith = this.ctx.measureText(text).width;
} }