From 29ad68e5ab901521560ef61606e9d0dc873cc60e Mon Sep 17 00:00:00 2001 From: zhangxuelin <959231531@qq.com> Date: Wed, 7 Aug 2024 15:19:58 +0800 Subject: [PATCH 1/2] =?UTF-8?q?pdf=E5=8A=9F=E8=83=BD=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/src/components/pdf/index.vue | 137 +++++++++++++++---- src/renderer/src/utils/tool.js | 1 + src/renderer/src/views/classBegins/index.vue | 32 ++--- src/renderer/src/views/tool/sphere.vue | 1 - 4 files changed, 123 insertions(+), 48 deletions(-) diff --git a/src/renderer/src/components/pdf/index.vue b/src/renderer/src/components/pdf/index.vue index 056474c..f103b75 100644 --- a/src/renderer/src/components/pdf/index.vue +++ b/src/renderer/src/components/pdf/index.vue @@ -34,6 +34,8 @@ import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/util import { fabricVue, TYPES } from '@/plugins/fabric' import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index' import {useToolState} from '@/store/modules/tool' +const { ipcRenderer } = require('electron') + const toolState = useToolState(); const props = defineProps({ pdfObj: { @@ -116,7 +118,43 @@ const renderPage = async (canvasobj) => { // }) }) } - +// 保存数据 +const savaDataStore = () => { + imgarr.value.forEach((a) => { + if (a.index == 0) { + a.JSONdata = canvasFabricVue.value.canvas.toJSON() + } else { + a.JSONdata = canvas1FabricVue.value.canvas.toJSON() + } + }) + const nameMap = new Map(canvsStore.pageArr.map((item) => [item.page, item.id])) + // 创建一个用于存储所有异步操作的数组 + let promises = [] + imgarr.value.forEach((item) => { + if (nameMap.has(item.page)) { + const params = { + id: nameMap.get(item.page), + contentData: JSON.stringify(item.JSONdata.objects) + } + promises.push(updateSmartBookMarkContent([params])) + } else { + promises.push(addsmartBookMark({ + pageNum: item.page, + contentData: JSON.stringify(item.JSONdata.objects), + bookId: props.pdfObj.bookId, + type: '教材', + source: 'smarttalk' + })) + + } + }) + Promise.all(promises).then(res=>{ + toolState.isPdfWin=false + toolState.showBoardAll=true //恢复默认值 + // ipcRenderer.send('tool-sphere:reset') //重置tool状态 + ipcRenderer.send('open-PDF:minimize') + }) +} const updatePage = (canvasobj) => { renderPage(canvasobj) } @@ -236,9 +274,9 @@ const initPdfone = async () => { } onMounted(async () => { try { + // 获取页数 const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise numPagesTotal.value = pdf.numPages - // 初始化fabriccanvas const option = { freeDrawingCursor: 'default' } const canvas1 = new fabricVue() @@ -246,17 +284,15 @@ onMounted(async () => { // canvas1.boardConfig.mode= TYPES.ActionMode.ERASE await canvas1.initCanvas(fabriccanvas.value, option) canvas1.canvas.setWidth(window.innerWidth / 2 - 100) - // canvas1.canvas.isDrawingMode=false canvasFabricVue.value = canvas1 const canvas2 = new fabricVue() - canvas2.boardConfig.mode = TYPES.ActionMode.DRAW await canvas2.initCanvas(fabriccanvas1.value, option) canvas2.canvas.setWidth(window.innerWidth / 2 - 100) // canvas2.canvas.isDrawingMode=false canvas1FabricVue.value = canvas2 window.test = { canvas1, canvas2 } emit('update:numPagesTotal', pdf.numPages) - + //加载接口数据 if (props.pdfObj.allPageData.length) { props.pdfObj.allPageData.forEach((a) => { if (a.pageNum == 1 || a.pageNum == 2) { @@ -273,36 +309,79 @@ onMounted(async () => { // handleevent(fabriccanvas.value, imgarr) // handleevent(fabriccanvas1.value, imgarr, 'two') }) +// 判断元素是否加载完成 +const handleMode = (vale,type)=>{ + if(vale=='select'){ + ispointer.value=true + }else{ + ispointer.value=false + } + switch(vale) { + case 'select': // 选择模式 + canvasFabricVue.value?.handleMode(TYPES.ActionMode.OTHER) + canvas1FabricVue.value?.handleMode(TYPES.ActionMode.OTHER) + break + case 'brush': // 画笔模式 + canvasFabricVue.value?.handleMode(TYPES.ActionMode.DRAW) + canvasFabricVue.value.canvas.freeDrawingCursor = 'default' + canvas1FabricVue.value?.handleMode(TYPES.ActionMode.DRAW) + canvas1FabricVue.value.canvas.freeDrawingCursor = 'default' + break + case 'eraser': // 板擦模式 + canvasFabricVue.value?.handleMode(TYPES.ActionMode.ERASE) + canvas1FabricVue.value?.handleMode(TYPES.ActionMode.ERASE) + break + case 'clear': // 清空画布 + clearCanvas() + // canvas1FabricVue.value.history?.clean() + break + } +} +// 清空canvas +const clearCanvas=()=>{ + if(canvasFabricVue.value){ + const objects = canvasFabricVue.value.canvas.getObjects(); + objects.forEach((obj) => { + // 检查对象是否是背景 + if (obj !== canvasFabricVue.value.canvas.backgroundImage) { + // 删除背景之外的对象 + canvasFabricVue.value.canvas.remove(obj); + } + }); + canvasFabricVue.value.canvas.renderAll(); + } + if(canvas1FabricVue.value){ + const objects = canvas1FabricVue.value.canvas.getObjects(); + objects.forEach((obj) => { + // 检查对象是否是背景 + if (obj !== canvas1FabricVue.value.canvas.backgroundImage) { + // 删除背景之外的对象 + canvas1FabricVue.value.canvas.remove(obj); + } + }); -defineExpose({ - initPdf, - initPdfone -}) -watchEffect(() => { - - console.log(toolState.showBoardAll,'监听') - if( toolState.showBoardAll){ - console.log('xczxcxzsdf') + canvas1FabricVue.value.canvas.renderAll(); + } +} +const watchToolState=()=>{ + if(toolState.showBoardAll){ setTimeout(() => { toolState.showBoardAll=false }, 200); } - // if(toolState.model=='select'){ - // toolState.showBoardAll=false - // } - // if(toolState.model!='select'){ - // toolState.showBoardAll=false - // } - // console.log(toolState.model,toolState.showBoardAll) - - // if(toolState.model!='select'){ - // toolState.showBoardAll=false + // 加载工具 + handleMode(toolState.model) - // console.log(toolState.model) - // console.log( toolState.showBoardAll) - // } - +} +defineExpose({ + initPdf, + initPdfone, + savaDataStore +}) +watchEffect(() => { + console.log(toolState.model,'监听') + watchToolState() //监听工具栏 }) @@ -312,6 +391,8 @@ watchEffect(() => { flex-wrap: wrap; width: 100%; justify-content: center; + overflow: hidden; + max-height: 100vh; } .pdfAdnFabric { position: relative; diff --git a/src/renderer/src/utils/tool.js b/src/renderer/src/utils/tool.js index b51a6bb..ef06d32 100644 --- a/src/renderer/src/utils/tool.js +++ b/src/renderer/src/utils/tool.js @@ -94,6 +94,7 @@ export const createWindow = async (type, data) => { win.type = type // 唯一标识 win.show() win.setFullScreen(true) // 设置窗口为全屏 + // win.webContents.openDevTools() // 打开调试工具 eventHandles(type, win) // 事件监听处理 break } diff --git a/src/renderer/src/views/classBegins/index.vue b/src/renderer/src/views/classBegins/index.vue index 80990c9..188c790 100644 --- a/src/renderer/src/views/classBegins/index.vue +++ b/src/renderer/src/views/classBegins/index.vue @@ -1,6 +1,6 @@