新增宫格查看插件

2024-12-19 18:42:35 +08:00 · 2024-12-19 18:42:35 +08:00 · 051dbdf4a2
parent 6128f267e1
commit 051dbdf4a2
4 changed files with 168 additions and 32 deletions
--- a/src/renderer/src/components/grid-pic/index.vue
+++ b/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;
--- a/src/renderer/src/components/grid-pic/viewer-item.vue
+++ b/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>
--- a/src/renderer/src/main.js
+++ b/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)
--- a/src/renderer/src/views/prepare/index.vue
+++ b/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>