答题卡修改

src/components/PaperImage.vue

@@ -372,7 +372,6 @@ export default {
         
         // 在canvas上按当前显示尺寸绘制所有试卷图片
         exportCtx.drawImage(this.image, 0, 0, this.paperImgInfo.width, this.paperImgInfo.height);
-
         // 重新绘制标注信息到导出canvas上（按原始图片尺寸）
         this.DrawDataInfoCommon(exportCtx,1,1);//导出按原试卷尺寸
           
@@ -670,7 +669,6 @@ export default {
               console.log("打印当前的批阅块数组",blockList);
               const drawLineData=JSON.parse(item.drawLineData);
               console.log("打印drawLineData",drawLineData);
-
               if(blockList.length>0)
               {
                 //跨页的
@@ -778,7 +776,6 @@ export default {
                   const zoomScale = zoomRate * scale;
                   const offsetX = blockPoint.x * zoomScale;
                   const offsetY = blockPoint.y * zoomScale;
-                  
                   // 扣分点 加分点 标记// 1：文字 (扣分留痕 显示扣分信息)  2：划线  3：波浪线   4:画笔 5:评语
                   switch(drawItem.drawType) {
                     case 1: {
@@ -1629,20 +1626,20 @@ export default {
     },
 
     //画横线
-      DrawHorizontalLine(x1,y1,x2,y2)
+      DrawHorizontalLine(x1,y1,x2,y2,ctx = null)
       {
         console.log("画横线起始坐标点",x1, y1, x2, y2);
-        const canvas = this.$refs.paperCanvas;
-        const ctx = canvas.getContext('2d');
-        ctx.strokeStyle = 'red';//设置红色
-        ctx.lineWidth = 2;//线条宽度
-        ctx.beginPath();
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-        ctx.stroke();
+        // 如果没有传入上下文，则使用当前canvas的上下文
+        const canvasContext = ctx || this.$refs.paperCanvas.getContext('2d');
+        canvasContext.strokeStyle = 'red';//设置红色
+        canvasContext.lineWidth = 2;//线条宽度
+        canvasContext.beginPath();
+        canvasContext.moveTo(x1, y1);
+        canvasContext.lineTo(x2, y2);
+        canvasContext.stroke();
       },
       //画波浪线
-      DrawWaveLine(startX, startY, endX, endY)
+      DrawWaveLine(startX, startY, endX, endY,ctx = null)
       {
         // console.log("画波浪线起始坐标点",startX, startY, endX, endY);
         const amplitude  = 2; // 波浪的宽度
@@ -1652,68 +1649,67 @@ export default {
         const dy=endY-startY;
 
 
-        // 开始绘制
-        const canvas = this.$refs.paperCanvas;
-        const ctx = canvas.getContext('2d');
-        ctx.strokeStyle = 'red';//设置红色
-        ctx.lineWidth = 2;//线条宽度
+         // 如果没有传入上下文，则使用当前canvas的上下文
+        const canvasContext = ctx || this.$refs.paperCanvas.getContext('2d');
+        canvasContext.strokeStyle = 'red';//设置红色
+        canvasContext.lineWidth = 2;//线条宽度
         // 清除之前的线条
         // ctx.clearRect(0, 0, this.canvasInfo.width, this.canvasInfo.height);
-        ctx.beginPath();
-        ctx.moveTo(startX, startY);//绘制第一个点
+        canvasContext.beginPath();
+        canvasContext.moveTo(startX, startY);//绘制第一个点
         //绘制波浪
         // 绘制波浪线
         for (let x = startX; x <= endX; x += 1) {
           const y = startY + dy * (x - startX) / dx + amplitude * Math.sin(frequency * (x - startX));
-          ctx.lineTo(x, y);
+          canvasContext.lineTo(x, y);
         }
         // ctx.lineTo(endX, endY);//绘制最后一个点
         // ctx.lineWidth = 2; // 设置线条宽度
-        ctx.stroke();
+        canvasContext.stroke();
       },
 
       //绘制画笔数据
-      DrawPenLine(data,blockPoint)
+      DrawPenLine(data,blockPoint,zoomRate,scale, ctx = null)
       {
         
-        let linelist=data.drawlineData;
+        console.log("打印绘制画笔数据",data);
+         let linelist=data.drawlineData;
         if(linelist.length>0)
         {
-          const canvas = this.$refs.paperCanvas;
-          const ctx = canvas.getContext('2d');
-          ctx.strokeStyle = 'red';//设置红色
-          ctx.lineWidth = 2;//线条宽度
+          // 如果没有传入上下文，则使用当前canvas的上下文
+          const canvasContext = ctx || this.$refs.paperCanvas.getContext('2d');
+          canvasContext.strokeStyle = 'red';//设置红色
+          canvasContext.lineWidth = 2;//线条宽度
           // 开始绘制
-          ctx.beginPath();
+          canvasContext.beginPath();
           
           // 绘制路径
           for (let i = 0; i < linelist.length; i++) {
             if(blockPoint)
             {
-              let x=parseFloat(((linelist[i].x + blockPoint.x)* this.zoomRate * this.scale).toFixed(2));
-              let y=parseFloat(((linelist[i].y + blockPoint.y)* this.zoomRate * this.scale).toFixed(2));
-              ctx.lineTo(x, y);
+              let x=parseFloat(((linelist[i].x + blockPoint.x)* zoomRate * scale).toFixed(2));
+              let y=parseFloat(((linelist[i].y + blockPoint.y)* zoomRate * scale).toFixed(2));
+              canvasContext.lineTo(x, y);
             }
            
           }
-          ctx.stroke();
-          ctx.closePath();
+          canvasContext.stroke();
+          canvasContext.closePath();
         }
       },
 
       //绘制文字
-      DrawText(startX, startY, text)
+      DrawText(startX, startY, text , ctx = null)
       {
-        // 开始绘制
-        const canvas = this.$refs.paperCanvas;
-        const ctx = canvas.getContext('2d');
+        // 如果没有传入上下文，则使用当前canvas的上下文
+        const canvasContext = ctx || this.$refs.paperCanvas.getContext('2d');
         // 设置字体样式
-        ctx.font = '15px Arial';
-        ctx.fillStyle = 'red';
-        ctx.textAlign = 'left';
+        canvasContext.font = '15px Arial';
+        canvasContext.fillStyle = 'red';
+        canvasContext.textAlign = 'left';
         // ctx.textBaseline = 'middle';
         // 绘制文字
-        ctx.fillText(text,startX, startY);
+        canvasContext.fillText(text,startX, startY);
       },
 
     //下载图片绘制