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

feat: Support letterSpacing for RTL.

Browse Source
This commit is contained in:
xkxx 2023-09-12 00:07:25 +00:00
parent 291a40d94b
commit d7b86c5404
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Context.ts
View File

@ -68,6 +68,7 @@ var COMMA = ',',
'strokeText', 'strokeText',
'transform', 'transform',
'translate', 'translate',
'trySetLetterSpacing',
]; ];
var CONTEXT_PROPERTIES = [ var CONTEXT_PROPERTIES = [
@ -92,6 +93,11 @@ var CONTEXT_PROPERTIES = [
] as const; ] as const;
const traceArrMax = 100; const traceArrMax = 100;
interface CanvasRenderingContext2DFeatureDetection extends CanvasRenderingContext2D {
letterSpacing: string | undefined;
}
/** /**
* Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions. * Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions.
* With core Konva shapes you don't need to use this object. But you will use it if you want to create * With core Konva shapes you don't need to use this object. But you will use it if you want to create
@ -706,6 +712,21 @@ export class Context {
translate(x: number, y: number) { translate(x: number, y: number) {
this._context.translate(x, y); this._context.translate(x, y);
} }
/**
* Set letterSpacing if supported by browser.
* @method
* @name Konva.Context#trySetLetterSpacing
* @returns true if successful, false if not supported.
*/
trySetLetterSpacing(letterSpacing: number): boolean {
var context = this._context as CanvasRenderingContext2DFeatureDetection;
var letterSpacingSupported = 'letterSpacing' in context;
if (letterSpacingSupported) {
context.letterSpacing = letterSpacing + "px";
}
return letterSpacingSupported;
}
_enableTrace() { _enableTrace() {
var that = this, var that = this,
len = CONTEXT_METHODS.length, len = CONTEXT_METHODS.length,

5
src/shapes/Text.ts
View File

@ -57,6 +57,7 @@ var AUTO = 'auto',
PX_SPACE = 'px ', PX_SPACE = 'px ',
SPACE = ' ', SPACE = ' ',
RIGHT = 'right', RIGHT = 'right',
RTL = 'rtl',
WORD = 'word', WORD = 'word',
CHAR = 'char', CHAR = 'char',
NONE = 'none', NONE = 'none',
@ -213,6 +214,8 @@ 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) {
alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2; alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2;
@ -288,7 +291,7 @@ export class Text extends Shape<TextConfig> {
context.stroke(); context.stroke();
context.restore(); context.restore();
} }
if (letterSpacing !== 0 || align === JUSTIFY) { if ((letterSpacing !== 0 && !letterSpacingSupported) || 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);