From b7fecb4177cf16c7bfaefa5ff2799c0e0098da2f Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Thu, 3 Jun 2021 00:40:15 +0800 Subject: [PATCH] feat: core init drawing-text --- docs/features/core.md | 25 ++++----- packages/core/example/lib/data/index.js | 2 + packages/core/example/lib/data/text.js | 73 +++++++++++++++++++++++++ packages/core/src/lib/draw/image.ts | 32 +---------- packages/core/src/lib/draw/index.ts | 8 ++- packages/core/src/lib/draw/svg.ts | 5 +- packages/core/src/lib/draw/text.ts | 39 +++++++++---- packages/core/src/lib/helper.ts | 2 +- packages/core/src/lib/loader.ts | 16 +++++- packages/types/src/lib/element.ts | 3 + 10 files changed, 139 insertions(+), 66 deletions(-) create mode 100644 packages/core/example/lib/data/text.js diff --git a/docs/features/core.md b/docs/features/core.md index 7e83b8e..5118c6b 100644 --- a/docs/features/core.md +++ b/docs/features/core.md @@ -2,34 +2,29 @@ - [x] Scale canvas - [x] Scroll canvas -- [] Render by requestAnimateFrame -- [] Image load queue +- [x] Render by requestAnimateFrame +- [x] Image load queue - Render data's elements + - Basic box + - [x] Border + - [x] Radius + - [] Gradient Color - [] Text - [] Text content - [] Font size - [] Font family - [] Font color - - [] Border - Rect - [x] Rect content - - [] border - - [] Radius - - [] Circle + - Circle + - [] Rect content - Image - [x] Image content - - [] Border - - [] Radius - [x] SVG - - [] Border - - [] Radius - - [] Write - - [] Brush - - [] Border - - [] Radius + - [x] SVG content - [x] Drag elements - [x] Move elements' index - [x] Rotate elements - [x] Transform elements's size +- [] Loader update image/svg resource - [] Undo action record -- [] Controll elements by data \ No newline at end of file diff --git a/packages/core/example/lib/data/index.js b/packages/core/example/lib/data/index.js index caa66e9..23d2f49 100644 --- a/packages/core/example/lib/data/index.js +++ b/packages/core/example/lib/data/index.js @@ -1,6 +1,7 @@ import dataRect from './rect.js'; import dataImage from './image.js'; import dataSVG from './svg.js'; +import dataText from './text.js'; const url = new URLSearchParams(window.location.search); @@ -8,6 +9,7 @@ const dataMap = { 'rect': dataRect, 'image': dataImage, 'svg': dataSVG, + 'text': dataText } export function getData() { diff --git a/packages/core/example/lib/data/text.js b/packages/core/example/lib/data/text.js new file mode 100644 index 0000000..984a1fb --- /dev/null +++ b/packages/core/example/lib/data/text.js @@ -0,0 +1,73 @@ + +const data = { + // bgColor: '#ffffff', + elements: [ + { + name: 'text-001', + x: 10, + y: 10, + w: 200, + h: 100, + type: 'text', + radius: 20, + borderWidth: 2, + borderColor: '#bd0b64', + desc: { + size: 20, + color: '#333333', + text: 'Hello World', + fontFamily: '' + } + }, + { + name: 'text-002', + x: 80, + y: 80, + w: 200, + h: 120, + // angle: 30, + type: 'text', + radius: 60, + borderWidth: 10, + borderColor: '#bd0b64', + desc: { + size: 20, + text: 'Hello Text', + color: '#666666', + } + }, + // { + // name: 'text-003', + // x: 160, + // y: 160, + // w: 200, + // h: 20, + // type: 'text', + // angle: 80, + // radius: 20, + // borderWidth: 10, + // borderColor: '#bd0b64', + // desc: { + // color: '#c0c0c0', + // } + // }, + // { + // name: 'text-004', + // x: 400 - 10, + // y: 300 - 10, + // w: 200, + // h: 100, + // type: 'text', + // radius: 20, + // borderWidth: 10, + // borderColor: '#bd0b64', + // desc: { + // color: '#e0e0e0', + // } + // } + ] +} + + + +export default data; \ No newline at end of file diff --git a/packages/core/src/lib/draw/image.ts b/packages/core/src/lib/draw/image.ts index c164e62..a691058 100644 --- a/packages/core/src/lib/draw/image.ts +++ b/packages/core/src/lib/draw/image.ts @@ -1,43 +1,15 @@ -// import { -// TypeContext, -// TypeElement, -// TypeElemDesc, -// // TypePoint, -// } from '@idraw/types'; -// import { rotateElement } from '../transform'; -// import Loader from '../loader'; - - -// export function drawImage( -// ctx: TypeContext, -// elem: TypeElement, -// loader: Loader, -// ) { -// // const desc = elem.desc as TypeElemDesc['rect']; -// const content = loader.getContent(elem.uuid); -// rotateElement(ctx, elem, () => { -// // ctx.setFillStyle(desc.color); -// // ctx.fillRect(elem.x, elem.y, elem.w, elem.h); -// if (content) { -// // ctx.drawImage(content, 0, 0, elem.w, elem.h, elem.x, elem.y, elem.w, elem.h); -// ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h); -// } -// }); -// } - import { TypeContext, TypeElement, - TypeElemDesc, TypeHelperConfig, } from '@idraw/types'; import Loader from '../loader'; import { drawBox } from './base'; -export function drawImage( +export function drawImage( ctx: TypeContext, - elem: TypeElement, + elem: TypeElement<'image'>, loader: Loader, helperConfig: TypeHelperConfig ) { diff --git a/packages/core/src/lib/draw/index.ts b/packages/core/src/lib/draw/index.ts index 44e45cb..7e4cf1e 100644 --- a/packages/core/src/lib/draw/index.ts +++ b/packages/core/src/lib/draw/index.ts @@ -11,6 +11,7 @@ import { clearContext, drawBgColor } from './base'; import { drawRect } from './rect'; import { drawImage } from './image'; import { drawSVG } from './svg'; +import { drawText } from './text'; import { drawElementWrapper } from './wrapper'; const { isColorStr } = util.color; @@ -34,11 +35,14 @@ export function drawContext( case 'rect': { drawRect(ctx, elem as TypeElement<'rect'>); } + case 'text': { + drawText(ctx, elem as TypeElement<'text'>, loader, helperConfig); + } case 'image': { - drawImage<'image'>(ctx, elem as TypeElement<'image'>, loader, helperConfig); + drawImage(ctx, elem as TypeElement<'image'>, loader, helperConfig); } case 'svg': { - drawSVG<'svg'>(ctx, elem as TypeElement<'svg'>, loader, helperConfig); + drawSVG(ctx, elem as TypeElement<'svg'>, loader, helperConfig); } default: { // nothing diff --git a/packages/core/src/lib/draw/svg.ts b/packages/core/src/lib/draw/svg.ts index 9631b54..a182151 100644 --- a/packages/core/src/lib/draw/svg.ts +++ b/packages/core/src/lib/draw/svg.ts @@ -1,15 +1,14 @@ import { TypeContext, TypeElement, - TypeElemDesc, TypeHelperConfig, } from '@idraw/types'; import Loader from '../loader'; import { drawBox } from './base'; -export function drawSVG( +export function drawSVG( ctx: TypeContext, - elem: TypeElement, + elem: TypeElement<'svg'>, loader: Loader, helperConfig: TypeHelperConfig ) { diff --git a/packages/core/src/lib/draw/text.ts b/packages/core/src/lib/draw/text.ts index 52e0676..e8a2ee2 100644 --- a/packages/core/src/lib/draw/text.ts +++ b/packages/core/src/lib/draw/text.ts @@ -1,20 +1,35 @@ import { - TypeContext, + TypeContext, TypeElement, - TypeElemDesc, + TypeHelperConfig, } from '@idraw/types'; -import { rotateElement } from '../transform'; -import { clearContext } from './base'; - -export function drawText(ctx: TypeContext, elem: TypeElement) { - clearContext(ctx); - const desc = elem.desc as TypeElemDesc['rect']; - rotateElement(ctx, elem, () => { - ctx.setFillStyle(desc.color); - ctx.fillRect(elem.x, elem.y, elem.w, elem.h); +import Loader from '../loader'; +import { drawBox } from './base'; + +export function drawText( + ctx: TypeContext, + elem: TypeElement<'text'>, + loader: Loader, + helperConfig: TypeHelperConfig +) { + const content = loader.getPattern(elem, { + forceUpdate: helperConfig?.selectedElementWrapper?.uuid === elem.uuid }); + drawBox(ctx, elem, content); } + +export function createTextSVG(elem: TypeElement<'text'>): string { + const svg = ` + + +
+ ${elem.desc.text || ''} +
+ + + `; + return svg; +} - \ No newline at end of file diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index b076d3f..1f37f00 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -143,7 +143,7 @@ export class Helper implements TypeHelper { }, rotate: { x: elem.x + elem.w / 2, - y: elem.y - dotSize - (dotSize * 2 + rotateLimit), + y: elem.y - dotSize - (dotSize * 2 + rotateLimit) - borderWidth, } }, lineWidth: lineWidth, diff --git a/packages/core/src/lib/loader.ts b/packages/core/src/lib/loader.ts index cad25ac..9561459 100644 --- a/packages/core/src/lib/loader.ts +++ b/packages/core/src/lib/loader.ts @@ -2,6 +2,7 @@ import { TypeData, TypeElement, TypeElemDesc } from '@idraw/types'; import Board from '@idraw/board'; import util from '@idraw/util'; import { LoaderEvent, TypeLoadData, TypeLoaderEventArgMap } from './loader-event'; +import { createTextSVG } from './draw/text'; const { loadImage, loadSVG } = util.loader; @@ -99,7 +100,7 @@ export default class Loader { // add new load-data for (let i = data.elements.length - 1; i >= 0; i --) { const elem = data.elements[i]; - if (['image', 'svg'].includes(elem.type) && !loadData[elem.uuid]) { + if (['image', 'svg', 'text'].includes(elem.type) && !loadData[elem.uuid]) { loadData[elem.uuid] = this._createEmptyLoadItem(elem); uuidQueue.push(elem.uuid); } @@ -124,6 +125,9 @@ export default class Loader { } else if (elem.type === 'svg') { const _elem = elem as TypeElement<'svg'>; source = _elem.desc.svg || ''; + } else if (elem.type === 'text') { + const _elem = elem as TypeElement<'text'>; + source = createTextSVG(_elem); } return { type: type, @@ -220,8 +224,14 @@ export default class Loader { return image; } else if (params.type === 'svg') { const image = await loadSVG( - params.source, - { + params.source, { + width: params.elemW, height: params.elemH + } + ); + return image; + } else if (params.type === 'text') { + const image = await loadSVG( + params.source, { width: params.elemW, height: params.elemH } ); diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 3a88df9..357416e 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -29,8 +29,11 @@ type TypeElemDescRect = { } type TypeElemDescText = { + text: string; size: number; color: number; + fontFamily: string; + backgroundColor?: string; } type TypeElemDescCircle = {