lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 08:48:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add calculation for letter spacing to better align with css letter-spacing properties

Browse Source
This commit is contained in:
Adam Greenan 2024-12-11 13:35:24 +00:00
parent 09445e0880
commit a24b30b110
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/shapes/Text.ts
View File

@ -263,7 +263,7 @@ export class Text extends Shape<TextConfig> {
var lineTranslateY = 0; var lineTranslateY = 0;
var obj = textArr[n], var obj = textArr[n],
text = obj.text, text = obj.text,
width = obj.width, width = obj.width + letterSpacing,
lastLine = obj.lastInParagraph, lastLine = obj.lastInParagraph,
spacesNumber, spacesNumber,
oneWord, oneWord,
@ -310,7 +310,7 @@ export class Text extends Shape<TextConfig> {
spacesNumber = text.split(' ').length - 1; spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0; oneWord = spacesNumber === 0;
lineWidth = lineWidth =
align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width; align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
context.lineTo( context.lineTo(
lineTranslateX + Math.round(lineWidth), lineTranslateX + Math.round(lineWidth),
translateY + lineTranslateY + yOffset translateY + lineTranslateY + yOffset
@ -383,7 +383,8 @@ export class Text extends Shape<TextConfig> {
return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width; return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
} }
getHeight() { getHeight() {
const isAuto = this.attrs.height === AUTO || this.attrs.height === undefined; const isAuto =
this.attrs.height === AUTO || this.attrs.height === undefined;
return isAuto return isAuto
? this.fontSize() * this.textArr.length * this.lineHeight() + ? this.fontSize() * this.textArr.length * this.lineHeight() +
this.padding() * 2 this.padding() * 2
@ -501,7 +502,9 @@ export class Text extends Shape<TextConfig> {
this.textArr = []; this.textArr = [];
getDummyContext().font = this._getContextFont(); getDummyContext().font = this._getContextFont();
const additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0; const additionalWidth = shouldAddEllipsis
? this._getTextWidth(ELLIPSIS)
: 0;
for (let i = 0, max = lines.length; i < max; ++i) { for (let i = 0, max = lines.length; i < max; ++i) {
let line = lines[i]; let line = lines[i];