zdg #105
|
@ -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'
|
||||||
|
})
|
||||||
|
}
|
|
@ -0,0 +1,220 @@
|
||||||
|
<template>
|
||||||
|
<div class="canvasitem">
|
||||||
|
<div class="pdfAdnFabric" id="pdfAdnFabric">
|
||||||
|
<canvas id="pdf-fabric"></canvas>
|
||||||
|
<canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup >
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onMounted,
|
||||||
|
watch,
|
||||||
|
reactive,
|
||||||
|
defineProps,
|
||||||
|
defineExpose,
|
||||||
|
nextTick,
|
||||||
|
defineEmits
|
||||||
|
} from 'vue'
|
||||||
|
import { fabric } from 'fabric'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
pdfObj: {
|
||||||
|
type: Object,
|
||||||
|
default: {
|
||||||
|
numberOfPdf: 2, //pdf数量 只有 1 2
|
||||||
|
pdfUrl: null,
|
||||||
|
numPages: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// canvas的所有数据
|
||||||
|
const canvsStore = reactive({
|
||||||
|
id: 'xxxx',
|
||||||
|
pageArr: []
|
||||||
|
})
|
||||||
|
const fabriccanvas = ref(null)
|
||||||
|
const fabriccanvas1 = ref(null)
|
||||||
|
// 页面总数
|
||||||
|
const numPagesTotal = ref(0)
|
||||||
|
const imgarr = ref([])
|
||||||
|
// 多个pdf的对象
|
||||||
|
const canvasNumbsValue = ref([])
|
||||||
|
const emit = defineEmits(['update:numPagesTotal'])
|
||||||
|
const renderPage = async (canvasobj) => {
|
||||||
|
if (canvasobj.page > numPagesTotal.value) return
|
||||||
|
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;
|
||||||
|
const viewport = page.getViewport({ scale:2})
|
||||||
|
|
||||||
|
const canvasElement = canvasobj.canvas
|
||||||
|
canvasElement.width = viewport.width
|
||||||
|
canvasElement.height = viewport.height
|
||||||
|
const renderContext = {
|
||||||
|
canvasContext: canvasobj.context,
|
||||||
|
viewport: viewport
|
||||||
|
}
|
||||||
|
page.render(renderContext).promise.then((res) => {
|
||||||
|
const img = document.createElement('img')
|
||||||
|
img.src = canvasobj.canvas.toDataURL('image/png')
|
||||||
|
canvasobj.canvas.remove()
|
||||||
|
imgarr.value.push({ src: img.src, page: canvasobj.page, JSONdata: {}, index: canvasobj.index })
|
||||||
|
img.onload = () => {
|
||||||
|
// 在这里执行图像加载完成后的操作
|
||||||
|
// 根据传过来的pdf对象 判断改渲染哪一个fabric
|
||||||
|
if (props.pdfObj.numberOfPdf == 2) {
|
||||||
|
if (canvasobj.index == 0) {
|
||||||
|
|
||||||
|
fabriccanvas.value.setWidth(screenWidth)
|
||||||
|
fabriccanvas.value.setHeight(screenHeight)
|
||||||
|
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
|
||||||
|
} else {
|
||||||
|
fabriccanvas1.value.setWidth(screenWidth)
|
||||||
|
fabriccanvas1.value.setHeight(screenHeight)
|
||||||
|
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
fabriccanvas.value.setWidth(screenWidth)
|
||||||
|
fabriccanvas.value.setHeight(screenHeight)
|
||||||
|
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
|
||||||
|
}
|
||||||
|
// console.log(imgarr.value)
|
||||||
|
img.remove()
|
||||||
|
}
|
||||||
|
// 判断imgarr的JSONdata在canvsStore.pageArr有没有
|
||||||
|
canvsStore.pageArr.forEach((item) => {
|
||||||
|
if (item.page == canvasobj.page) {
|
||||||
|
imgarr.value.forEach((img) => {
|
||||||
|
if (img.page == canvasobj.page) {
|
||||||
|
img.JSONdata = item.JSONdata
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const updatePage = (canvasobj) => {
|
||||||
|
renderPage(canvasobj)
|
||||||
|
}
|
||||||
|
const loadPdf = async (canvasobj) => {
|
||||||
|
updatePage(canvasobj)
|
||||||
|
}
|
||||||
|
|
||||||
|
const initPdf = async (type = 'default') => {
|
||||||
|
// 保存数据
|
||||||
|
savecanvsStore(imgarr, canvsStore)
|
||||||
|
// initcanvasdata(fabriccanvas)
|
||||||
|
// initcanvasdata(fabriccanvas1)
|
||||||
|
// 单页模式
|
||||||
|
if (type == 'restone') {
|
||||||
|
// 清除 canvas 上的所有对象
|
||||||
|
fabriccanvas1.value.clear()
|
||||||
|
// 释放 canvas 的资源
|
||||||
|
fabriccanvas1.value.dispose()
|
||||||
|
}
|
||||||
|
// 清除现有 canvas 元素的内容
|
||||||
|
canvasNumbsValue.value.forEach((canvasObj) => {
|
||||||
|
const context = canvasObj.context
|
||||||
|
context.clearRect(0, 0, canvasObj.canvas.width, canvasObj.canvas.height)
|
||||||
|
})
|
||||||
|
// 清除所有对象
|
||||||
|
imgarr.value = []
|
||||||
|
canvasNumbsValue.value = []
|
||||||
|
if (props.pdfObj.pdfUrl) {
|
||||||
|
await nextTick() // 确保 DOM 渲染完成
|
||||||
|
if (props.pdfObj.numberOfPdf == 1) {
|
||||||
|
canvasNumbsValue.value = [{}]
|
||||||
|
const canvasElement = document.createElement('canvas')
|
||||||
|
canvasNumbsValue.value[0].canvas = canvasElement
|
||||||
|
canvasNumbsValue.value[0].context = canvasNumbsValue.value[0].canvas.getContext('2d')
|
||||||
|
canvasNumbsValue.value[0].page = props.pdfObj.numPages
|
||||||
|
canvasNumbsValue.value[0].index = 0
|
||||||
|
await loadPdf(canvasNumbsValue.value[0])
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < props.pdfObj.numberOfPdf; i++) {
|
||||||
|
canvasNumbsValue.value[i] = {}
|
||||||
|
const canvasElement = document.createElement('canvas')
|
||||||
|
canvasNumbsValue.value[i].canvas = canvasElement
|
||||||
|
canvasNumbsValue.value[i].context = canvasNumbsValue.value[i].canvas.getContext('2d')
|
||||||
|
// 设置页数
|
||||||
|
if (i == 0) {
|
||||||
|
canvasNumbsValue.value[i].page = props.pdfObj.numPages
|
||||||
|
} else {
|
||||||
|
canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
canvasNumbsValue.value[i].index = i
|
||||||
|
// 加载FabricVue
|
||||||
|
await loadPdf(canvasNumbsValue.value[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const initPdfone = async () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
|
||||||
|
fabriccanvas1.value.isDrawingMode = true
|
||||||
|
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
|
||||||
|
fabriccanvas1.value.freeDrawingCursor = 'default'
|
||||||
|
fabriccanvas1.value.setWidth(860)
|
||||||
|
handleevent(fabriccanvas1.value, imgarr, 'two')
|
||||||
|
}, 0)
|
||||||
|
initPdf('addOnePage')
|
||||||
|
}
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
||||||
|
numPagesTotal.value = pdf.numPages
|
||||||
|
// console.log(pdf)
|
||||||
|
// 初始化fabriccanvas
|
||||||
|
fabriccanvas.value = new fabric.Canvas('pdf-fabric')
|
||||||
|
fabriccanvas.value.setWidth(860)
|
||||||
|
fabriccanvas.value.isDrawingMode = true
|
||||||
|
fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
|
||||||
|
fabriccanvas.value.freeDrawingCursor = 'default'
|
||||||
|
|
||||||
|
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
|
||||||
|
fabriccanvas1.value.isDrawingMode = true
|
||||||
|
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
|
||||||
|
fabriccanvas1.value.freeDrawingCursor = 'default'
|
||||||
|
fabriccanvas1.value.setWidth(860)
|
||||||
|
emit('update:numPagesTotal', pdf.numPages)
|
||||||
|
initPdf()
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
ElMessage.error('pdf文件错误')
|
||||||
|
}
|
||||||
|
// 监听2个canvas事件
|
||||||
|
handleevent(fabriccanvas.value, imgarr)
|
||||||
|
handleevent(fabriccanvas1.value, imgarr, 'two')
|
||||||
|
})
|
||||||
|
defineExpose({
|
||||||
|
initPdf,
|
||||||
|
initPdfone
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.canvasitem {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.pdfAdnFabric {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
align-items: center;
|
||||||
|
:deep(> div:nth-of-type(1)) {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,8 +1,18 @@
|
||||||
<template>
|
pdfAdnFabric<template>
|
||||||
<div class="canvasitem">
|
<div class="canvasitem">
|
||||||
<div class="pdfAdnFabric" id="pdfAdnFabric">
|
<div class="pdfAdnFabric" id="pdfAdnFabric" >
|
||||||
<canvas id="pdf-fabric"></canvas>
|
<!-- @touchmove="handleTouchMove"
|
||||||
<canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
|
@touchend="handleTouchEnd"
|
||||||
|
@mousedown="handleMouseDown"
|
||||||
|
@mousemove="handleMouseMove"
|
||||||
|
@mouseup="handleMouseUp" -->
|
||||||
|
<div :class="ispointer ? 'ispointer' : ''">
|
||||||
|
<canvas ref="fabriccanvas" />
|
||||||
|
</div>
|
||||||
|
<!-- style="pointer-events: none;" -->
|
||||||
|
<div v-if="props.pdfObj.numberOfPdf === 2" :class="ispointer ? 'ispointer' : ''">
|
||||||
|
<canvas ref="fabriccanvas1" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -16,12 +26,15 @@ import {
|
||||||
defineProps,
|
defineProps,
|
||||||
defineExpose,
|
defineExpose,
|
||||||
nextTick,
|
nextTick,
|
||||||
defineEmits
|
defineEmits,watchEffect
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
import { fabric } from 'fabric'
|
// import { fabric } from 'fabric'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
|
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
|
||||||
|
import { fabricVue, TYPES } from '@/plugins/fabric'
|
||||||
|
import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
|
||||||
|
import {useToolState} from '@/store/modules/tool'
|
||||||
|
const toolState = useToolState();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
pdfObj: {
|
pdfObj: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -32,13 +45,16 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const ispointer = ref(false) //是否画笔模式
|
||||||
// canvas的所有数据
|
// canvas的所有数据
|
||||||
const canvsStore = reactive({
|
const canvsStore = reactive({
|
||||||
id: 'xxxx',
|
|
||||||
pageArr: []
|
pageArr: []
|
||||||
})
|
})
|
||||||
const fabriccanvas = ref(null)
|
const fabriccanvas = ref(null)
|
||||||
const fabriccanvas1 = ref(null)
|
const fabriccanvas1 = ref(null)
|
||||||
|
|
||||||
|
const canvasFabricVue = ref(null)
|
||||||
|
const canvas1FabricVue = ref(null)
|
||||||
// 页面总数
|
// 页面总数
|
||||||
const numPagesTotal = ref(0)
|
const numPagesTotal = ref(0)
|
||||||
const imgarr = ref([])
|
const imgarr = ref([])
|
||||||
|
@ -50,10 +66,10 @@ const renderPage = async (canvasobj) => {
|
||||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
||||||
// 渲染当前页
|
// 渲染当前页
|
||||||
const page = await pdf.getPage(canvasobj.page)
|
const page = await pdf.getPage(canvasobj.page)
|
||||||
var screenWidth = window.innerWidth/2-100;
|
var screenWidth = window.innerWidth / 2 - 100
|
||||||
var screenHeight = window.innerHeight;
|
var screenHeight = window.innerHeight
|
||||||
const viewport = page.getViewport({ scale:2})
|
const viewport = page.getViewport({ scale: 2 })
|
||||||
|
|
||||||
const canvasElement = canvasobj.canvas
|
const canvasElement = canvasobj.canvas
|
||||||
canvasElement.width = viewport.width
|
canvasElement.width = viewport.width
|
||||||
canvasElement.height = viewport.height
|
canvasElement.height = viewport.height
|
||||||
|
@ -61,6 +77,8 @@ const renderPage = async (canvasobj) => {
|
||||||
canvasContext: canvasobj.context,
|
canvasContext: canvasobj.context,
|
||||||
viewport: viewport
|
viewport: viewport
|
||||||
}
|
}
|
||||||
|
// console.log(renderContext,22222222222222222222)
|
||||||
|
|
||||||
page.render(renderContext).promise.then((res) => {
|
page.render(renderContext).promise.then((res) => {
|
||||||
const img = document.createElement('img')
|
const img = document.createElement('img')
|
||||||
img.src = canvasobj.canvas.toDataURL('image/png')
|
img.src = canvasobj.canvas.toDataURL('image/png')
|
||||||
|
@ -71,35 +89,34 @@ const renderPage = async (canvasobj) => {
|
||||||
// 根据传过来的pdf对象 判断改渲染哪一个fabric
|
// 根据传过来的pdf对象 判断改渲染哪一个fabric
|
||||||
if (props.pdfObj.numberOfPdf == 2) {
|
if (props.pdfObj.numberOfPdf == 2) {
|
||||||
if (canvasobj.index == 0) {
|
if (canvasobj.index == 0) {
|
||||||
|
canvasFabricVue.value.canvas.setWidth(screenWidth)
|
||||||
fabriccanvas.value.setWidth(screenWidth)
|
canvasFabricVue.value.canvas.setHeight(screenHeight)
|
||||||
fabriccanvas.value.setHeight(screenHeight)
|
// updateCanvasBackgroundImage(canvasFabricVue,img)
|
||||||
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
|
displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
|
||||||
} else {
|
} else {
|
||||||
fabriccanvas1.value.setWidth(screenWidth)
|
canvas1FabricVue.value.canvas.setWidth(screenWidth)
|
||||||
fabriccanvas1.value.setHeight(screenHeight)
|
canvas1FabricVue.value.canvas.setHeight(screenHeight)
|
||||||
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
|
displayData(canvas1FabricVue, canvsStore, canvasobj, fabric, img)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
fabriccanvas.value.setWidth(screenWidth)
|
canvasFabricVue.value.canvas.setHeight(screenHeight)
|
||||||
fabriccanvas.value.setHeight(screenHeight)
|
displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
|
||||||
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
|
|
||||||
}
|
}
|
||||||
// console.log(imgarr.value)
|
|
||||||
img.remove()
|
img.remove()
|
||||||
}
|
}
|
||||||
// 判断imgarr的JSONdata在canvsStore.pageArr有没有
|
// 判断imgarr的JSONdata在canvsStore.pageArr有没有
|
||||||
canvsStore.pageArr.forEach((item) => {
|
// canvsStore.pageArr.forEach((item) => {
|
||||||
if (item.page == canvasobj.page) {
|
// if (item.page == canvasobj.page) {
|
||||||
imgarr.value.forEach((img) => {
|
// imgarr.value.forEach((img) => {
|
||||||
if (img.page == canvasobj.page) {
|
// if (img.page == canvasobj.page) {
|
||||||
img.JSONdata = item.JSONdata
|
// img.JSONdata = item.JSONdata
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const updatePage = (canvasobj) => {
|
const updatePage = (canvasobj) => {
|
||||||
renderPage(canvasobj)
|
renderPage(canvasobj)
|
||||||
}
|
}
|
||||||
|
@ -108,16 +125,54 @@ const loadPdf = async (canvasobj) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const initPdf = async (type = 'default') => {
|
const initPdf = async (type = 'default') => {
|
||||||
|
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)
|
||||||
// initcanvasdata(fabriccanvas)
|
|
||||||
// initcanvasdata(fabriccanvas1)
|
if (props.pdfObj.numberOfPdf == 1) {
|
||||||
// 单页模式
|
// imgarr.value[0]
|
||||||
if (type == 'restone') {
|
canvasFabricVue.value.history.clean()
|
||||||
// 清除 canvas 上的所有对象
|
} else {
|
||||||
fabriccanvas1.value.clear()
|
canvasFabricVue.value.history.clean()
|
||||||
// 释放 canvas 的资源
|
canvas1FabricVue.value.history.clean()
|
||||||
fabriccanvas1.value.dispose()
|
|
||||||
}
|
}
|
||||||
// 清除现有 canvas 元素的内容
|
// 清除现有 canvas 元素的内容
|
||||||
canvasNumbsValue.value.forEach((canvasObj) => {
|
canvasNumbsValue.value.forEach((canvasObj) => {
|
||||||
|
@ -149,7 +204,6 @@ const initPdf = async (type = 'default') => {
|
||||||
} else {
|
} else {
|
||||||
canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
|
canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
|
||||||
}
|
}
|
||||||
|
|
||||||
canvasNumbsValue.value[i].index = i
|
canvasNumbsValue.value[i].index = i
|
||||||
// 加载FabricVue
|
// 加载FabricVue
|
||||||
await loadPdf(canvasNumbsValue.value[i])
|
await loadPdf(canvasNumbsValue.value[i])
|
||||||
|
@ -157,48 +211,99 @@ 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 () => {
|
const initPdfone = async () => {
|
||||||
setTimeout(() => {
|
setTimeout(async () => {
|
||||||
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
|
const option = { freeDrawingCursor: 'default' }
|
||||||
fabriccanvas1.value.isDrawingMode = true
|
const canvas2 = new fabricVue()
|
||||||
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
|
await canvas2.initCanvas(fabriccanvas1.value, option)
|
||||||
fabriccanvas1.value.freeDrawingCursor = 'default'
|
canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
|
||||||
fabriccanvas1.value.setWidth(595)
|
canvas1FabricVue.value = canvas2
|
||||||
handleevent(fabriccanvas1.value, imgarr, 'two')
|
await initPdf('addOnePage')
|
||||||
}, 0)
|
}, 0)
|
||||||
initPdf('addOnePage')
|
|
||||||
}
|
}
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
||||||
numPagesTotal.value = pdf.numPages
|
numPagesTotal.value = pdf.numPages
|
||||||
// console.log(pdf)
|
|
||||||
// 初始化fabriccanvas
|
|
||||||
fabriccanvas.value = new fabric.Canvas('pdf-fabric')
|
|
||||||
fabriccanvas.value.setWidth(595)
|
|
||||||
fabriccanvas.value.isDrawingMode = true
|
|
||||||
fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
|
|
||||||
fabriccanvas.value.freeDrawingCursor = 'default'
|
|
||||||
|
|
||||||
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
|
// 初始化fabriccanvas
|
||||||
fabriccanvas1.value.isDrawingMode = true
|
const option = { freeDrawingCursor: 'default' }
|
||||||
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
|
const canvas1 = new fabricVue()
|
||||||
fabriccanvas1.value.freeDrawingCursor = 'default'
|
// canvas1.boardConfig.mode= TYPES.ActionMode.OTHER
|
||||||
fabriccanvas1.value.setWidth(595)
|
// 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)
|
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) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
ElMessage.error('pdf文件错误')
|
ElMessage.error('pdf文件错误')
|
||||||
}
|
}
|
||||||
// 监听2个canvas事件
|
// 监听2个canvas事件
|
||||||
handleevent(fabriccanvas.value, imgarr)
|
// handleevent(fabriccanvas.value, imgarr)
|
||||||
handleevent(fabriccanvas1.value, imgarr, 'two')
|
// handleevent(fabriccanvas1.value, imgarr, 'two')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
initPdf,
|
initPdf,
|
||||||
initPdfone
|
initPdfone
|
||||||
})
|
})
|
||||||
|
watchEffect(() => {
|
||||||
|
|
||||||
|
console.log(toolState.showBoardAll,'监听')
|
||||||
|
if( toolState.showBoardAll){
|
||||||
|
console.log('xczxcxzsdf')
|
||||||
|
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
|
||||||
|
|
||||||
|
// console.log(toolState.model)
|
||||||
|
// console.log( toolState.showBoardAll)
|
||||||
|
// }
|
||||||
|
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -217,4 +322,7 @@ defineExpose({
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ispointer {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -1615,6 +1615,7 @@ export class fabricVue {
|
||||||
break
|
break
|
||||||
case TYPES.ActionMode.OTHER: // 其他(工具选择)
|
case TYPES.ActionMode.OTHER: // 其他(工具选择)
|
||||||
this.canvas.isDrawingMode = false
|
this.canvas.isDrawingMode = false
|
||||||
|
objectSet.selectable = false
|
||||||
this.canvas.freeDrawingCursor = 'default'
|
this.canvas.freeDrawingCursor = 'default'
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
|
|
|
@ -7,6 +7,7 @@ export const useToolState = defineStore('tool', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
model: 'select', // 悬浮球-当前模式
|
model: 'select', // 悬浮球-当前模式
|
||||||
showBoardAll: false, // 全屏画板-是否显示
|
showBoardAll: false, // 全屏画板-是否显示
|
||||||
|
isPdfWin: false, // pdf窗口是否打开
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,133 @@
|
||||||
|
// 所有事件
|
||||||
|
export function handleevent(canvas, imgarr, type = 'defalut') {
|
||||||
|
// // 鼠标按下
|
||||||
|
// canvas.on('mouse:down', function (e) {})
|
||||||
|
// // // 监听鼠标移动事件
|
||||||
|
// // canvas.on('mouse:move', (options) => {
|
||||||
|
// // console.log('Mouse move event:', options);
|
||||||
|
// // });
|
||||||
|
|
||||||
|
// // 监听鼠标释放事件
|
||||||
|
// canvas.on('mouse:up', (options) => {
|
||||||
|
// //判断是点击的哪一个
|
||||||
|
// if (type == 'defalut') {
|
||||||
|
// if (imgarr.value[0].index == 0) {
|
||||||
|
// imgarr.value[0].JSONdata = canvas.toJSON()
|
||||||
|
// }
|
||||||
|
// if (imgarr.value[1]?.index == 0) {
|
||||||
|
// imgarr.value[1].JSONdata = canvas.toJSON()
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// if (imgarr.value[0].index == 1) {
|
||||||
|
// imgarr.value[0].JSONdata = canvas.toJSON()
|
||||||
|
// }
|
||||||
|
// if (imgarr.value[1]?.index == 1) {
|
||||||
|
// imgarr.value[1].JSONdata = canvas.toJSON()
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// console.log(imgarr.value)
|
||||||
|
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
// 保存数据
|
||||||
|
export function savecanvsStore(imgarr, canvsStore) {
|
||||||
|
// canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
|
||||||
|
}
|
||||||
|
// 重显数据
|
||||||
|
export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
|
||||||
|
// // 初始化
|
||||||
|
// if (!canvsStore.pageArr.length) {
|
||||||
|
// fabric.Image.fromURL(img.src, (img) => {
|
||||||
|
// img.set({
|
||||||
|
// left: 0,
|
||||||
|
// top: 0,
|
||||||
|
// scaleX: canvas.value.width / img.width,
|
||||||
|
// scaleY: canvas.value.height / img.height
|
||||||
|
// })
|
||||||
|
// canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
|
||||||
|
// })
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// canvsStore.pageArr.forEach((item) => {
|
||||||
|
// //初始化
|
||||||
|
// if (item.page == canvasobj.page) {
|
||||||
|
// // canvas.value.clear() // 清除 Canvas
|
||||||
|
// // console.log(item.JSONdata, '找到一样的数据')
|
||||||
|
// canvas.value.loadFromJSON(item.JSONdata, () => {
|
||||||
|
// // 在所有对象加载完成后重新渲染画布
|
||||||
|
// canvas.value.renderAll.bind(canvas.value)
|
||||||
|
// canvas.value.renderAll()
|
||||||
|
// // requestAnimationFrame(() => {
|
||||||
|
// // // 渲染所有对象
|
||||||
|
|
||||||
|
// // })
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// // 使用 requestAnimationFrame 来更新画布,确保在下一帧进行重绘
|
||||||
|
// // // 清除 Canvas
|
||||||
|
// canvas.value.clear()
|
||||||
|
// requestAnimationFrame(function () {
|
||||||
|
// fabric.Image.fromURL(img.src, (img) => {
|
||||||
|
// img.set({
|
||||||
|
// left: 0,
|
||||||
|
// top: 0,
|
||||||
|
// scaleX: canvas.value.width / img.width,
|
||||||
|
// scaleY: canvas.value.height / img.height
|
||||||
|
// })
|
||||||
|
// canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
|
||||||
|
// })
|
||||||
|
// // 渲染所有对象
|
||||||
|
// canvas.value.renderAll.bind(canvas.value)
|
||||||
|
// canvas.value.renderAll()
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
//page 一样替换
|
||||||
|
const mergeAndReplace = (arr1, arr2) => {
|
||||||
|
// // 用于存储替换后的数组
|
||||||
|
// const resultArray = array1.map(item1 => {
|
||||||
|
// // 在 array2 中查找 page 相同的对象
|
||||||
|
// const replacement = array2.find(item2 => item2.page == item1.page);
|
||||||
|
// // 如果找到替换对象,则返回替换对象,否则返回原对象
|
||||||
|
// return replacement ? replacement : item1;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
|
||||||
|
// array2.forEach(item2 => {
|
||||||
|
// const existsInArray1 = array1.some(item1 => item1.page == item2.page);
|
||||||
|
// if (!existsInArray1) {
|
||||||
|
// resultArray.push(item2);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// return resultArray;
|
||||||
|
|
||||||
|
// 创建一个映射,将 arr2 中的对象按 page 属性存储
|
||||||
|
let map = new Map(arr2.map((item) => [item.page, item]))
|
||||||
|
|
||||||
|
// 使用 map 替换 arr1 中相应 page 的对象,并添加 arr2 中的对象
|
||||||
|
arr1 = arr1.map((item) => (map.has(item.page) ? map.get(item.page) : item))
|
||||||
|
|
||||||
|
// 将 map 中存在但 arr1 中不存在的对象添加到 arr1
|
||||||
|
for (let [page, obj] of map) {
|
||||||
|
if (!arr1.some((item) => item.page === page)) {
|
||||||
|
arr1.push(obj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arr1
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
export function initcanvasdata(canvas) {
|
||||||
|
canvas.value.clear() // 清除 Canvas
|
||||||
|
// 设置画布的背景色或其他属性
|
||||||
|
canvas.value.backgroundColor = 'rgba(255, 255, 255, 1)' // 白色背景
|
||||||
|
|
||||||
|
// 使用 requestAnimationFrame 来更新画布,确保在下一帧进行重绘
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
// 渲染所有对象
|
||||||
|
canvas.value.renderAll.bind(canvas.value)
|
||||||
|
})
|
||||||
|
}
|
|
@ -1,108 +1,187 @@
|
||||||
|
|
||||||
// 所有事件
|
// 所有事件
|
||||||
export function handleevent(canvas, imgarr, type = 'defalut') {
|
export function handleevent(canvas, imgarr, type = 'defalut') {
|
||||||
// 鼠标按下
|
// // 鼠标按下
|
||||||
canvas.on('mouse:down', function (e) {})
|
// canvas.on('mouse:down', function (e) {})
|
||||||
// // 监听鼠标移动事件
|
// // // 监听鼠标移动事件
|
||||||
// canvas.on('mouse:move', (options) => {
|
// // canvas.on('mouse:move', (options) => {
|
||||||
// console.log('Mouse move event:', options);
|
// // console.log('Mouse move event:', options);
|
||||||
// });
|
// // });
|
||||||
|
|
||||||
// 监听鼠标释放事件
|
// // 监听鼠标释放事件
|
||||||
canvas.on('mouse:up', (options) => {
|
// canvas.on('mouse:up', (options) => {
|
||||||
//判断是点击的哪一个
|
// //判断是点击的哪一个
|
||||||
if (type == 'defalut') {
|
// if (type == 'defalut') {
|
||||||
if (imgarr.value[0].index == 0) {
|
// if (imgarr.value[0].index == 0) {
|
||||||
imgarr.value[0].JSONdata = canvas.toJSON()
|
// imgarr.value[0].JSONdata = canvas.toJSON()
|
||||||
}
|
// }
|
||||||
if (imgarr.value[1]?.index == 0) {
|
// if (imgarr.value[1]?.index == 0) {
|
||||||
imgarr.value[1].JSONdata = canvas.toJSON()
|
// imgarr.value[1].JSONdata = canvas.toJSON()
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
if (imgarr.value[0].index == 1) {
|
// if (imgarr.value[0].index == 1) {
|
||||||
imgarr.value[0].JSONdata = canvas.toJSON()
|
// imgarr.value[0].JSONdata = canvas.toJSON()
|
||||||
}
|
// }
|
||||||
if (imgarr.value[1]?.index == 1) {
|
// if (imgarr.value[1]?.index == 1) {
|
||||||
imgarr.value[1].JSONdata = canvas.toJSON()
|
// imgarr.value[1].JSONdata = canvas.toJSON()
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
console.log(imgarr.value)
|
// console.log(imgarr.value)
|
||||||
|
|
||||||
})
|
// })
|
||||||
}
|
}
|
||||||
// 保存数据
|
// 保存数据
|
||||||
export function savecanvsStore(imgarr, canvsStore) {
|
export function savecanvsStore(imgarr, canvsStore) {
|
||||||
canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
|
canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
|
||||||
}
|
}
|
||||||
// 重显数据
|
// 重显数据
|
||||||
export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
|
export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
if (!canvsStore.pageArr.length) {
|
const canvas = FabricVue.value.canvas
|
||||||
fabric.Image.fromURL(img.src, (img) => {
|
if (!canvas) {
|
||||||
img.set({
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
scaleX: canvas.value.width / img.width,
|
|
||||||
scaleY: canvas.value.height / img.height
|
|
||||||
})
|
|
||||||
canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
|
|
||||||
})
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
canvsStore.pageArr.forEach((item) => {
|
if (!canvsStore.pageArr.length) {
|
||||||
//初始化
|
fabric.Image.fromURL(
|
||||||
if (item.page == canvasobj.page) {
|
img.src,
|
||||||
// canvas.value.clear() // 清除 Canvas
|
(image) => {
|
||||||
// console.log(item.JSONdata, '找到一样的数据')
|
image.set({
|
||||||
canvas.value.loadFromJSON(item.JSONdata, () => {
|
left: 0,
|
||||||
// 在所有对象加载完成后重新渲染画布
|
top: 0,
|
||||||
canvas.value.renderAll.bind(canvas.value)
|
scaleX: canvas.width / img.width,
|
||||||
canvas.value.renderAll()
|
scaleY: canvas.height / img.height,
|
||||||
// requestAnimationFrame(() => {
|
erasable: false // 不允许擦拭
|
||||||
// // 渲染所有对象
|
})
|
||||||
|
// FabricVue.setBackgroundImage(image, FabricVue.renderAll.bind(FabricVue))
|
||||||
// })
|
// setBackgroundImage(image,FabricVue)
|
||||||
})
|
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
|
||||||
} else {
|
|
||||||
// 使用 requestAnimationFrame 来更新画布,确保在下一帧进行重绘
|
canvas.setBackgroundImage(image, () => {
|
||||||
// // 清除 Canvas
|
canvas.renderAll.bind(canvas)
|
||||||
canvas.value.clear()
|
FabricVue.value.render()
|
||||||
requestAnimationFrame(function () {
|
|
||||||
fabric.Image.fromURL(img.src, (img) => {
|
|
||||||
img.set({
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
scaleX: canvas.value.width / img.width,
|
|
||||||
scaleY: canvas.value.height / img.height
|
|
||||||
})
|
|
||||||
canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
|
|
||||||
})
|
})
|
||||||
// 渲染所有对象
|
},
|
||||||
canvas.value.renderAll.bind(canvas.value)
|
{crossOrigin: 'anonymous'}
|
||||||
canvas.value.renderAll()
|
)
|
||||||
})
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
// 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() // 批量重绘
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 一样替换
|
//page 一样替换
|
||||||
const mergeAndReplace = (arr1, arr2) => {
|
const mergeAndReplace = (arr1, arr2) => {
|
||||||
// // 用于存储替换后的数组
|
|
||||||
// const resultArray = array1.map(item1 => {
|
|
||||||
// // 在 array2 中查找 page 相同的对象
|
|
||||||
// const replacement = array2.find(item2 => item2.page == item1.page);
|
|
||||||
// // 如果找到替换对象,则返回替换对象,否则返回原对象
|
|
||||||
// return replacement ? replacement : item1;
|
|
||||||
// });
|
|
||||||
|
|
||||||
// // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
|
|
||||||
// array2.forEach(item2 => {
|
|
||||||
// const existsInArray1 = array1.some(item1 => item1.page == item2.page);
|
|
||||||
// if (!existsInArray1) {
|
|
||||||
// resultArray.push(item2);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return resultArray;
|
|
||||||
|
|
||||||
// 创建一个映射,将 arr2 中的对象按 page 属性存储
|
// 创建一个映射,将 arr2 中的对象按 page 属性存储
|
||||||
let map = new Map(arr2.map((item) => [item.page, item]))
|
let map = new Map(arr2.map((item) => [item.page, item]))
|
||||||
|
|
|
@ -6,13 +6,14 @@
|
||||||
// Remote.app.getAppPath() E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar
|
// Remote.app.getAppPath() E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar
|
||||||
// path.join(__dirname) 根目录 E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar\out\renderer
|
// path.join(__dirname) 根目录 E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar\out\renderer
|
||||||
|
|
||||||
const path = require('path')
|
const isNode = typeof require !== 'undefined' // 是否支持node函数
|
||||||
const Remote = require('@electron/remote')
|
const path = isNode?require('path'):{}
|
||||||
const { ipcRenderer } = require('electron')
|
const Remote = isNode?require('@electron/remote'):{}
|
||||||
|
const { ipcRenderer } = isNode?require('electron'):window.electron || {}
|
||||||
|
|
||||||
// 常用变量
|
// 常用变量
|
||||||
const BaseUrl = process.env['ELECTRON_RENDERER_URL']+'/#'
|
const BaseUrl = isNode?process.env['ELECTRON_RENDERER_URL']+'/#':''
|
||||||
const isDev = process.env.NODE_ENV !== 'production'
|
const isDev = isNode?process.env.NODE_ENV !== 'production':''
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取静态资源,开发和生产环境
|
* 获取静态资源,开发和生产环境
|
||||||
|
@ -43,14 +44,16 @@ export function ipcMsgSend(key, data, type) {
|
||||||
if (type == 'old') {
|
if (type == 'old') {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
// 返回结果-监听
|
// 返回结果-监听
|
||||||
ipcRenderer.once(`${key}-reply`, (e, res) => {
|
ipcRenderer?.once(`${key}-reply`, (e, res) => {
|
||||||
resolve(res)
|
resolve(res)
|
||||||
})
|
})
|
||||||
// 发送消息
|
// 发送消息
|
||||||
ipcRenderer.send(key, data)
|
ipcRenderer?.send(key, data)
|
||||||
})
|
})
|
||||||
|
} else if (type == 'send') { // 单独发送
|
||||||
|
ipcRenderer?.send(key, data)
|
||||||
} else { // 新版本-默认
|
} else { // 新版本-默认
|
||||||
return ipcRenderer.invoke(key, data)
|
return ipcRenderer?.invoke(key, data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -32,20 +32,28 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, watch, reactive } from 'vue'
|
import { ref, onMounted, watch, reactive,watchEffect ,onBeforeUnmount} from 'vue'
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
|
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
|
||||||
import pdfCanvas from '@/components/pdf/index.vue'
|
import pdfCanvas from '@/components/pdf/index.vue'
|
||||||
import { getStaticUrl } from '@/utils/tool'
|
import { getStaticUrl } from '@/utils/tool'
|
||||||
const { ipcRenderer } = require('electron')
|
const { ipcRenderer } = require('electron')
|
||||||
|
import { getBookMarkById } from '@/api/eTextbook/index'
|
||||||
|
import {useToolState} from '@/store/modules/tool'
|
||||||
|
// const getStaticUrl=(url)=>{
|
||||||
|
// return url
|
||||||
|
// }
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
|
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
|
||||||
|
const toolState = useToolState();
|
||||||
// 传过去的参数
|
// 传过去的参数
|
||||||
const pdfObj = reactive({
|
const pdfObj = reactive({
|
||||||
numberOfPdf: 2, //显示几页
|
numberOfPdf: 2, //显示几页
|
||||||
pdfUrl: getStaticUrl('aaa.pdf', 'user', 'selfFile', true),
|
pdfUrl: getStaticUrl('aaa.pdf', 'user', 'selfFile', true),
|
||||||
|
allPageData:[],
|
||||||
|
bookId:null,
|
||||||
numPages: 1 //当前页数
|
numPages: 1 //当前页数
|
||||||
})
|
})
|
||||||
|
const textbookId=ref(null)
|
||||||
// 总条数
|
// 总条数
|
||||||
const numPagesTotal = ref(0)
|
const numPagesTotal = ref(0)
|
||||||
const pdfCanvaslist = ref(null)
|
const pdfCanvaslist = ref(null)
|
||||||
|
@ -60,17 +68,22 @@ const navtopage = (type) => {
|
||||||
pdfObj.numPages += num
|
pdfObj.numPages += num
|
||||||
}
|
}
|
||||||
if (pdfObj.numPages > numPagesTotal.value) return
|
if (pdfObj.numPages > numPagesTotal.value) return
|
||||||
pdfCanvaslist.value.initPdf()
|
pdfCanvaslist.value.initPdf('rest')
|
||||||
}
|
}
|
||||||
// 最小化窗口
|
// 最小化窗口
|
||||||
const minimize = () => {
|
const minimize = () => {
|
||||||
|
|
||||||
|
toolState.isPdfWin=false
|
||||||
|
toolState.showBoardAll=true //恢复默认值
|
||||||
|
console.log(toolState.showBoardAll,"关闭")
|
||||||
|
// ipcRenderer.send('tool-sphere:reset') //重置tool状态
|
||||||
ipcRenderer.send('open-PDF:minimize')
|
ipcRenderer.send('open-PDF:minimize')
|
||||||
}
|
}
|
||||||
const handleUpdate = (data) => {
|
const handleUpdate = (data) => {
|
||||||
numPagesTotal.value = data
|
numPagesTotal.value = data
|
||||||
if (numPagesTotal.value == 1) {
|
if (numPagesTotal.value == 1) {
|
||||||
pdfObj.numberOfPdf = 1
|
pdfObj.numberOfPdf = 1
|
||||||
pdfCanvaslist.value.initPdf('restone')
|
pdfCanvaslist.value.initPdf('rest')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 单双页切换
|
// 单双页切换
|
||||||
|
@ -87,10 +100,43 @@ const switchPageMode = () => {
|
||||||
} else {
|
} else {
|
||||||
// 多页切单页
|
// 多页切单页
|
||||||
pdfObj.numberOfPdf = 1
|
pdfObj.numberOfPdf = 1
|
||||||
pdfCanvaslist.value.initPdf('restone')
|
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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//根据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;
|
||||||
|
}
|
||||||
|
// watchEffect(() => {
|
||||||
|
// if(toolState.model=='select'){
|
||||||
|
// toolState.showBoardAll=false
|
||||||
|
|
||||||
|
// }
|
||||||
|
// console.log(toolState.model)
|
||||||
|
// })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -449,7 +449,8 @@ export default {
|
||||||
|
|
||||||
// 打开PDF-课件
|
// 打开PDF-课件
|
||||||
navtoPdf() {
|
navtoPdf() {
|
||||||
createWindow('open-PDF', { url: '/classBegins/index' })
|
console.log(this.uploadData.textbookId)
|
||||||
|
createWindow('open-PDF', { url: '/classBegins/index?textbookId='+this.uploadData.textbookId })
|
||||||
},
|
},
|
||||||
// 上课-工具类悬浮
|
// 上课-工具类悬浮
|
||||||
openLesson() {
|
openLesson() {
|
||||||
|
|
|
@ -6,8 +6,10 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
// 功能说明:画板
|
// 功能说明:画板
|
||||||
import { ref, onMounted, watch } from 'vue'
|
import { ref, onMounted, watch,defineExpose } from 'vue'
|
||||||
import {FabricVue, TYPES} from '@/plugins/fabric'
|
import {FabricVue, TYPES} from '@/plugins/fabric'
|
||||||
|
import { useToolState } from '@/store/modules/tool'
|
||||||
|
const toolStore = useToolState()
|
||||||
const canvasRef = ref(null) // 画布
|
const canvasRef = ref(null) // 画布
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: String
|
modelValue: String
|
||||||
|
@ -23,10 +25,13 @@ onMounted(async() => {
|
||||||
await FabricVue.initCanvas(canvasRef.value, option)
|
await FabricVue.initCanvas(canvasRef.value, option)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const handleMode = (newVal, oldVal) => {
|
||||||
// 监听
|
if(toolStore.isPdfWin){
|
||||||
watch(() => props.modelValue, (newVal, oldVal) => {
|
if(newVal=='clear'){
|
||||||
// console.log(newVal, oldVal)
|
emit('update:modelValue', oldVal)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
switch(newVal) {
|
switch(newVal) {
|
||||||
case 'select': // 选择模式
|
case 'select': // 选择模式
|
||||||
FabricVue.handleMode(TYPES.ActionMode.OTHER)
|
FabricVue.handleMode(TYPES.ActionMode.OTHER)
|
||||||
|
@ -39,10 +44,22 @@ watch(() => props.modelValue, (newVal, oldVal) => {
|
||||||
FabricVue.handleMode(TYPES.ActionMode.ERASE)
|
FabricVue.handleMode(TYPES.ActionMode.ERASE)
|
||||||
break
|
break
|
||||||
case 'clear': // 清空画布
|
case 'clear': // 清空画布
|
||||||
FabricVue.history?.clean()
|
if(oldVal){
|
||||||
emit('update:modelValue', oldVal)
|
FabricVue.history?.clean()
|
||||||
|
emit('update:modelValue', oldVal)
|
||||||
|
}
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
// 监听
|
||||||
|
watch(() => props.modelValue, (newVal, oldVal) => {
|
||||||
|
console.log(newVal, oldVal)
|
||||||
|
handleMode(newVal, oldVal)
|
||||||
|
})
|
||||||
|
// 暴露属性方法
|
||||||
|
defineExpose({
|
||||||
|
handleMode
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -19,13 +19,19 @@ class Ignore {
|
||||||
}
|
}
|
||||||
// 监听元素移入移出,自动设置
|
// 监听元素移入移出,自动设置
|
||||||
mounted() {
|
mounted() {
|
||||||
this.el.addEventListener('mouseenter', () => { // 进入
|
this.el.addEventListener('mouseenter', e => { // 进入
|
||||||
this.send(false) // 元素不穿透,鼠标有效
|
this.send(false) // 元素不穿透,鼠标有效
|
||||||
|
this.changeHandle(e)
|
||||||
})
|
})
|
||||||
this.el.addEventListener('mouseleave', () => { // 离开
|
this.el.addEventListener('mouseleave', e => { // 离开
|
||||||
this.send(true) // 元素穿透,鼠标无效
|
this.send(true) // 元素穿透,鼠标无效
|
||||||
|
this.changeHandle(e)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
changeHandle(e) {
|
||||||
|
const customEvent = new CustomEvent('ignore-mounted', {detail:{ignore: this, e}})
|
||||||
|
this.el.dispatchEvent(customEvent)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
export default {
|
export default {
|
||||||
mounted(el, binding) {
|
mounted(el, binding) {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="warp-all">
|
<div class="warp-all">
|
||||||
<!-- 画板 -->
|
<!-- 画板 -->
|
||||||
<board-vue v-model="tabActive" v-show="isShow"></board-vue>
|
<board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
|
||||||
<!-- 侧边工具栏 -->
|
<!-- 侧边工具栏 -->
|
||||||
<side-vue v-ignore></side-vue>
|
<side-vue v-ignore></side-vue>
|
||||||
<!-- 底部工具栏 :style="dataPos.style"-->
|
<!-- 底部工具栏 :style="dataPos.style"-->
|
||||||
|
@ -37,15 +37,13 @@ import vDrag from './directive/drag' // 自定义指令-拖拽
|
||||||
import vIgnore from './directive/ignore' // 自定义指令-穿透
|
import vIgnore from './directive/ignore' // 自定义指令-穿透
|
||||||
import { useToolState } from '@/store/modules/tool'
|
import { useToolState } from '@/store/modules/tool'
|
||||||
import { ipcMsgSend } from '@/utils/tool' // 相关工具
|
import { ipcMsgSend } from '@/utils/tool' // 相关工具
|
||||||
// const { ipcRenderer } = require('electron') // app使用
|
const tabActive = ref('select') // 工具栏当前选中项
|
||||||
const { ipcRenderer } = window.electron || {}
|
const isFold = ref(false) // 折叠工具栏
|
||||||
|
const isDrag = ref(false) // 开始拖拽
|
||||||
const tabActive = ref('select') // 工具栏当前选中项
|
const dragtime = ref(0) // 拖拽时间-计算点击还是拖动
|
||||||
const isFold = ref(false) // 折叠工具栏
|
const isShow = ref(false) // 是否显示-画板
|
||||||
const isDrag = ref(false) // 开始拖拽
|
|
||||||
const dragtime = ref(0) // 拖拽时间-计算点击还是拖动
|
|
||||||
const isShow = ref(true) // 是否显示-画板
|
|
||||||
const toolStore = useToolState() // 状态管理
|
const toolStore = useToolState() // 状态管理
|
||||||
|
const boardVueRef=ref(null) // 画板ref
|
||||||
const btnList = [ // 工具栏按钮列表
|
const btnList = [ // 工具栏按钮列表
|
||||||
{ label: '选择', value: 'select', icon: 'icon-mouse' },
|
{ label: '选择', value: 'select', icon: 'icon-mouse' },
|
||||||
{ label: '画笔', value: 'brush', icon: 'icon-huabi' },
|
{ label: '画笔', value: 'brush', icon: 'icon-huabi' },
|
||||||
|
@ -55,12 +53,11 @@ const btnList = [ // 工具栏按钮列表
|
||||||
// { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
|
// { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
|
||||||
// { label: '更多', value: 'more', icon: 'icon-xiazai9' },
|
// { label: '更多', value: 'more', icon: 'icon-xiazai9' },
|
||||||
]
|
]
|
||||||
onMounted(() => {
|
// onMounted(() => {})
|
||||||
|
// const test = (e) => { console.log('test', e) }
|
||||||
})
|
|
||||||
// ==== 方法 ===
|
// ==== 方法 ===
|
||||||
const tabChange = (val) => { // 切换tab-change
|
const tabChange = (val) => { // 切换tab-change
|
||||||
// console.log('xxxx:', val)
|
if(!toolStore.isPdfWin) toolStore.showBoardAll = true
|
||||||
switch (val) {
|
switch (val) {
|
||||||
case 'brush': // 画笔
|
case 'brush': // 画笔
|
||||||
break
|
break
|
||||||
|
@ -73,7 +70,7 @@ const tabChange = (val) => { // 切换tab-change
|
||||||
case 'more':
|
case 'more':
|
||||||
break
|
break
|
||||||
case 'close':
|
case 'close':
|
||||||
ipcRenderer?.send('tool-sphere:close')
|
ipcMsgSend('tool-sphere:close')
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
break
|
break
|
||||||
|
@ -88,10 +85,19 @@ const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
|
||||||
const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
|
const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
|
||||||
let resBool = false
|
let resBool = false
|
||||||
if (tabActive.value == 'select') resBool = !!bool
|
if (tabActive.value == 'select') resBool = !!bool
|
||||||
ipcRenderer?.send('tool-sphere:set:ignore', resBool)
|
if (!isShow.value) resBool = !!bool
|
||||||
|
setIgnore(resBool)
|
||||||
}
|
}
|
||||||
|
const setIgnore = (bool) => { // 忽略鼠标穿透
|
||||||
|
ipcMsgSend('tool-sphere:set:ignore', bool)
|
||||||
|
}
|
||||||
|
|
||||||
watchEffect(() => { // 监听
|
watchEffect(() => { // 监听
|
||||||
isShow.value = toolStore.showBoardAll // 是否显示-画板
|
isShow.value = !toolStore.isPdfWin && toolStore.showBoardAll // 是否显示-画板
|
||||||
|
if(!toolStore.isPdfWin && toolStore.showBoardAll){ //恢复进入页面前的状态
|
||||||
|
boardVueRef.value.handleMode(tabActive.value)
|
||||||
|
mouseChange(true)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue