From 51bb0da8055c6254e5440ea41ffa6510f7fe7f26 Mon Sep 17 00:00:00 2001 From: ysk2014 <1181102772@qq.com> Date: Wed, 26 Aug 2020 16:21:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AF=B9css=E7=9A=84text-str?= =?UTF-8?q?oke=E5=B1=9E=E6=80=A7=E7=9A=84=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/demo3.html | 54 +++++++++++++++++++ src/css/index.ts | 9 +++- .../property-descriptors/text-stroke-color.ts | 9 ++++ .../property-descriptors/text-stroke-width.ts | 8 +++ src/render/canvas/canvas-renderer.ts | 9 ++++ 5 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 examples/demo3.html create mode 100644 src/css/property-descriptors/text-stroke-color.ts create mode 100644 src/css/property-descriptors/text-stroke-width.ts diff --git a/examples/demo3.html b/examples/demo3.html new file mode 100644 index 0000000..8bc02dc --- /dev/null +++ b/examples/demo3.html @@ -0,0 +1,54 @@ + + + + + Text stroke tests + + + + + +
+ Some text with bigger text that should have a stroke + Bolder stroke that makes things pretty +
+ + + + \ No newline at end of file diff --git a/src/css/index.ts b/src/css/index.ts index b7fe5fa..44b9714 100644 --- a/src/css/index.ts +++ b/src/css/index.ts @@ -47,6 +47,8 @@ import {textAlign} from './property-descriptors/text-align'; import {position, POSITION} from './property-descriptors/position'; import {textShadow} from './property-descriptors/text-shadow'; import {textTransform} from './property-descriptors/text-transform'; +import {textStrokeColor} from './property-descriptors/text-stroke-color'; +import {textStrokeWidth} from './property-descriptors/text-stroke-width'; import {transform} from './property-descriptors/transform'; import {transformOrigin} from './property-descriptors/transform-origin'; import {visibility, VISIBILITY} from './property-descriptors/visibility'; @@ -131,6 +133,8 @@ export class CSSParsedDeclaration { textDecorationLine: ReturnType; textShadow: ReturnType; textTransform: ReturnType; + textStrokeColor: Color; + textStrokeWidth: LengthPercentage; transform: ReturnType; transformOrigin: ReturnType; visibility: ReturnType; @@ -195,6 +199,8 @@ export class CSSParsedDeclaration { this.textDecorationLine = parse(textDecorationLine, declaration.textDecorationLine); this.textShadow = parse(textShadow, declaration.textShadow); this.textTransform = parse(textTransform, declaration.textTransform); + this.textStrokeColor = parse(textStrokeColor, declaration.webkitTextStrokeColor); + this.textStrokeWidth = parse(textStrokeWidth, declaration.webkitTextStrokeWidth); this.transform = parse(transform, declaration.transform); this.transformOrigin = parse(transformOrigin, declaration.transformOrigin); this.visibility = parse(visibility, declaration.visibility); @@ -261,7 +267,8 @@ export class CSSParsedCounterDeclaration { // eslint-disable-next-line @typescript-eslint/no-explicit-any const parse = (descriptor: CSSPropertyDescriptor, style?: string | null) => { const tokenizer = new Tokenizer(); - const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue; + const value = + style !== null && typeof style !== 'undefined' && style != '' ? style.toString() : descriptor.initialValue; tokenizer.write(value); const parser = new Parser(tokenizer.read()); switch (descriptor.type) { diff --git a/src/css/property-descriptors/text-stroke-color.ts b/src/css/property-descriptors/text-stroke-color.ts new file mode 100644 index 0000000..2a5d410 --- /dev/null +++ b/src/css/property-descriptors/text-stroke-color.ts @@ -0,0 +1,9 @@ +import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; + +export const textStrokeColor: IPropertyTypeValueDescriptor = { + name: `-webkit-text-stroke-color`, + initialValue: 'transparent', + prefix: false, + type: PropertyDescriptorParsingType.TYPE_VALUE, + format: 'color' +}; diff --git a/src/css/property-descriptors/text-stroke-width.ts b/src/css/property-descriptors/text-stroke-width.ts new file mode 100644 index 0000000..2130296 --- /dev/null +++ b/src/css/property-descriptors/text-stroke-width.ts @@ -0,0 +1,8 @@ +import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; +export const textStrokeWidth: IPropertyTypeValueDescriptor = { + name: '-webkit-text-stroke-width', + initialValue: '0', + type: PropertyDescriptorParsingType.TYPE_VALUE, + prefix: false, + format: 'length-percentage' +}; diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 0e91684..3430e3a 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -233,6 +233,15 @@ export class CanvasRenderer { } }); } + + if (styles.textStrokeWidth && styles.textStrokeColor && text.text.trim().length) { + this.ctx.strokeStyle = asString(styles.textStrokeColor); + this.ctx.lineWidth = getAbsoluteValue(styles.textStrokeWidth, text.bounds.width); + this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height); + + this.ctx.strokeStyle = ''; + this.ctx.lineWidth = 0; + } }); }