From 038cb40b5d2b7e27382e05044f4922fd02783c4e Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Thu, 3 Jun 2021 18:05:06 +0800 Subject: [PATCH] feat: core implement text style --- packages/board/src/util/context.ts | 6 ++- packages/core/example/lib/data/text.js | 65 ++++++++++++++------------ packages/core/src/index.ts | 5 +- packages/core/src/lib/draw/index.ts | 5 ++ packages/core/src/lib/draw/text.ts | 30 ++++++++++-- packages/types/src/lib/context.ts | 1 + packages/types/src/lib/element.ts | 3 +- scripts/rollup.config.js | 2 +- 8 files changed, 81 insertions(+), 36 deletions(-) diff --git a/packages/board/src/util/context.ts b/packages/board/src/util/context.ts index b0fdf57..0db8ac5 100644 --- a/packages/board/src/util/context.ts +++ b/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() { diff --git a/packages/core/example/lib/data/text.js b/packages/core/example/lib/data/text.js index e2759b5..a740781 100644 --- a/packages/core/example/lib/data/text.js +++ b/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', + } + } ] } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f0e405d..04f3773 100644 --- a/packages/core/src/index.ts +++ b/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)); } diff --git a/packages/core/src/lib/draw/index.ts b/packages/core/src/lib/draw/index.ts index 7e4cf1e..71cb631 100644 --- a/packages/core/src/lib/draw/index.ts +++ b/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; } } } diff --git a/packages/core/src/lib/draw/text.ts b/packages/core/src/lib/draw/text.ts index 0b8f57a..8b49168 100644 --- a/packages/core/src/lib/draw/text.ts +++ b/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 = ` // diff --git a/packages/types/src/lib/context.ts b/packages/types/src/lib/context.ts index dc4d59c..882db11 100644 --- a/packages/types/src/lib/context.ts +++ b/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; diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 92c5468..cebb671 100644 --- a/packages/types/src/lib/element.ts +++ b/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 = { diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js index e9141cf..778ccd5 100644 --- a/scripts/rollup.config.js +++ b/scripts/rollup.config.js @@ -51,7 +51,7 @@ function createConfigItem(params) { format, name: name, esModule: esModule === true, - sourcemap: true, + // sourcemap: true, exports }, plugins: [