From 3347fbbae83551a4a990e7f1fbf3190bd0705132 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Tue, 1 Jun 2021 10:29:05 +0800 Subject: [PATCH] feat: core implement image draw --- packages/board/src/util/context.ts | 19 +++++++++++++ packages/core/src/lib/draw.ts | 43 ++++++++++++++++++++---------- packages/core/src/lib/loader.ts | 7 +++++ packages/core/src/lib/renderer.ts | 2 +- packages/types/src/lib/context.ts | 4 +++ 5 files changed, 60 insertions(+), 15 deletions(-) diff --git a/packages/board/src/util/context.ts b/packages/board/src/util/context.ts index fb0cc5d..c4e4958 100644 --- a/packages/board/src/util/context.ts +++ b/packages/board/src/util/context.ts @@ -135,6 +135,25 @@ class Context implements TypeContext { return this._ctx.rotate(angle); } + drawImage(...args: any[]) { + const image: CanvasImageSource = args[0]; + const sx: number = args[1]; + const sy: number = args[2]; + const sw: number = args[3]; + const sh: number = args[4]; + + const dx: number = args[args.length - 4]; + const dy: number = args[args.length - 3]; + const dw: number = args[args.length - 2]; + const dh: number = args[args.length - 1]; + + if (args.length === 9) { + return this._ctx.drawImage(image, this._doSize(sx), this._doSize(sy), this._doSize(sw), this._doSize(sh), this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh)); + } else { + return this._ctx.drawImage(image,this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh)); + } + } + private _doSize(num: number) { return this._opts.devicePixelRatio * num; } diff --git a/packages/core/src/lib/draw.ts b/packages/core/src/lib/draw.ts index a0f9e53..bc4b1e0 100644 --- a/packages/core/src/lib/draw.ts +++ b/packages/core/src/lib/draw.ts @@ -8,10 +8,16 @@ import { } from '@idraw/types'; import util from '@idraw/util'; import { rotateContext, rotateElement } from './transform'; +import Loader from './loader'; const { isColorStr } = util.color; -export function drawContext(ctx: TypeContext, data: TypeData, config: TypeHelperConfig): void { +export function drawContext( + ctx: TypeContext, + data: TypeData, + config: TypeHelperConfig, + loader: Loader, +): void { const size = ctx.getSize(); ctx.clearRect(0, 0, size.width, size.height); @@ -19,13 +25,13 @@ export function drawContext(ctx: TypeContext, data: TypeData, config: TypeHelper drawBgColor(ctx, data.bgColor); } for (let i = 0; i < data.elements.length; i++) { - const ele = data.elements[i]; - switch (ele.type) { + const elem = data.elements[i]; + switch (elem.type) { case 'rect': { - drawRect<'rect'>(ctx, ele as TypeElement<'rect'>); + drawRect<'rect'>(ctx, elem as TypeElement<'rect'>); } case 'image': { - drawImage<'image'>(ctx, ele as TypeElement<'image'>); + drawImage<'image'>(ctx, elem as TypeElement<'image'>, loader); } default: { // nothing @@ -37,19 +43,28 @@ export function drawContext(ctx: TypeContext, data: TypeData, config: TypeHelper } -function drawRect(ctx: TypeContext, ele: TypeElement) { - const desc = ele.desc as TypeElemDesc['rect']; - rotateElement(ctx, ele, () => { +function drawRect(ctx: TypeContext, elem: TypeElement) { + const desc = elem.desc as TypeElemDesc['rect']; + rotateElement(ctx, elem, () => { ctx.setFillStyle(desc.color); - ctx.fillRect(ele.x, ele.y, ele.w, ele.h); + ctx.fillRect(elem.x, elem.y, elem.w, elem.h); }); } -function drawImage(ctx: TypeContext, ele: TypeElement) { - const desc = ele.desc as TypeElemDesc['rect']; - rotateElement(ctx, ele, () => { - ctx.setFillStyle(desc.color); - ctx.fillRect(ele.x, ele.y, ele.w, ele.h); +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); + } }); } diff --git a/packages/core/src/lib/loader.ts b/packages/core/src/lib/loader.ts index 6c8d442..6cd85d1 100644 --- a/packages/core/src/lib/loader.ts +++ b/packages/core/src/lib/loader.ts @@ -54,6 +54,13 @@ export default class Loader { return this._status === LoaderStatus.COMPLETE; } + getContent(uuid: string): null | HTMLImageElement | HTMLCanvasElement { + if (this._loadData[uuid]?.status === 'loaded') { + return this._loadData[uuid].content; + } + return null; + } + private _resetLoadData(data: TypeData): [string[], TypeLoadData] { const loadData: TypeLoadData = this._loadData; const uuidQueue: string[] = []; diff --git a/packages/core/src/lib/renderer.ts b/packages/core/src/lib/renderer.ts index 0e4b159..f5916f9 100644 --- a/packages/core/src/lib/renderer.ts +++ b/packages/core/src/lib/renderer.ts @@ -54,7 +54,7 @@ export class Renderer { if (this._loader.isComplete() !== true) { this._drawFrame(); } else if (item) { - drawContext(this._board.getContext(), item.data, item.helper); + drawContext(this._board.getContext(), item.data, item.helper, this._loader); this._board.draw(); this._retainQueueOneItem(); this._drawFrame(); diff --git a/packages/types/src/lib/context.ts b/packages/types/src/lib/context.ts index 33874fe..686d651 100644 --- a/packages/types/src/lib/context.ts +++ b/packages/types/src/lib/context.ts @@ -31,6 +31,10 @@ interface TypeContext { stroke(): void; translate(x: number, y: number): void; rotate(angle: number): void; + + // drawImage(image: CanvasImageSource, dx: number, dy: number): void; + drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void; + drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void; } export {