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

Use native letterSpacing for RTL and use polyfill for all other cases.

Browse Source
This commit is contained in:
xkxx 2023-09-18 22:54:22 +00:00
parent d7b86c5404
commit 5570b4d62b
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/shapes/Text.ts
View File

@ -190,6 +190,7 @@ export class Text extends Shape<TextConfig> {
fontSize = this.fontSize(), fontSize = this.fontSize(),
lineHeightPx = this.lineHeight() * fontSize, lineHeightPx = this.lineHeight() * fontSize,
verticalAlign = this.verticalAlign(), verticalAlign = this.verticalAlign(),
direction = this.direction(),
alignY = 0, alignY = 0,
align = this.align(), align = this.align(),
totalWidth = this.getWidth(), totalWidth = this.getWidth(),
@ -206,7 +207,7 @@ export class Text extends Shape<TextConfig> {
var lineTranslateX = 0; var lineTranslateX = 0;
var lineTranslateY = 0; var lineTranslateY = 0;
context.setAttr('direction', this.direction()); context.setAttr('direction', direction);
context.setAttr('font', this._getContextFont()); context.setAttr('font', this._getContextFont());
@ -214,7 +215,6 @@ export class Text extends Shape<TextConfig> {
context.setAttr('textAlign', LEFT); context.setAttr('textAlign', LEFT);
var letterSpacingSupported = context.trySetLetterSpacing(letterSpacing);
// handle vertical alignment // handle vertical alignment
if (verticalAlign === MIDDLE) { if (verticalAlign === MIDDLE) {
@ -291,7 +291,10 @@ export class Text extends Shape<TextConfig> {
context.stroke(); context.stroke();
context.restore(); context.restore();
} }
if ((letterSpacing !== 0 && !letterSpacingSupported) || align === JUSTIFY) { // As `letterSpacing` isn't supported on Safari, we use this polyfill.
// The exception is for RTL text, which we rely on native as it cannot
// be supported otherwise.
if (direction !== RTL && (letterSpacing !== 0 || align === JUSTIFY)) {
// var words = text.split(' '); // var words = text.split(' ');
spacesNumber = text.split(' ').length - 1; spacesNumber = text.split(' ').length - 1;
var array = stringToArray(text); var array = stringToArray(text);
@ -312,11 +315,13 @@ export class Text extends Shape<TextConfig> {
lineTranslateX += this.measureSize(letter).width + letterSpacing; lineTranslateX += this.measureSize(letter).width + letterSpacing;
} }
} else { } else {
context.trySetLetterSpacing(letterSpacing);
this._partialTextX = lineTranslateX; this._partialTextX = lineTranslateX;
this._partialTextY = translateY + lineTranslateY; this._partialTextY = translateY + lineTranslateY;
this._partialText = text; this._partialText = text;
context.fillStrokeShape(this); context.fillStrokeShape(this);
context.trySetLetterSpacing(0);
} }
context.restore(); context.restore();
if (textArrLen > 1) { if (textArrLen > 1) {