From 059d5f59c0d4c898ca0f572b4c2b355c7b1f4523 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 9 Oct 2021 23:06:37 +0800 Subject: [PATCH] feat: add shadow action to context --- packages/board/src/lib/context.ts | 16 +++++++++++++ .../core/examples/features/lib/data/text.js | 23 ++++++++++--------- packages/core/examples/features/lib/main.js | 2 +- packages/core/src/lib/check.ts | 9 +++++++- packages/core/src/lib/is.ts | 6 +++++ packages/types/src/lib/context.ts | 4 ++++ packages/types/src/lib/element.ts | 4 ++++ 7 files changed, 51 insertions(+), 13 deletions(-) diff --git a/packages/board/src/lib/context.ts b/packages/board/src/lib/context.ts index 0ac3c4d..c4b7bab 100644 --- a/packages/board/src/lib/context.ts +++ b/packages/board/src/lib/context.ts @@ -237,6 +237,22 @@ class Context implements TypeContext { this._ctx.scale(ratioX, ratioY); } + setShadowColor(color: string): void { + this._ctx.shadowColor = color; + } + + setShadowOffsetX(offsetX: number): void { + this._ctx.shadowOffsetX = this._doSize(offsetX); + } + + setShadowOffsetY(offsetY: number): void { + this._ctx.shadowOffsetY = this._doSize(offsetY); + } + + setShadowBlur(blur: number): void { + this._ctx.shadowBlur = this._doSize(blur); + } + private _doSize(num: number) { return this._opts.devicePixelRatio * num; } diff --git a/packages/core/examples/features/lib/data/text.js b/packages/core/examples/features/lib/data/text.js index 5423329..8f00474 100644 --- a/packages/core/examples/features/lib/data/text.js +++ b/packages/core/examples/features/lib/data/text.js @@ -16,7 +16,7 @@ const data = { fontWeight: 'bold', borderRadius: 20, borderWidth: 2, - borderColor: "#bd0b64", + borderColor: "#03a9f4", bgColor: '#f0f0f0', strokeColor: '#2196f3', strokeWidth: 1, @@ -24,19 +24,20 @@ const data = { }, { name: "text-002", - x: 80, - y: 80, - w: 200, - h: 120, + x: 120, + y: 120, + w: 100, + h: 60, // angle: 30, type: "text", desc: { - fontSize: 20, + fontSize: 40, + fontWeight: 'blod', text: "Hello Text", - color: "#666666", + color: "#999999", borderRadius: 60, - borderWidth: 10, - borderColor: "#bd0b64" + borderWidth: 4, + borderColor: "#03a9f4" }, }, { @@ -58,7 +59,7 @@ const data = { textAlign: "right", borderRadius: 20, borderWidth: 2, - borderColor: "#bd0b64", + borderColor: "#03a9f4", bgColor: '#f0f0f0', }, }, @@ -77,7 +78,7 @@ const data = { textAlign: "right", borderRadius: 20, borderWidth: 2, - borderColor: "#bd0b64", + borderColor: "#03a9f4", bgColor: '#f0f0f0', }, }, diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index 12b7e44..f816ae0 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -32,7 +32,7 @@ const core = new Core(mount, { elementWrapper: { lockColor: '#009688', color: '#e91e63', - dotSize: 8, + dotSize: 6, lineWidth: 1, // lineDash: [12, 12], }, diff --git a/packages/core/src/lib/check.ts b/packages/core/src/lib/check.ts index 4c47fbc..6dcd510 100644 --- a/packages/core/src/lib/check.ts +++ b/packages/core/src/lib/check.ts @@ -97,7 +97,7 @@ function textDesc( ): boolean { const { text, color, fontSize, lineHeight, fontFamily, textAlign, - fontWeight, bgColor, + fontWeight, bgColor, strokeWidth, strokeColor } = desc; if (!is.text(text)){ return false; @@ -123,6 +123,13 @@ function textDesc( if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)){ return false; } + if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)){ + return false; + } + if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)){ + return false; + } + if (!box(desc)) { return false; } diff --git a/packages/core/src/lib/is.ts b/packages/core/src/lib/is.ts index 1a07e5f..17d3ea0 100644 --- a/packages/core/src/lib/is.ts +++ b/packages/core/src/lib/is.ts @@ -81,6 +81,10 @@ function lineHeight(value: any) { return number(value) && value > 0; } +function strokeWidth(value: any) { + return number(value) && value > 0; +} + function textAlign(value: any) { return ['center', 'left', 'right'].includes(value); } @@ -98,6 +102,7 @@ const is: TypeIs = { borderWidth, borderRadius, color, imageSrc, imageURL, imageBase64, svg, html, text, fontSize, lineHeight, textAlign, fontFamily, fontWeight, + strokeWidth, }; type TypeIs = { @@ -121,6 +126,7 @@ type TypeIs = { lineHeight: (value: any) => boolean, textAlign: (value: any) => boolean, fontFamily: (value: any) => boolean, + strokeWidth: (value: any) => boolean, } export default is; diff --git a/packages/types/src/lib/context.ts b/packages/types/src/lib/context.ts index cb40a9d..16309d2 100644 --- a/packages/types/src/lib/context.ts +++ b/packages/types/src/lib/context.ts @@ -51,6 +51,10 @@ interface TypeContext { drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void; createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null; setGlobalAlpha(alpha: number): void; + setShadowColor(color: string): void; + setShadowOffsetX(offsetX: number): void; + setShadowOffsetY(offsetY: number): void; + setShadowBlur(blur: number): void; } export { diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 8c694b4..464f056 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -66,6 +66,10 @@ type TypeElemDescText = { bgColor?: string; strokeColor?: string; strokeWidth?: number; + shadowColor?: string; + shadowOffsetX?: number; + shadowOffsetY?: number; + shadowOffsetBlur?: number; } & TypeElemBoxDesc type TypeElemDescCircle = {