zhuhao
/
AIx_Smarttalk
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

zdg #105

Merged
zhengdegang merged 17 commits from zdg into main 2024-08-07 16:11:14 +08:00
Conversation 0 Commits 17 Files Changed 16 +126 -49
3 changed files with 126 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5430cb8c50 - Show all commits

142
src/renderer/src/components/pdf/index.vue
View File

@ -26,7 +26,7 @@ import {
defineProps,
defineExpose,
nextTick,
watchEffect
defineEmits,watchEffect
} from 'vue'
// import { fabric } from 'fabric'
import { ElMessage } from 'element-plus'
@ -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.invoke('tool-sphere:reset') //重置tool状态
ipcRenderer.send('open-PDF:minimize')
})
}
const updatePage = (canvasobj) => {
renderPage(canvasobj)
}
@ -236,9 +274,9 @@ const initPdfone = async () => {
}
onMounted(async () => {
try {
// 创建canvas转化成图片
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
numPagesTotal.value = pdf.numPages
// 初始化fabriccanvas
const option = { freeDrawingCursor: 'default' }
const canvas1 = new fabricVue()
@ -246,10 +284,8 @@ 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
@ -269,44 +305,88 @@ onMounted(async () => {
console.log(error)
ElMessage.error('pdf文件错误')
}
setToolStatus()
// 监听2个canvas事件
// handleevent(fabriccanvas.value, imgarr)
// handleevent(fabriccanvas1.value, imgarr, 'two')
setToolStatus() // 加载完后-(设置-底部工具栏-状态)
})
// zdg: 设置-底部工具栏-状态
const setToolStatus = () => {
toolState.showBoardAll = false
}
// 判断元素是否加载完成
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 'erase': // 板擦模式
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);
}
});
canvas1FabricVue.value.canvas.renderAll();
}
}
const watchToolState=()=>{
if(toolState.showBoardAll){
setTimeout(() => {
toolState.showBoardAll=false
}, 200);
}
// 加载工具
handleMode(toolState.model)
}
defineExpose({
initPdf,
initPdfone
initPdfone,
savaDataStore
})
watchEffect(() => {
console.log(toolState.showBoardAll,'监听')
// if( toolState.showBoardAll){
// setTimeout(() => {
// console.log('pdf 关闭:')
// 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
// console.log(toolState.model)
// console.log( toolState.showBoardAll)
// }
console.log(toolState.model,'监听')
watchToolState() //监听工具栏
})
</script>
@ -316,6 +396,8 @@ watchEffect(() => {
flex-wrap: wrap;
width: 100%;
justify-content: center;
overflow: hidden;
max-height: 100vh;
}
.pdfAdnFabric {
position: relative;

1
src/renderer/src/utils/tool.js
View File

@ -115,6 +115,7 @@ export const createWindow = async (type, data) => {
win.type = type // 唯一标识
win.show()
win.setFullScreen(true) // 设置窗口为全屏
// win.webContents.openDevTools() // 打开调试工具
eventHandles(type, win) // 事件监听处理
break
}

32
src/renderer/src/views/classBegins/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="pdfbox" ref="pdfbox">
<pdfCanvas :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
<pdfCanvas v-if="isOnLoadShow" :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
<div class="pdf-btn">
<el-button
style="border-top-left-radius: 8px"
@ -45,6 +45,8 @@ import {useToolState} from '@/store/modules/tool'
// }
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
const toolState = useToolState();
const route = useRoute();
const isOnLoadShow = ref(false) //加载完毕显示
// 传过去的参数
const pdfObj = reactive({
numberOfPdf: 2, //显示几页
@ -53,7 +55,7 @@ const pdfObj = reactive({
bookId:null,
numPages: 1 //当前页数
})
const textbookId=ref(null)
const textbookId=ref(null) //书籍id
// 总条数
const numPagesTotal = ref(0)
const pdfCanvaslist = ref(null)
@ -71,13 +73,13 @@ const navtopage = (type) => {
pdfCanvaslist.value.initPdf('rest')
}
// 最小化窗口
const minimize = () => {
toolState.isPdfWin=false
toolState.showBoardAll=true //恢复默认值
console.log(toolState.showBoardAll,"关闭")
ipcRenderer.invoke('tool-sphere:reset') //重置tool状态
ipcRenderer.send('open-PDF:minimize')
const minimize = async () => {
await pdfCanvaslist.value.savaDataStore()
// toolState.isPdfWin=false
// toolState.showBoardAll=true //恢复默认值
// console.log(toolState.showBoardAll,"关闭")
// // ipcRenderer.send('tool-sphere:reset') //重置tool状态
// ipcRenderer.send('open-PDF:minimize')
}
const handleUpdate = (data) => {
numPagesTotal.value = data
@ -103,15 +105,14 @@ const switchPageMode = () => {
pdfCanvaslist.value.initPdf('rest')
}
}
onMounted(async () => {
onMounted(async () => {
toolState.isPdfWin=true
console.log(toolState.showBoardAll,"c初始")
const route = useRoute();
textbookId.value = route.query.textbookId
pdfObj.bookId=textbookId.value
getBookMarkById(textbookId.value).then(res=>{
pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
console.log(pdfObj.allPageData)
isOnLoadShow.value=true
})
})
@ -130,13 +131,6 @@ const getUniqueArrayByLastOccurrence=(array)=> {
return resultArray;
}
// watchEffect(() => {
// if(toolState.model=='select'){
// toolState.showBoardAll=false
// }
// console.log(toolState.model)
// })
</script>
<style lang="scss" scoped>