feat: core implement text style

packages/board/src/util/context.ts

@@ -38,7 +38,11 @@ class Context implements TypeContext {
   }
 
   calcDeviceNum(num: number): number {
-    return this._opts.devicePixelRatio * num;
+    return num * this._opts.devicePixelRatio;
+  }
+
+  calcScreenNum(num: number): number {
+    return num / this._opts.devicePixelRatio;
   }
 
   getSize() {

packages/core/example/lib/data/text.js

@@ -36,35 +36,42 @@ const data = {
         color: '#666666',
       }
     },
-    // {
-    //   name: 'text-003',
-    //   x: 160,
-    //   y: 160,
-    //   w: 200,
-    //   h: 20,
-    //   type: 'text',
-    //   angle: 80,
-    //   borderRadius: 20,
-    //   borderWidth: 10,
-    //   borderColor: '#bd0b64',
-    //   desc: {
-    //     color: '#c0c0c0',
-    //   }
-    // },
-    // {
-    //   name: 'text-004',
-    //   x: 400 - 10,
-    //   y: 300 - 10,
-    //   w: 200,
-    //   h: 100,
-    //   type: 'text',
-    //   borderRadius: 20,
-    //   borderWidth: 10,
-    //   borderColor: '#bd0b64',
-    //   desc: {
-    //     color: '#e0e0e0',
-    //   }
-    // }
+    {
+      name: 'text-003',
+      x: 160,
+      y: 160,
+      w: 200,
+      h: 100,
+      type: 'text',
+      borderRadius: 20,
+      borderWidth: 2,
+      borderColor: '#bd0b64',
+      desc: {
+        fontSize: 20,
+        color: '#333333',
+        text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
+        fontFamily: '',
+        textAlign: 'right',
+      }
+    },
+    {
+      name: 'text-004',
+      x: 400 - 10,
+      y: 300 - 10,
+      w: 200,
+      h: 100,
+      type: 'text',
+      borderRadius: 20,
+      borderWidth: 2,
+      borderColor: '#bd0b64',
+      desc: {
+        fontSize: 20,
+        color: '#333333',
+        text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
+        fontFamily: '',
+        textAlign: 'left',
+      }
+    }
   ]
 }
 

packages/core/src/index.ts

@@ -1,10 +1,13 @@
 import { TypeData, TypePoint, TypeHelperWrapperDotDirection, TypeConfig, TypeConfigStrict } from '@idraw/types';
 import Board from '@idraw/board';
+import util from '@idraw/util';
 import { Renderer } from './lib/renderer';
 import { Element } from './lib/element';
 import { Helper } from './lib/helper';
 import { mergeConfig } from './lib/config';
 
+const { time } = util;
+
 type Options = {
   width: number;
   height: number;
@@ -130,7 +133,7 @@ class Core {
     }
     this[_board].on('point', this._handlePoint.bind(this));
     this[_board].on('moveStart', this._handleMoveStart.bind(this));
-    this[_board].on('move', this._handleMove.bind(this));
+    this[_board].on('move', time.throttle(this._handleMove.bind(this), 16));
     this[_board].on('moveEnd', this._handleMoveEnd.bind(this));
   }
 

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

@@ -34,18 +34,23 @@ export function drawContext(
     switch (elem.type) {
       case 'rect': {
         drawRect(ctx, elem as TypeElement<'rect'>);
+        break;
       }
       case 'text': {
         drawText(ctx, elem as TypeElement<'text'>, loader, helperConfig);
+        break;
       }
       case 'image': {
         drawImage(ctx, elem as TypeElement<'image'>, loader, helperConfig);
+        break;
       }
       case 'svg': {
         drawSVG(ctx, elem as TypeElement<'svg'>, loader, helperConfig);
+        break;
       }
       default: {
         // nothing
+        break;
       }
     }
   }

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

@@ -22,6 +22,7 @@ export function drawText(
       ...{
         fontSize: 12,
         fontFamily: 'sans-serif',
+        textAlign: 'center',
       },
       ...elem.desc
     };
@@ -32,7 +33,7 @@ export function drawText(
       fontFamily: desc.fontFamily
     });
     const fontHeight = desc.lineHeight || desc.fontSize;
-    
+    const lines: {text: string, width: number}[] = [];
     let lineText = '';
     let lineNum = 0;
     for (let i = 0; i < desc.text.length; i++) {
@@ -40,7 +41,10 @@ export function drawText(
       if (ctx.measureText(lineText + (desc.text[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
         lineText += (desc.text[i] || '');
       } else {
-        ctx.fillText(lineText, elem.x, elem.y + lineNum * fontHeight);
+        lines.push({
+          text: lineText,
+          width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+        });
         lineText = (desc.text[i] || '');
         lineNum ++;
       }
@@ -49,15 +53,35 @@ export function drawText(
       }
       if (lineText && desc.text.length - 1 === i) {
         if ((lineNum + 1) * fontHeight < elem.h) {
-          ctx.fillText(lineText, elem.x, elem.y + lineNum * fontHeight);
+          lines.push({
+            text: lineText,
+            width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+          });
           break;
         }
       }
     }
+
+    // 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);
+      }
+      ctx.fillText(line.text, _x, _y + fontHeight * i);
+    });
+
   });
 }
 
 
+
 // export function createTextSVG(elem: TypeElement<'text'>): string {
 //   const svg = `
 //   <svg xmlns="http://www.w3.org/2000/svg" width="${elem.w}" height = "${elem.h}">

packages/types/src/lib/context.ts

@@ -15,6 +15,7 @@ interface TypeContext {
     devicePixelRatio: number;
   };
   calcDeviceNum(num: number): number;
+  calcScreenNum(num: number): number;
 
   setFillStyle(color: string | CanvasPattern): void;
   fill(fillRule?: CanvasFillRule | undefined): void;

packages/types/src/lib/element.ts

@@ -35,7 +35,8 @@ type TypeElemDescText = {
   lineHeight?: number;
   fontWeight?: string;
   fontFamily?: string;
-  backgroundColor?: string;
+  textAlign?: 'center' | 'left' | 'right'
+  // backgroundColor?: string;
 }
 
 type TypeElemDescCircle = {

scripts/rollup.config.js

@@ -51,7 +51,7 @@ function createConfigItem(params) {
       format,
       name: name,
       esModule: esModule === true,
-      sourcemap: true,
+      // sourcemap: true,
       exports
     }, 
     plugins: [