feat: add stroke to text-element

packages/board/src/lib/context.ts

@@ -198,6 +198,14 @@ class Context implements TypeContext {
     }
   }
 
+  strokeText(text: string, x: number, y: number, maxWidth?: number | undefined): void {
+    if (maxWidth !== undefined) {
+      return this._ctx.strokeText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
+    } else {
+      return this._ctx.strokeText(text, this._doSize(x), this._doSize(y));
+    }
+  }
+
   setFont(opts: { fontSize: number, fontFamily?: string, fontWeight?: 'bold' }): void {
     const strList: string[] = [];
     if (opts.fontWeight === 'bold') {

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

@@ -10,7 +10,7 @@ const data = {
       type: "text",
       desc: {
         fontSize: 20,
-        color: "#333333",
+        color: "#ffffff",
         text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
         fontFamily: '',
         fontWeight: 'bold',
@@ -18,6 +18,8 @@ const data = {
         borderWidth: 2,
         borderColor: "#bd0b64",
         bgColor: '#f0f0f0',
+        strokeColor: '#2196f3',
+        strokeWidth: 1,
       },
     },
     {

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

@@ -4,6 +4,7 @@ import {
   TypeElement,
   TypeHelperConfig,
 } from '@idraw/types';
+import util from '@idraw/util';
 import Loader from '../loader';
 import { clearContext, drawBox } from './base';
 import { rotateElement } from './../transform';
@@ -68,19 +69,44 @@ export function drawText(
     });
 
     // draw text lines
-    let _y = elem.y;
-    if (lines.length * fontHeight < elem.h) {
-      _y += ((elem.h - lines.length * fontHeight) / 2);
-    }
-    lines.forEach((line, i) => {
-      let _x = elem.x;
-      if (desc.textAlign === 'center') {
-        _x = elem.x + (elem.w - line.width) / 2;
-      } else if (desc.textAlign === 'right') {
-        _x = elem.x + (elem.w - line.width);
+    {
+      let _y = elem.y;
+      if (lines.length * fontHeight < elem.h) {
+        _y += ((elem.h - lines.length * fontHeight) / 2);
       }
-      ctx.fillText(line.text, _x, _y + fontHeight * i);
-    });
+      lines.forEach((line, i) => {
+        let _x = elem.x;
+        if (desc.textAlign === 'center') {
+          _x = elem.x + (elem.w - line.width) / 2;
+        } else if (desc.textAlign === 'right') {
+          _x = elem.x + (elem.w - line.width);
+        }
+        ctx.fillText(line.text, _x, _y + fontHeight * i);
+      });
+    }
+
+    // draw text stroke
+    if (util.color.isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
+      let _y = elem.y;
+      if (lines.length * fontHeight < elem.h) {
+        _y += ((elem.h - lines.length * fontHeight) / 2);
+      }
+      lines.forEach((line, i) => {
+        let _x = elem.x;
+        if (desc.textAlign === 'center') {
+          _x = elem.x + (elem.w - line.width) / 2;
+        } else if (desc.textAlign === 'right') {
+          _x = elem.x + (elem.w - line.width);
+        }
+        if (desc.strokeColor !== undefined) {
+          ctx.setStrokeStyle(desc.strokeColor);
+        }
+        if (desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
+          ctx.setLineWidth(desc.strokeWidth);
+        }
+        ctx.strokeText(line.text, _x, _y + fontHeight * i);
+      });
+    }
 
   });
 }

packages/types/src/lib/context.ts

@@ -41,6 +41,7 @@ interface TypeContext {
   measureText(text: string): TextMetrics;
   setTextAlign(align: CanvasTextAlign): void;
   fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
+  strokeText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
   setFont(opts: { fontSize: number, fontFamily?: string, fontWeight?: string }): void
   setTextBaseline(baseline: CanvasTextBaseline): void;
   save(): void;

packages/types/src/lib/element.ts

@@ -64,6 +64,8 @@ type TypeElemDescText = {
   fontFamily?: string;
   textAlign?: 'center' | 'left' | 'right';
   bgColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
 } & TypeElemBoxDesc
 
 type TypeElemDescCircle = {