feat: core implement image draw

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;
   }

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<T extends keyof TypeElemDesc>(ctx: TypeContext, ele: TypeElement<T>) {
-  const desc = ele.desc as TypeElemDesc['rect'];
-  rotateElement(ctx, ele, () => {
+function drawRect<T extends keyof TypeElemDesc>(ctx: TypeContext, elem: TypeElement<T>) {
+  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<T extends keyof TypeElemDesc>(ctx: TypeContext, ele: TypeElement<T>) {
-  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<T extends keyof TypeElemDesc>(
+  ctx: TypeContext,
+  elem: TypeElement<T>,
+  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);
+    }
   });
 }
 

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[] = [];

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();

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 {