diff --git a/src/renderer/src/components/pdf/index.vue b/src/renderer/src/components/pdf/index.vue index 75a64d6..276aa80 100644 --- a/src/renderer/src/components/pdf/index.vue +++ b/src/renderer/src/components/pdf/index.vue @@ -50,7 +50,10 @@ const renderPage = async (canvasobj) => { const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise // 渲染当前页 const page = await pdf.getPage(canvasobj.page) - const viewport = page.getViewport({ scale: 1.28 }) + 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 @@ -66,34 +69,20 @@ const renderPage = async (canvasobj) => { img.onload = () => { // 在这里执行图像加载完成后的操作 // 根据传过来的pdf对象 判断改渲染哪一个fabric - // var screenWidth = window.innerWidth/2-10; - // var screenHeight = window.innerHeight; - // // 计算图像的原始宽度和高度 - // var imgWidth = img.width; - // var imgHeight = img.height; - // // 计算图像的缩放比例以适应屏幕 - // var widthRatio = screenWidth / imgWidth; - // var heightRatio = screenHeight / imgHeight; - // //选择较小的缩放比例以确保图像完全适应屏幕 - // var scaleRatio = Math.min(widthRatio, heightRatio); - // // 计算缩放后的图像尺寸 - // var targetWidth = imgWidth * scaleRatio; - // var targetHeight = imgHeight * scaleRatio; - if (props.pdfObj.numberOfPdf == 2) { if (canvasobj.index == 0) { - fabriccanvas.value.setWidth(img.width) - fabriccanvas.value.setHeight(img.height) + fabriccanvas.value.setWidth(screenWidth) + fabriccanvas.value.setHeight(screenHeight) displayData(fabriccanvas, canvsStore, canvasobj, fabric, img) } else { - fabriccanvas1.value.setWidth(img.width) - fabriccanvas1.value.setHeight(img.height) + fabriccanvas1.value.setWidth(screenWidth) + fabriccanvas1.value.setHeight(screenHeight) displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img) } } else { - fabriccanvas.value.setWidth(img.width) - fabriccanvas.value.setHeight(img.height) + fabriccanvas.value.setWidth(screenWidth) + fabriccanvas.value.setHeight(screenHeight) displayData(fabriccanvas, canvsStore, canvasobj, fabric, img) } // console.log(imgarr.value) @@ -120,7 +109,7 @@ const loadPdf = async (canvasobj) => { const initPdf = async (type = 'default') => { // 保存数据 - savecanvsStore(imgarr, canvsStore) + savecanvsStore(imgarr, canvsStore) // initcanvasdata(fabriccanvas) // initcanvasdata(fabriccanvas1) // 单页模式 @@ -172,8 +161,10 @@ const initPdfone = async () => { setTimeout(() => { fabriccanvas1.value = new fabric.Canvas('pdf-fabric1') fabriccanvas1.value.isDrawingMode = true - fabriccanvas1.value.freeDrawingBrush.color = 'red' + fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE' + fabriccanvas1.value.freeDrawingCursor = 'default' fabriccanvas1.value.setWidth(595) + handleevent(fabriccanvas1.value, imgarr, 'two') }, 0) initPdf('addOnePage') } diff --git a/src/renderer/src/utils/pdfAndFabric.js b/src/renderer/src/utils/pdfAndFabric.js index f4b0ca9..3807034 100644 --- a/src/renderer/src/utils/pdfAndFabric.js +++ b/src/renderer/src/utils/pdfAndFabric.js @@ -14,23 +14,24 @@ export function handleevent(canvas, imgarr, type = 'defalut') { if (imgarr.value[0].index == 0) { imgarr.value[0].JSONdata = canvas.toJSON() } - if (imgarr.value[1].index == 0) { + 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) { + 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) - // console.log(canvsStore.pageArr,22222222222222222222+'存入') } // 重显数据 export function displayData(canvas, canvsStore, canvasobj, fabric, img) { @@ -50,19 +51,21 @@ export function displayData(canvas, canvsStore, canvasobj, fabric, img) { canvsStore.pageArr.forEach((item) => { //初始化 if (item.page == canvasobj.page) { - canvas.value.clear() // 清除 Canvas + // canvas.value.clear() // 清除 Canvas // console.log(item.JSONdata, '找到一样的数据') canvas.value.loadFromJSON(item.JSONdata, () => { // 在所有对象加载完成后重新渲染画布 - requestAnimationFrame(() => { - // 渲染所有对象 - canvas.value.renderAll.bind(canvas.value) - canvas.value.renderAll() - }) + canvas.value.renderAll.bind(canvas.value) + canvas.value.renderAll() + // requestAnimationFrame(() => { + // // 渲染所有对象 + + // }) }) } else { // 使用 requestAnimationFrame 来更新画布,确保在下一帧进行重绘 - canvas.value.clear() // 清除 Canvas + // // 清除 Canvas + canvas.value.clear() requestAnimationFrame(function () { fabric.Image.fromURL(img.src, (img) => { img.set({ @@ -75,6 +78,7 @@ export function displayData(canvas, canvsStore, canvasobj, fabric, img) { }) // 渲染所有对象 canvas.value.renderAll.bind(canvas.value) + canvas.value.renderAll() }) } })