feat: add shadow to element-text

packages/core/examples/features/lib/data/text.js

@@ -44,6 +44,11 @@ const data = {
         textShadowOffsetX: 2,
         textShadowOffsetY: 2,
         textShadowBlur: 2,
+
+        shadowColor: '#000000',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2,
+        shadowBlur: 2,
       },
     },
     {

packages/core/src/lib/draw/base.ts

@@ -5,6 +5,7 @@ import {
 } from '@idraw/types';
 import util from '@idraw/util';
 import { rotateElement } from './../transform';
+import is from './../is';
 
 const { istype, color } = util;
 
@@ -34,6 +35,7 @@ export function drawBox(
 ): void {
   clearContext(ctx);
   drawBoxBorder(ctx, elem);
+  clearContext(ctx);
   rotateElement(ctx, elem, () => {
     const { x, y, w, h } = elem;
     let r: number = elem.desc.borderRadius || 0;
@@ -82,6 +84,19 @@ export function drawBoxBorder(
     if (r < w / 2 && r < h / 2) {
       r = r + bw / 2;
     }
+    const { desc } = elem;
+    if (desc.shadowColor !== undefined && util.color.isColorStr(desc.shadowColor)) {
+      ctx.setShadowColor(desc.shadowColor);
+    }
+    if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
+      ctx.setShadowOffsetX(desc.shadowOffsetX);
+    }
+    if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
+      ctx.setShadowOffsetY(desc.shadowOffsetY);
+    }
+    if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
+      ctx.setShadowBlur(desc.shadowBlur);
+    }
     ctx.beginPath();
     ctx.setLineWidth(bw);
     ctx.setStrokeStyle(borderColor);

packages/core/src/lib/draw/text.ts

@@ -8,6 +8,7 @@ import util from '@idraw/util';
 import Loader from '../loader';
 import { clearContext, drawBox } from './base';
 import { rotateElement } from './../transform';
+import is from './../is';
 
 export function drawText(
   ctx: TypeContext,
@@ -74,16 +75,16 @@ export function drawText(
       if (lines.length * fontHeight < elem.h) {
         _y += ((elem.h - lines.length * fontHeight) / 2);
       }
-      if (desc.textShadowColor !== undefined) {
+      if (desc.textShadowColor !== undefined && util.color.isColorStr(desc.textShadowColor)) {
         ctx.setShadowColor(desc.textShadowColor);
       }
-      if (desc.textShadowOffsetX !== undefined) {
+      if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
         ctx.setShadowOffsetX(desc.textShadowOffsetX);
       }
-      if (desc.textShadowOffsetY !== undefined) {
+      if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
         ctx.setShadowOffsetY(desc.textShadowOffsetY);
       }
-      if (desc.textShadowBlur !== undefined) {
+      if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
         ctx.setShadowBlur(desc.textShadowBlur);
       }
       lines.forEach((line, i) => {

packages/types/src/lib/element.ts

@@ -28,6 +28,10 @@ type TypeElemBoxDesc = {
   borderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
+  shadowColor?: string;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowBlur?: number;
 }
 
 type TypeElemDesc = {