新增宫格查看插件

src/renderer/src/components/grid-pic/index.vue

@@ -1,26 +1,35 @@
 <template>
+  <div style="position: relative;height: 100%;width: 100%;">
     <draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
       <template #item="{ element, index }">
         <div class="grid-pic-item" :key="element.backgroundColor" :style="getWH(element,index)">
           <div class="delete-btn" @click="gridPicList.splice(index,1)">X</div>
           <div class="header-btn"></div>
-        <ViewerItem :gridPicList="gridPicList" :index="index" :images="[element.src]"></ViewerItem>
+          <ViewerItem :gridPicList="gridPicList" :index="index" :images="element"></ViewerItem>
         </div>
       </template>
     </draggable>
-  <el-input style="position:fixed;bottom: 20px;right: 80px;width: 1000px" v-model="inputValue" type="text" />
+    <el-input style="position:fixed;bottom: 20px;right: 180px;width: 1000px" v-model="inputValue" type="text" />
     <el-button class="add-btn" @click="addPic">
       添加
     </el-button>
+    <el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
+      画笔
+    </el-button>
+    <div class="modal-mode">
+      <canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
+    </div>
+  </div>
 </template>
 
 <script setup>
-  import {ref, computed} from 'vue'
+  import {ref, computed, onMounted} from 'vue'
   import Draggable from 'vuedraggable'
   import ViewerItem from "./viewer-item.vue";
-
+  import Fabric from 'fabric';
   const gridPicList = ref([])
   const inputValue = ref('')
+  const isShow = ref(false)
   // 获取图片样式
   const getWH = (item,index)=>{
     return {
@@ -29,6 +38,14 @@
     }
   }
 
+  const picList = [
+    'https://prev.ysaix.com:7868/src/assets/images/homecard4.jpg',
+    'https://prev.ysaix.com:7868/src/assets/images/homecard3.jpg',
+    'https://prev.ysaix.com:7868/src/assets/images/homecard2.jpg',
+    'https://prev.ysaix.com:7868/src/assets/images/homecard1.jpg',
+    'https://prev.ysaix.com:7868/profile/avatar/2024/06/26/blob_20240626135106A001.png',
+    'https://prev.ysaix.com:7868/assets/app_download.b3fb227b.png'
+  ]
   // 获取grid样式
   const getGrid = computed(() => {
     switch (gridPicList.value.length) {
@@ -106,12 +123,20 @@
     if (gridPicList.value.length >= 9) {
       return
     }
+    let src = inputValue.value||picList[gridPicList.value.length]
+    if (!src) {
+      return;
+    }
     gridPicList.value.push({
-      src: inputValue.value,
+      src: src,
       backgroundColor: getRandomColor()
     })
     inputValue.value = ''
   }
+  //开始画笔
+  const startPencil = () => {
+    isShow.value = !isShow.value
+  }
   // 生成随机颜色
   function getRandomColor() {
     let r = Math.floor(Math.random() * 256).toString(16);
@@ -123,13 +148,38 @@
     b = b.length === 1? '0' + b : b;
     return `#${r}${g}${b}`;
   }
-
+  //初始化画笔
+  const initPend = () => {
+    let canvas = new Fabric.fabric.Canvas('canvas_pic_001',{
+      interactive: false,
+      selection: true,
+      backgroundColor: "rgba(15,15,15,0)"
+    })
+    canvas.defaultCursor = 'default'
+    canvas.setHeight(300)
+    canvas.setWidth(400)
+    canvas.isDrawingMode = true;
+    canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
+    canvas.freeDrawingBrush.width = 1//设置画笔粗细
+    canvas.freeDrawingBrush.color = "red"//设置画笔颜色
+  }
+  onMounted(() => {
+    initPend()
+  })
 </script>
 <style scoped lang="scss">
+.modal-mode{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1001;
+  background-color: rgba(0, 0, 0, 0.2);
+}
 .grid-pic-wrap{
   width: 100%;
   height: 100%;
   display: grid;
+  position: absolute;
   overflow: hidden;
   .grid-pic-item{
     //animation: fadeIn 0.5s ease-in-out forwards;

src/renderer/src/components/grid-pic/viewer-item.vue

@@ -1,13 +1,19 @@
 <template>
-  <viewer :ref="collectRef('viewerRef'+index)" :options="optins" :images="images" class="images clearfix">
+  <div class="viewer-item-wrap" :id="'viewer_id'+index">
+    <Viewer @move="move" @moved="moved" @inited="inited" @zoomed="zoomed" :ref="collectRef('viewerRef'+index)" :options="optins" :images="[images.src]" class="images clearfix">
       <template #default="scope">
+        <div class="viewer-img-box">
           <img v-for="src in scope.images" :key="index" :src="src" style="display: none">
+        </div>
       </template>
-  </viewer>
+    </Viewer>
+  </div>
 </template>
 <script setup>
-import {ref, watch, nextTick} from "vue";
+import {ref, watch, nextTick, onMounted} from "vue";
-
+import { component as Viewer } from 'v-viewer'
+import Fabric from 'fabric';
+import 'viewerjs/dist/viewer.css'
 const props = defineProps({
   images: {
     type: Object,
@@ -22,7 +28,54 @@ const props = defineProps({
     default: () => []
   }
 })
+let $viewer = null;
 const refs = ref([]);
+//初始化时
+const inited = (viewer) => {
+  $viewer = viewer
+}
+//缩放时
+const zoomed = (e) => {
+  setImgStyle()
+  // console.log('zoomed', e)
+}
+//移动时
+const moved = (e) => {
+  setImgStyle()
+  // console.log('moved',e)
+}
+const move = (e) => {
+  // console.log('move', e)
+}
+const appendCanvasToShow = () => {
+  initImgStyle()
+}
+
+const setImgStyle = () => {
+  let item = window.document.getElementById('viewer_id'+props.index)
+  let canvas = item.querySelectorAll('.viewer-canvas')[0]
+  let img = canvas.querySelectorAll('img')[0]
+  let imgStyle = img.getAttribute('style')
+  imgStyle = imgStyle.replace('relative', 'absolute') + 'z-index: 1002';
+  img.style = imgStyle;
+  let canvasNew = canvas.querySelectorAll('canvas')[0]
+  canvasNew.style = imgStyle;
+}
+
+const initImgStyle = () => {
+  let item = window.document.getElementById('viewer_id'+props.index)
+  let canvas = item.querySelectorAll('.viewer-canvas')[0]
+  let img = canvas.querySelectorAll('img')[0];
+  let imgStyle = img.getAttribute('style')
+  imgStyle = imgStyle.replace('relative', 'absolute') + 'z-index: 1002';
+  img.style = imgStyle;
+  const canvasNew = document.createElement('canvas');
+  canvasNew.style = imgStyle;
+  canvasNew.id = 'canvas_pic_'+props.index
+  canvas.appendChild(canvasNew);
+
+  initPend()
+}
 
 const collectRef = (key) => {
   return (el) => {
@@ -30,30 +83,65 @@ const collectRef = (key) => {
   };
 };
 //viewer配置
-const optins = {
+const optins = ref({
   "inline": true,
   "button": false,
   "navbar": false,
   "title": false,
   "toolbar": false,
   "tooltip": true,
-  "movable": true,
   "zoomable": true,
   "rotatable": true,
+  "movable": false,
   "scalable": true,
   "transition": true,
   "fullscreen": true,
   "keyboard": true
-}
+})
 const initViewers = () => {
   refs.value['viewerRef'+props.index]?.rebuildViewer()
+  setTimeout(()=>{
+    initImgStyle()
+  },300)
 }
+//初始化画笔
+const initPend = () => {
+  let canvas = new Fabric.fabric.Canvas('canvas_pic_'+props.index,{
+    interactive: false,
+    selection: true,
+    backgroundColor: "rgba(15,15,15,0)"
+  })
+  canvas.defaultCursor = 'default'
+  canvas.setHeight(300)
+  canvas.setWidth(400)
+  canvas.isDrawingMode = true;
+  canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
+  canvas.freeDrawingBrush.width = 1//设置画笔粗细
+  canvas.freeDrawingBrush.color = "red"//设置画笔颜色
+}
+
 watch(props.gridPicList, (newValue, oldValue) => {
   nextTick(()=>{
     initViewers()
   })
 });
+
+/*
+watch(props.images, (newValue, oldValue) => {
+    // optins.value.movable = newValue.dragable
+  initPend()
+});
+*/
+
+onMounted(()=>{
+  setTimeout(()=>{
+    appendCanvasToShow()
+  }, 300)
+})
 </script>
 <style scoped lang="scss">
-
+.viewer-item-wrap{
+  width: 100%;
+  height: 100%;
+}
 </style>

src/renderer/src/main.js

@@ -17,8 +17,7 @@ import log from 'electron-log/renderer' // 渲染进程日志-文件记录
 import customComponent from '@/components/common' // 自定义组件
 import plugins from './plugins' // plugins插件
 import useUserStore from '@/store/modules/user'
-import VueViewer from 'v-viewer'
+
-import 'viewerjs/dist/viewer.css'
 if(process.env.NODE_ENV != 'development') { // 非开发环境，将日志打印到日志文件
   Object.assign(console, log.functions) // 渲染进程日志-控制台替换
 }
@@ -42,7 +41,6 @@ import Directive from '@/AixPPTist/src/plugins/directive'
 
 app.use(router)
     .use(store)
-    .use(VueViewer)
     .use(ElementPlus, { locale: zhLocale })
     .use(customComponent) // 自定义组件
     .use(plugins)

src/renderer/src/views/prepare/index.vue

@@ -10,7 +10,7 @@
           <el-dropdown-menu>
             <el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item>
             <el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item>
-            <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>
+<!--            <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>-->
             <el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item>
             <input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
           </el-dropdown-menu>