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

添加画布接口

This commit is contained in:
zhangxuelin 2024-08-06 14:07:02 +08:00
parent 1d4cad94c1
commit 2a670c1447
6 changed files with 279 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/renderer/src/api/eTextbook/index.js Normal file
View File

@ -0,0 +1,35 @@
import request from '@/utils/request'
// 新增pdf圈点勾画
export const addsmartBookMark = (params) => {
return request({
url: '/smarttalk/bookMark/addSmartBookMark',
method: 'post',
data:params
})
}
// 修改pdf圈点勾画
export const updateSmartBookMarkContent = (params) => {
return request({
url: '/smarttalk/bookMark/updateSmartBookMarkContent',
method: 'post',
data:params
})
}
// 根据书id获取pdf圈点勾画
export const getBookMarkById = (bookId) => {
return request({
url: '/smarttalk/bookMark/' + bookId,
method: 'get'
})
}
//根据id删除对应页数
export function deleteBookMark(ids) {
return request({
url: '/smarttalk/bookMark/' + ids,
method: 'delete'
})
}

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

@ -1,4 +1,4 @@
<template>
pdfAdnFabric<template>
<div class="canvasitem">
<div class="pdfAdnFabric" id="pdfAdnFabric" @touchstart="handleTouchStart">
<!-- @touchmove="handleTouchMove"
@ -6,10 +6,11 @@
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp" -->
<div >
<canvas ref="fabriccanvas" style="pointer-events: none;" />
<div :class="ispointer ? 'ispointer' : ''">
<canvas ref="fabriccanvas" />
</div>
<div v-if="props.pdfObj.numberOfPdf === 2" style="pointer-events: none;" >
<!-- style="pointer-events: none;" -->
<div v-if="props.pdfObj.numberOfPdf === 2" :class="ispointer ? 'ispointer' : ''">
<canvas ref="fabriccanvas1" />
</div>
</div>
@ -31,7 +32,7 @@ import {
import { ElMessage } from 'element-plus'
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
import { fabricVue, TYPES } from '@/plugins/fabric'
import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
const props = defineProps({
pdfObj: {
type: Object,
@ -42,9 +43,9 @@ const props = defineProps({
}
}
})
const ispointer = ref(false) //是否画笔模式
// canvas的所有数据
const canvsStore = reactive({
id: 'xxxx',
pageArr: []
})
const fabriccanvas = ref(null)
@ -63,8 +64,8 @@ const renderPage = async (canvasobj) => {
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
// 渲染当前页
const page = await pdf.getPage(canvasobj.page)
var screenWidth = window.innerWidth/2-100;
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth / 2 - 100
var screenHeight = window.innerHeight
const viewport = page.getViewport({ scale: 2 })
const canvasElement = canvasobj.canvas
@ -74,7 +75,7 @@ const renderPage = async (canvasobj) => {
canvasContext: canvasobj.context,
viewport: viewport
}
console.log(renderContext,22222222222222222222)
// console.log(renderContext,22222222222222222222)
page.render(renderContext).promise.then((res) => {
const img = document.createElement('img')
@ -94,7 +95,6 @@ const renderPage = async (canvasobj) => {
canvas1FabricVue.value.canvas.setWidth(screenWidth)
canvas1FabricVue.value.canvas.setHeight(screenHeight)
displayData(canvas1FabricVue, canvsStore, canvasobj, fabric, img)
}
} else {
canvasFabricVue.value.canvas.setHeight(screenHeight)
@ -123,20 +123,50 @@ const loadPdf = async (canvasobj) => {
}
const initPdf = async (type = 'default') => {
if(imgarr.value?.length){
}
imgarr.value.forEach(a=>{
imgarr.value.forEach((a) => {
if (a.index == 0) {
a.JSONdata = canvasFabricVue.value.canvas.toJSON()
} else {
a.JSONdata = canvas1FabricVue.value.canvas.toJSON()
}
})
if (type != 'default') {
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=>{
getBookMarkById(props.pdfObj.bookId).then(res=>{
const pageArr=getUniqueArrayByLastOccurrence(res.data)
canvsStore.pageArr=[]
pageArr.forEach((a) => {
canvsStore.pageArr.push({ page: a.pageNum, id: a.id, JSONdata: a.contentData })
})
})
})
}
// 保存数据
savecanvsStore(imgarr, canvsStore)
// savecanvsStore(imgarr, canvsStore)
if (props.pdfObj.numberOfPdf == 1) {
// imgarr.value[0]
canvasFabricVue.value.history.clean()
} else {
canvasFabricVue.value.history.clean()
@ -179,6 +209,19 @@ const initPdf = async (type = 'default') => {
}
}
}
//根据page去重
const getUniqueArrayByLastOccurrence=(array)=> {
const uniqueItems = array.reduce((acc, current) => {
// 使用 Map 来跟踪最后一个出现的 pageNum 和它的对象
acc.set(current.pageNum, current);
return acc;
}, new Map());
// 将 Map 的值转换回数组
const resultArray = Array.from(uniqueItems.values());
return resultArray;
}
const initPdfone = async () => {
setTimeout(async () => {
const option = { freeDrawingCursor: 'default' }
@ -188,30 +231,38 @@ const initPdfone = async () => {
canvas1FabricVue.value = canvas2
await initPdf('addOnePage')
}, 0)
}
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()
// canvas1.boardConfig.mode= TYPES.ActionMode.OTHER
// canvas1.boardConfig.mode= TYPES.ActionMode.ERASE
await canvas1.initCanvas(fabriccanvas.value, option)
canvas1.canvas.setWidth(window.innerWidth / 2 - 100)
// canvas1.canvas.isDrawingMode=false
canvas1.canvas.selectable = false;
canvas1.canvas.evented = 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
// canvas2.canvas.isDrawingMode=false
canvas1FabricVue.value = canvas2
window.test = { canvas1, canvas2 }
emit('update:numPagesTotal', pdf.numPages)
initPdf()
if (props.pdfObj.allPageData.length) {
props.pdfObj.allPageData.forEach((a) => {
if (a.pageNum == 1 || a.pageNum == 2) {
canvsStore.pageArr.push({ page: a.pageNum, id: a.id, JSONdata: a.contentData })
}
})
}
await initPdf()
} catch (error) {
console.log(error)
ElMessage.error('pdf文件错误')
@ -219,37 +270,30 @@ onMounted(async () => {
// 监听2个canvas事件
// handleevent(fabriccanvas.value, imgarr)
// handleevent(fabriccanvas1.value, imgarr, 'two')
})
const handleTouchStart = (e) => {
console.log(e)
};
}
const handleTouchMove = (e) => {
console.log(e)
};
}
const handleTouchEnd = (e) => {
console.log(e)
};
}
const handleMouseDown = (e) => {
// console.log(e)
};
}
const handleMouseMove = (e) => {
// console.log(e)
};
}
const handleMouseUp = (e) => {
// console.log(e)
};
}
defineExpose({
initPdf,
@ -273,4 +317,7 @@ defineExpose({
margin-right: 10px;
}
}
.ispointer {
pointer-events: none;
}
</style>

1
src/renderer/src/plugins/fabric/index.js
View File

@ -1615,6 +1615,7 @@ export class fabricVue {
break
case TYPES.ActionMode.OTHER: // 其他(工具选择)
this.canvas.isDrawingMode = false
objectSet.selectable = false
this.canvas.freeDrawingCursor = 'default'
break
default:

99
src/renderer/src/utils/pdfAndFabric.js
View File

@ -1,3 +1,4 @@
// 所有事件
export function handleevent(canvas, imgarr, type = 'defalut') {
// // 鼠标按下
@ -35,12 +36,12 @@ export function savecanvsStore(imgarr, canvsStore) {
}
// 重显数据
export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
// 初始化
const canvas = FabricVue.value.canvas
if (!canvas) {
return
}
if (!canvsStore.pageArr.length) {
fabric.Image.fromURL(
img.src,
@ -49,11 +50,15 @@ export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
left: 0,
top: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
scaleY: canvas.height / img.height,
erasable: false // 不允许擦拭
})
// FabricVue.setBackgroundImage(image, FabricVue.renderAll.bind(FabricVue))
// setBackgroundImage(image,FabricVue)
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
canvas.setBackgroundImage(image, () => {
canvas.renderAll.bind(canvas)
FabricVue.value.render()
})
},
@ -61,14 +66,42 @@ export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
)
return
}
canvsStore.pageArr.forEach((item) => {
//初始化
if (item.page == canvasobj.page) {
canvas.loadFromJSON(item.JSONdata, () => {
const isfind=findObjectByPage(canvsStore.pageArr,canvasobj.page)
if(isfind){
const canvdata={
objects:JSON.parse(isfind.JSONdata),
version: "5.3.0"
}
requestAnimationFrame(function () {
canvas.loadFromJSON(canvdata, () => {
// 在所有对象加载完成后重新渲染画布
// Utils.handleCanvasJSONLoaded(canvas)
canvas.requestRenderAll() // 批量重绘
})
fabric.Image.fromURL(
img.src,
(image) => {
image.set({
left: 0,
top: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
selectable: false,
evented: false,
erasable: false // 不允许擦拭
})
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
canvas.setBackgroundImage(image, () => {
canvas.renderAll.bind(canvas)
FabricVue.value.render()
})
},
{crossOrigin: 'anonymous'}
)
// 渲染所有对象
canvas.requestRenderAll() // 批量重绘
})
}else{
// 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
// // 清除 Canvas
@ -81,9 +114,14 @@ export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
left: 0,
top: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
scaleY: canvas.height / img.height,
selectable: false,
evented: false,
erasable: false // 不允许擦拭
})
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
canvas.setBackgroundImage(image, () => {
canvas.renderAll.bind(canvas)
FabricVue.value.render()
})
},
@ -93,7 +131,52 @@ export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
canvas.requestRenderAll() // 批量重绘
})
}
})
// canvsStore.pageArr.forEach((item) => {
// //初始化
// if (item.page == canvasobj.page) {
// // item.JSONdata
// canvas.loadFromJSON(JSON.parse(item.JSONdata), () => {
// // 在所有对象加载完成后重新渲染画布
// // Utils.handleCanvasJSONLoaded(canvas)
// canvas.requestRenderAll() // 批量重绘
// })
// } else {
// // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
// // // 清除 Canvas
// // canvas.clear()
// requestAnimationFrame(function () {
// fabric.Image.fromURL(
// img.src,
// (image) => {
// image.set({
// left: 0,
// top: 0,
// scaleX: canvas.width / img.width,
// scaleY: canvas.height / img.height,
// selectable: false,
// evented: false,
// erasable: false // 不允许擦拭
// })
// // canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
// canvas.setBackgroundImage(image, () => {
// canvas.renderAll.bind(canvas)
// FabricVue.value.render()
// })
// },
// {crossOrigin: 'anonymous'}
// )
// // 渲染所有对象
// canvas.requestRenderAll() // 批量重绘
// })
// }
// })
}
// 找到page一样的
const findObjectByPage=(array, page)=> {
const foundObject = array.find(obj => obj.page === page);
return foundObject || false;
}
//page 一样替换

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

@ -33,19 +33,26 @@
<script setup>
import { ref, onMounted, watch, reactive } from 'vue'
import { useRoute } from 'vue-router';
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
import pdfCanvas from '@/components/pdf/index.vue'
import { getStaticUrl } from '@/utils/tool'
const { ipcRenderer } = require('electron')
import { getBookMarkById } from '@/api/eTextbook/index'
// const getStaticUrl=(url)=>{
// return url
// }
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
// 传过去的参数
const pdfObj = reactive({
numberOfPdf: 2, //显示几页
pdfUrl: getStaticUrl('aaa.pdf', 'user', 'selfFile', true),
allPageData:[],
bookId:null,
numPages: 1 //当前页数
})
const textbookId=ref(null)
// 总条数
const numPagesTotal = ref(0)
const pdfCanvaslist = ref(null)
@ -60,7 +67,7 @@ const navtopage = (type) => {
pdfObj.numPages += num
}
if (pdfObj.numPages > numPagesTotal.value) return
pdfCanvaslist.value.initPdf()
pdfCanvaslist.value.initPdf('rest')
}
// 最小化窗口
const minimize = () => {
@ -70,7 +77,7 @@ const handleUpdate = (data) => {
numPagesTotal.value = data
if (numPagesTotal.value == 1) {
pdfObj.numberOfPdf = 1
pdfCanvaslist.value.initPdf('restone')
pdfCanvaslist.value.initPdf('rest')
}
}
// 单双页切换
@ -87,10 +94,33 @@ const switchPageMode = () => {
} else {
// 多页切单页
pdfObj.numberOfPdf = 1
pdfCanvaslist.value.initPdf('restone')
pdfCanvaslist.value.initPdf('rest')
}
}
onMounted(async () => {})
onMounted(async () => {
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)
})
})
//根据page去重
const getUniqueArrayByLastOccurrence=(array)=> {
const uniqueItems = array.reduce((acc, current) => {
// 使用 Map 来跟踪最后一个出现的 pageNum 和它的对象
acc.set(current.pageNum, current);
return acc;
}, new Map());
// 将 Map 的值转换回数组
const resultArray = Array.from(uniqueItems.values());
return resultArray;
}
</script>
<style lang="scss" scoped>

3
src/renderer/src/views/prepare/index.vue
View File

@ -437,7 +437,8 @@ export default {
},
// 打开PDF-课件
navtoPdf() {
createWindow('open-PDF', { url: '/classBegins/index' })
console.log(this.uploadData.textbookId)
createWindow('open-PDF', { url: '/classBegins/index?textbookId='+this.uploadData.textbookId })
},
// 上课-工具类悬浮
openLesson() {