feat: 新增图片工具

main/src/view/canvas/index.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { App, drawingTool, ellipseTool, lineTool, rectTool, regularPolygonTool, selectTool } from '@pictode/core';
+import {
+  App,
+  drawingTool,
+  ellipseTool,
+  imageTool,
+  lineTool,
+  rectTool,
+  regularPolygonTool,
+  selectTool,
+} from '@pictode/core';
 import { HistoryPlugin } from '@pictode/plugin-history';
 
 const containerRef = ref<HTMLDivElement>();
@@ -28,6 +37,7 @@ onMounted(() => {
       <button @click="app.setTool(regularPolygonTool())">三角形🔺</button>
       <button @click="app.setTool(lineTool())">线条📉</button>
       <button @click="app.setTool(drawingTool())">铅笔✏️</button>
+      <button @click="app.setTool(imageTool())">图片🅿️</button>
     </div>
     <div ref="containerRef" class="container"></div>
   </div>

packages/core/src/customs/image.ts

@@ -0,0 +1,13 @@
+import Konva from 'konva';
+
+export class Image extends Konva.Image {
+  constructor(config: Konva.ImageConfig) {
+    super(config);
+  }
+
+  public draw(): this {
+    return super.draw();
+  }
+}
+
+export default Image;

packages/core/src/index.ts

@@ -7,3 +7,4 @@ export * from './tools/ellipse-tool';
 export * from './tools/regular-polygon-tool';
 export * from './tools/line-tool';
 export * from './tools/drawing-tool';
+export * from './tools/image-tool';

packages/core/src/tools/image-tool.ts

@@ -0,0 +1,34 @@
+import { selectFile } from '@pictode/utils';
+
+import { Image as Img } from '../customs/image';
+import { Tool } from '../types';
+
+import { selectTool } from './select-tool';
+
+export const imageTool = (): Tool => {
+  const imageObject = new Image();
+  const img = new Img({
+    image: imageObject,
+    stroke: 'black',
+    strokeWidth: 2,
+  });
+
+  return {
+    name: 'imageTool',
+    onActive(app) {
+      app.cancelSelect();
+      selectFile(['.jpg', '.png', '.jpge', '.PNG', '.JPG', '.JPGE'], false).then((files) => {
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => {
+          const fileDataUrl = event.target?.result as string;
+          imageObject.src = fileDataUrl ?? '';
+        };
+        fileReader.readAsDataURL(files[0]);
+      });
+      app.add(img);
+      app.setTool(selectTool(img));
+    },
+  };
+};
+
+export default imageTool;