修复文字行数计算和实际绘制不一致问题
This commit is contained in:
parent
0ca93907d2
commit
1836c3458a
24
lib/pen.js
24
lib/pen.js
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user