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')
 }

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()
       })
     }
   })