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

Add basic support for RTL text direction.

Browse Source
This commit is contained in:
xkxx 2023-09-09 05:13:25 +00:00
parent f6bcbb7c8f
commit 291a40d94b
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Context.ts
View File

@ -82,6 +82,7 @@ var CONTEXT_PROPERTIES = [
'lineJoin', 'lineJoin',
'lineWidth', 'lineWidth',
'miterLimit', 'miterLimit',
'direction',
'font', 'font',
'textAlign', 'textAlign',
'textBaseline', 'textBaseline',

23
src/shapes/Text.ts
View File

@ -22,6 +22,7 @@ export function stringToArray(string: string) {
} }
export interface TextConfig extends ShapeConfig { export interface TextConfig extends ShapeConfig {
direction?: string;
text?: string; text?: string;
fontFamily?: string; fontFamily?: string;
fontSize?: number; fontSize?: number;
@ -46,6 +47,7 @@ var AUTO = 'auto',
CONTEXT_2D = '2d', CONTEXT_2D = '2d',
DASH = '-', DASH = '-',
LEFT = 'left', LEFT = 'left',
LTR = 'ltr',
TEXT = 'text', TEXT = 'text',
TEXT_UPPER = 'Text', TEXT_UPPER = 'Text',
TOP = 'top', TOP = 'top',
@ -60,6 +62,7 @@ var AUTO = 'auto',
NONE = 'none', NONE = 'none',
ELLIPSIS = '…', ELLIPSIS = '…',
ATTR_CHANGE_LIST = [ ATTR_CHANGE_LIST = [
'direction',
'fontFamily', 'fontFamily',
'fontSize', 'fontSize',
'fontStyle', 'fontStyle',
@ -132,6 +135,7 @@ function checkDefaultFill(config?: TextConfig) {
* @memberof Konva * @memberof Konva
* @augments Konva.Shape * @augments Konva.Shape
* @param {Object} config * @param {Object} config
* @param {String} [config.direction] default is ltr
* @param {String} [config.fontFamily] default is Arial * @param {String} [config.fontFamily] default is Arial
* @param {Number} [config.fontSize] in pixels. Default is 12 * @param {Number} [config.fontSize] in pixels. Default is 12
* @param {String} [config.fontStyle] can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'. 'normal' is the default. * @param {String} [config.fontStyle] can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'. 'normal' is the default.
@ -201,6 +205,8 @@ 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('font', this._getContextFont()); context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', MIDDLE); context.setAttr('textBaseline', MIDDLE);
@ -615,6 +621,7 @@ export class Text extends Shape<TextConfig> {
return super._useBufferCanvas(); return super._useBufferCanvas();
} }
direction: GetSet<string, this>;
fontFamily: GetSet<string, this>; fontFamily: GetSet<string, this>;
fontSize: GetSet<number, this>; fontSize: GetSet<number, this>;
fontStyle: GetSet<string, this>; fontStyle: GetSet<string, this>;
@ -682,6 +689,22 @@ Factory.overWriteSetter(Text, 'width', getNumberOrAutoValidator());
Factory.overWriteSetter(Text, 'height', getNumberOrAutoValidator()); Factory.overWriteSetter(Text, 'height', getNumberOrAutoValidator());
/**
* get/set direction
* @name Konva.Text#direction
* @method
* @param {String} direction
* @returns {String}
* @example
* // get direction
* var direction = text.direction();
*
* // set direction
* text.direction('rtl');
*/
Factory.addGetterSetter(Text, 'direction', 'ltr');
/** /**
* get/set font family * get/set font family
* @name Konva.Text#fontFamily * @name Konva.Text#fontFamily