Compare commits
2 Commits
4e2512ed77
...
d64122775a
Author | SHA1 | Date |
---|---|---|
zhangxuelin | d64122775a | |
zhangxuelin | 29ad68e5ab |
|
@ -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 '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);
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
@ -106,12 +108,11 @@ const switchPageMode = () => {
|
|||
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>
|
||||
|
|
Loading…
Reference in New Issue