|
|
@@ -329,23 +329,484 @@ export default {
|
|
|
downloadImage()
|
|
|
{
|
|
|
|
|
|
- this.DownloadDrawImage();
|
|
|
- //将canvas 转换为data Url
|
|
|
- const imgUrl =this.canvas.toDataURL('image/png');
|
|
|
- //创建一个隐藏的a标签
|
|
|
+ // this.DownloadDrawImage();
|
|
|
+ // //将canvas 转换为data Url
|
|
|
+ // const imgUrl =this.canvas.toDataURL('image/png');
|
|
|
+ // //创建一个隐藏的a标签
|
|
|
+ // let link = document.createElement('a');
|
|
|
+ // link.href = imgUrl;
|
|
|
+ // link.download = this.downLoadName+'.png';
|
|
|
+
|
|
|
+ // // link.setAttribute('id', 'downloadImg');
|
|
|
+ // // link.setAttribute('_blank', 'target');
|
|
|
+ // //触发点击事件
|
|
|
+ // document.body.appendChild(link);
|
|
|
+ // link.click()
|
|
|
+ // document.body.removeChild(link);
|
|
|
+
|
|
|
+ // 创建一个新的canvas用于导出
|
|
|
+ const exportCanvas = document.createElement('canvas');
|
|
|
+ const exportCtx = exportCanvas.getContext('2d');
|
|
|
+
|
|
|
+ // 设置导出canvas的尺寸与当前canvas相同
|
|
|
+ exportCanvas.width = this.paperImgInfo.width;
|
|
|
+ exportCanvas.height = this.paperImgInfo.height;
|
|
|
+ console.log("画布宽高",this.canvasInfo.width,this.canvasInfo.height);
|
|
|
+ console.log("图片宽高",this.paperImgInfo.width,this.paperImgInfo.height)
|
|
|
+
|
|
|
+ // 在canvas上按当前显示尺寸绘制所有试卷图片
|
|
|
+ exportCtx.drawImage(this.image, 0, 0, this.paperImgInfo.width, this.paperImgInfo.height);
|
|
|
+
|
|
|
+ // 重新绘制标注信息到导出canvas上(按原始图片尺寸)
|
|
|
+ this.DrawDataInfoCommon(exportCtx,1,1);//导出按原试卷尺寸
|
|
|
+
|
|
|
+ // // 将当前canvas内容绘制到导出canvas上(这包括所有标记和注释)
|
|
|
+ // exportCtx.drawImage(this.$refs.paperCanvas, 0, 0);
|
|
|
+
|
|
|
+ // 将合并后的内容转换为data URL
|
|
|
+ const imgUrl = exportCanvas.toDataURL('image/png');
|
|
|
+
|
|
|
+ // 创建一个隐藏的a标签
|
|
|
let link = document.createElement('a');
|
|
|
link.href = imgUrl;
|
|
|
- link.download = this.downLoadName+'.png';
|
|
|
-
|
|
|
- // link.setAttribute('id', 'downloadImg');
|
|
|
- // link.setAttribute('_blank', 'target');
|
|
|
- //触发点击事件
|
|
|
+ link.download = this.downLoadName + '.png';
|
|
|
+
|
|
|
+ // 触发点击事件
|
|
|
document.body.appendChild(link);
|
|
|
- link.click()
|
|
|
+ link.click();
|
|
|
document.body.removeChild(link);
|
|
|
|
|
|
},
|
|
|
|
|
|
+ //导出绘制批注信息 公共方法 抽离成一个
|
|
|
+ DrawDataInfoCommon(ctx,zoomRate,scale)
|
|
|
+ {
|
|
|
+
|
|
|
+ for(var i=0;i<this.drawData.length;i++)
|
|
|
+ {
|
|
|
+ let item=this.drawData[i];
|
|
|
+ const point=JSON.parse(item.samplingPosition);//原始采分点的坐标
|
|
|
+
|
|
|
+ console.log("打印point",point);
|
|
|
+ console.log("打印卡类型",this.usedCardType);
|
|
|
+ let blockPoint='';//切块的坐标
|
|
|
+ let blockList=[];//跨页的后面的页的y坐标需要减去的高度
|
|
|
+ let jHeight=0;//跨页的标注 需要减去的高度
|
|
|
+ let obj={
|
|
|
+ x:point.x*zoomRate*scale,
|
|
|
+ y:point.y*zoomRate*scale,
|
|
|
+ };//采分点的坐标
|
|
|
+
|
|
|
+ if(this.usedCardType==1)
|
|
|
+ {
|
|
|
+ // 如果是系统卡需要特殊处理 需要将坐标转成系统卡的坐标 并且需要去掉上下左右的边框
|
|
|
+ console.log("打印this.paperImgInfo",this.paperImgInfo);
|
|
|
+ console.log("如果是系统卡需要特殊处理",item);
|
|
|
+ let templateInfo={
|
|
|
+ width:794-30*2,//减去左右的边距
|
|
|
+ height:1123-25*2//减去上下的边距
|
|
|
+ };//模板去掉边框的尺寸
|
|
|
+ //如果长大于宽 就是A3 否则就是A4
|
|
|
+ if(this.paperImgInfo.width>this.paperImgInfo.height)
|
|
|
+ {
|
|
|
+ //A3 1588*1123
|
|
|
+ templateInfo={
|
|
|
+ width:1588-30*2,//减去左右的边距
|
|
|
+ height:1123-25*2//减去上下的边距
|
|
|
+ };//模板去掉边框的尺寸
|
|
|
+ }
|
|
|
+ let imagePoint={};
|
|
|
+ //客观题 需要减去 30 和25 因为客观题的坐标是相当于试卷原点 其他的主观题坐标是相当于批阅块的
|
|
|
+ if(item.titleType==1)
|
|
|
+ {
|
|
|
+ imagePoint={
|
|
|
+ x:((point.x-30)/templateInfo.width)*this.paperImgInfo.width,
|
|
|
+ y:((point.y-15)/templateInfo.height)*this.paperImgInfo.height,
|
|
|
+ };//相对于原图试卷的坐标 这里减去30是 黑块相对于左边的边距30px 上边的边距25px 减去15 是因为选择题的采分点 使用的是第一个答案的初始坐标点 需要减去答案的高度使其上下居中
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ imagePoint={
|
|
|
+ x:(point.x/templateInfo.width)*this.paperImgInfo.width ,
|
|
|
+ y:(point.y/templateInfo.height)*this.paperImgInfo.height,
|
|
|
+ };//相对于原图试卷的坐标
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log("系统卡相对于原图试卷的坐标imagePoint",imagePoint);
|
|
|
+ // let offsetX=this.GetInteger(imagePoint.x*this.zoomRate*this.scale);
|
|
|
+ // console.log("系统卡转换的采分点坐标offsetX",offsetX);
|
|
|
+ // let offsetY=Number(imagePoint.y*this.zoomRate*this.scale);
|
|
|
+ // console.log("系统卡转换的采分点坐标offsetY",offsetY);
|
|
|
+ obj={
|
|
|
+ x:imagePoint.x*this.zoomRate*this.scale,
|
|
|
+ y:imagePoint.y*this.zoomRate*this.scale,
|
|
|
+ };//采分点坐标更新
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ console.log("打印当前题目",item.questionName);
|
|
|
+ console.log("打印转换前采分点坐标point",point);
|
|
|
+ console.log("打印转换后相对批阅块的采分点坐标obj",obj);
|
|
|
+ //如果是批阅块的坐标 需要相加
|
|
|
+ console.log("打印item",item);
|
|
|
+ if(item.pagePaintingVOS)
|
|
|
+ {
|
|
|
+ console.log("打印item",item);
|
|
|
+ // let pageItem = item.pagePaintingVOS.find(item => item.page == point.page);
|
|
|
+ const pointIndex=point.index || 0;//默认0
|
|
|
+ blockPoint = item.pagePaintingVOS[pointIndex];
|
|
|
+ const pointPage=point.page;//采分点所在的页码
|
|
|
+ if(item.pagePaintingVOS.length>1)
|
|
|
+ {
|
|
|
+ //跨页的
|
|
|
+ blockList=item.pagePaintingVOS || [];
|
|
|
+ }
|
|
|
+ // item.pagePaintingVOS.forEach((item,index) => {
|
|
|
+ // if(index==point.index && item.page == point.page)
|
|
|
+ // {
|
|
|
+ // pageItem=item;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ //需要同时根据索引和页面查找
|
|
|
+ // const pageItem = item.pagePaintingVOS.find(item => item.page == point.page && item.index == point.index);
|
|
|
+ console.log("打印blockPoint",blockPoint);
|
|
|
+ let newBlockPoint=blockPoint;
|
|
|
+ //如果是系统卡需要特殊处理 需要将坐标转成系统卡的坐标 并且需要去掉上下左右的边框
|
|
|
+ if(this.usedCardType==1)
|
|
|
+ {
|
|
|
+
|
|
|
+ let templateInfo={
|
|
|
+ width:794-30*2,//减去左右的边距
|
|
|
+ height:1123-25*2//减去上下的边距
|
|
|
+ };//模板去掉边框的尺寸
|
|
|
+ //如果长大于宽 就是A3 否则就是A4
|
|
|
+ if(this.paperImgInfo.width>this.paperImgInfo.height)
|
|
|
+ {
|
|
|
+ //A3 1588*1123
|
|
|
+ templateInfo={
|
|
|
+ width:1588-30*2,//减去左右的边距
|
|
|
+ height:1123-25*2//减去上下的边距
|
|
|
+ };//模板去掉边框的尺寸
|
|
|
+ }
|
|
|
+ newBlockPoint={
|
|
|
+ x:this.GetInteger(((blockPoint.x-30)/templateInfo.width)*this.paperImgInfo.width),
|
|
|
+ y:this.GetInteger(((blockPoint.y-25)/templateInfo.height)*this.paperImgInfo.height),
|
|
|
+ w:this.GetInteger((blockPoint.w/templateInfo.width)*this.paperImgInfo.width),
|
|
|
+ h:this.GetInteger((blockPoint.h/templateInfo.height)*this.paperImgInfo.height),
|
|
|
+ page:blockPoint.page,
|
|
|
+ };//相对于原图试卷的坐标
|
|
|
+ blockPoint=newBlockPoint;
|
|
|
+ if(item.pagePaintingVOS.length>1)
|
|
|
+ {
|
|
|
+ blockList=[];
|
|
|
+ for(var j=0;j<item.pagePaintingVOS.length;j++)
|
|
|
+ {
|
|
|
+ let blockObj=item.pagePaintingVOS[j];
|
|
|
+ let obj={
|
|
|
+ x:this.GetInteger(((blockObj.x-30)/templateInfo.width)*this.paperImgInfo.width),
|
|
|
+ y:this.GetInteger(((blockObj.y-25)/templateInfo.height)*this.paperImgInfo.height),
|
|
|
+ w:this.GetInteger((blockObj.w/templateInfo.width)*this.paperImgInfo.width),
|
|
|
+ h:this.GetInteger((blockObj.h/templateInfo.height)*this.paperImgInfo.height),
|
|
|
+ page:blockObj.page,
|
|
|
+ };
|
|
|
+
|
|
|
+ blockList.push(obj);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(pointPage != this.pointPage)
|
|
|
+ {
|
|
|
+ //如果不是同一页
|
|
|
+ console.log("打印不同页的坐标 打印第一页的切块坐标",newBlockPoint);
|
|
|
+ jHeight=newBlockPoint.h;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (blockPoint) {
|
|
|
+ obj.x =this.GetInteger(newBlockPoint.x* zoomRate * scale+ obj.x);
|
|
|
+ obj.y =this.GetInteger(newBlockPoint.y* zoomRate * scale +obj.y);
|
|
|
+ }
|
|
|
+ console.log("打印计算后的obj",obj);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("打印转换后相对于原试卷的采分点坐标obj",obj);
|
|
|
+ // 绘制文字 定位去和客观题组不用显示
|
|
|
+
|
|
|
+ //console.log("打印标题",item.questionName);
|
|
|
+ //ctx.fillStyle = 'red';
|
|
|
+ ctx.fillStyle = '#D81E06';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ if(item.questionName=='总分')
|
|
|
+ {
|
|
|
+ const fontSize = Math.max(12, this.scoreFontSize * scale); // 最小字体12px,基础字体50px
|
|
|
+ ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
|
+
|
|
|
+ ctx.textAlign = 'left';
|
|
|
+ // 添加下划线
|
|
|
+ let text = '',textWidth = 0;
|
|
|
+ if(item.displayType === 0 || item.displayType === 2){
|
|
|
+ text = item.displayName.toString();
|
|
|
+ textWidth = ctx.measureText(text).width;
|
|
|
+ }else{
|
|
|
+ textWidth = 2 * fontSize*zoomRate*scale;
|
|
|
+ }
|
|
|
+ const underlineY = obj.y + 50*zoomRate * scale ; // 可根据需要调整下划线位置
|
|
|
+ const startX = obj.x +35*zoomRate*scale;
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(startX, underlineY);
|
|
|
+ ctx.lineTo(startX + textWidth, underlineY);
|
|
|
+ ctx.strokeStyle = ctx.fillStyle; // 使用与文字相同的颜色
|
|
|
+ ctx.lineWidth = 4;
|
|
|
+ ctx.stroke();
|
|
|
+ // 添加下划线2
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(startX-20, underlineY+20*this.zoomRate*this.scale);
|
|
|
+ ctx.lineTo(startX + textWidth + 20, underlineY+20*zoomRate*scale);
|
|
|
+ ctx.strokeStyle = ctx.fillStyle; // 使用与文字相同的颜色
|
|
|
+ ctx.lineWidth = 4;
|
|
|
+ ctx.stroke();
|
|
|
+ if(item.displayType === 0 || item.displayType === 2){//0-分数 1-对错 2-等级
|
|
|
+ ctx.fillText(item.displayName,obj.x+35*zoomRate*scale,obj.y);
|
|
|
+ }else{
|
|
|
+ //判断是什么类型 scoreType 分数类型1:全对 2:半对 3: 全错
|
|
|
+ const iconX=obj.x +35*zoomRate*scale;
|
|
|
+ const iconY=obj.y-this.rtOrWrSize*fontSize*zoomRate*scale;
|
|
|
+ const iconWidth = this.rtOrWrSize * fontSize*zoomRate*scale;
|
|
|
+ const iconHeight = this.rtOrWrSize * fontSize*zoomRate*scale;
|
|
|
+ if(item.correctType==0){
|
|
|
+ //0 分全错
|
|
|
+ ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else if(item.correctType==2){
|
|
|
+ //满分全对
|
|
|
+ ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else{
|
|
|
+ //半对
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ const fontSize = Math.max(12, 18 * scale); // 最小字体12px,基础字体18px
|
|
|
+ // ctx.font = '30px Arial';
|
|
|
+ ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
|
+ ctx.textAlign = 'left';
|
|
|
+ //判断是什么类型 scoreType 分数类型1:全对 2:半对 3: 全错
|
|
|
+ const iconX=obj.x-20*zoomRate*scale;
|
|
|
+ const iconY=obj.y-20*zoomRate*scale;
|
|
|
+ const iconWidth = 40*zoomRate*scale;
|
|
|
+ const iconHeight = 40*zoomRate*scale;
|
|
|
+ // console.log("打印item.score",item.score)
|
|
|
+ // displayType:res.data.displayType,//显示类型 0-分数 1-对错 2-等级
|
|
|
+ // displayName: res.data.displayName,//显示值
|
|
|
+ // correctType: res.data.correctType,//显示对错的时候 0-错 1-半对 2-全对
|
|
|
+ if(item.displayType === 2){
|
|
|
+ ctx.fillText(item.displayName,obj.x+35*zoomRate*scale,obj.y);
|
|
|
+ }else{
|
|
|
+ if(item.correctType===0){
|
|
|
+ //0 分全错
|
|
|
+ ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else if(item.correctType==2){
|
|
|
+ //满分 全对
|
|
|
+ ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else if(item.correctType==1){
|
|
|
+ //半对
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else{
|
|
|
+ const displayName = isNaN(item.displayName)?0:Number(item.displayName);
|
|
|
+ if(displayName==0){
|
|
|
+ //0 分全错
|
|
|
+ ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else if(displayName==item.fullScore){
|
|
|
+ //满分全对
|
|
|
+ ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }else{
|
|
|
+ //半对
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(item.displayType === 0){//0-分数 显示分数和对错
|
|
|
+ ctx.fillText(item.displayName,obj.x+35*zoomRate*scale,obj.y);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // ctx.fillText(item.displayName,obj.x+35*this.zoomRate*this.scale,obj.y);
|
|
|
+ // ctx.fillStyle = 'blue';
|
|
|
+ // ctx.font = `24px Arial`; // 让文字大小跟随缩放
|
|
|
+ // ctx.textAlign = 'center';
|
|
|
+ // ctx.textBaseline = 'middle';
|
|
|
+ // ctx.fillText(item.questionName,obj.x-65*this.zoomRate*this.scale,obj.y);
|
|
|
+ //绘制标注信息
|
|
|
+ if(item.drawLineData)
|
|
|
+ {
|
|
|
+ //有标注信息 加载标注 所有的坐标都要加上批阅块的初始坐标
|
|
|
+ console.log("打印point",point);
|
|
|
+
|
|
|
+ console.log("打印当前的页面",this.currentPage);
|
|
|
+ console.log("打印当前的批阅块数组",blockList);
|
|
|
+ const drawLineData=JSON.parse(item.drawLineData);
|
|
|
+ console.log("打印drawLineData",drawLineData);
|
|
|
+
|
|
|
+
|
|
|
+ // for(var j=0;j<drawLineData.length;j++)
|
|
|
+ // {
|
|
|
+ // var drawItem=drawLineData[j];
|
|
|
+
|
|
|
+ // console.log("打印drawItem",drawItem);
|
|
|
+ // // 扣分点 加分点 标记// 1:文字 (扣分留痕 显示扣分信息) 2:划线 3:波浪线 4:画笔 5:评语
|
|
|
+ // if(drawItem.drawType==1)
|
|
|
+ // {
|
|
|
+
|
|
|
+ // const fontSize = Math.max(12, 40 * this.zoomRate* this.scale); // 最小字体12px,基础字体16px
|
|
|
+ // ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
|
+ // // ctx.font = '30px Arial';
|
|
|
+ // ctx.fillStyle = '#D81E06';
|
|
|
+ // ctx.textAlign = 'center';
|
|
|
+ // ctx.textBaseline = 'middle';
|
|
|
+ // if(drawItem.type=='reduce')
|
|
|
+ // {
|
|
|
+ // ctx.fillText('-'+drawItem.score,(drawItem.x + blockPoint.x) * this.zoomRate * this.scale, (drawItem.y + blockPoint.y) * this.zoomRate * this.scale);
|
|
|
+ // }
|
|
|
+ // if(drawItem.type=='bonus')
|
|
|
+ // {
|
|
|
+ // ctx.fillText('+'+drawItem.score, (drawItem.x + blockPoint.x) * this.zoomRate * this.scale, (drawItem.y + blockPoint.y) * this.zoomRate * this.scale);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // }
|
|
|
+ // else if(drawItem.drawType==2)
|
|
|
+ // {
|
|
|
+ // //绘制横线
|
|
|
+ // console.log("打印需要减去的高度",jHeight);
|
|
|
+ // jHeight=0;
|
|
|
+ // console.log("打印blockList",blockList);
|
|
|
+ // let drawX=this.GetInteger((drawItem.x+ blockPoint.x)* this.zoomRate * this.scale);
|
|
|
+ // let drawY=this.GetInteger((drawItem.y+blockPoint.y - jHeight)* this.zoomRate * this.scale);
|
|
|
+ // let drawEndX=this.GetInteger((drawItem.endX+ blockPoint.x)* this.zoomRate * this.scale);
|
|
|
+ // let drawEndY=this.GetInteger((drawItem.endY+blockPoint.y - jHeight)* this.zoomRate * this.scale);
|
|
|
+ // this.DrawHorizontalLine(drawX,drawY,drawEndX,drawEndY);
|
|
|
+ // // this.DrawHorizontalLine((drawItem.x+ blockPoint.x)* this.zoomRate * this.scale, (drawItem.y+blockPoint.y)* this.zoomRate * this.scale,(drawItem.endX+ blockPoint.x)* this.zoomRate * this.scale, (drawItem.endY+blockPoint.y)* this.zoomRate * this.scale);
|
|
|
+
|
|
|
+ // }
|
|
|
+ // else if(drawItem.drawType==3)
|
|
|
+ // {
|
|
|
+ // //绘制波浪线
|
|
|
+ // let startX=parseFloat(((drawItem.x + blockPoint.x)* this.zoomRate * this.scale).toFixed(2));
|
|
|
+ // let startY=parseFloat(((drawItem.y + blockPoint.y)* this.zoomRate * this.scale).toFixed(2));
|
|
|
+ // let endX=parseFloat(((drawItem.endX + blockPoint.x)* this.zoomRate * this.scale).toFixed(2));
|
|
|
+ // let endY=parseFloat(((drawItem.endY +blockPoint.y)* this.zoomRate * this.scale).toFixed(2));
|
|
|
+
|
|
|
+ // this.DrawWaveLine(startX, startY,endX, endY);
|
|
|
+ // }
|
|
|
+ // else if(drawItem.drawType==4)
|
|
|
+ // {
|
|
|
+ // //绘制画笔数据
|
|
|
+ // // console.log("打印画笔数据",drawItem);
|
|
|
+ // this.DrawPenLine(drawItem,blockPoint);
|
|
|
+ // }
|
|
|
+ // else if(drawItem.drawType==5)
|
|
|
+ // {
|
|
|
+ // //绘制评语
|
|
|
+ // let startX=parseFloat(((drawItem.x + blockPoint.x)* this.zoomRate * this.scale).toFixed(2));
|
|
|
+ // let startY=parseFloat(((drawItem.y + blockPoint.y)* this.zoomRate * this.scale).toFixed(2));
|
|
|
+ // // console.log("打印绘制评语数据",drawItem);
|
|
|
+ // this.DrawText(startX,startY,drawItem.text);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ for(const [index, drawItem] of drawLineData.entries()) {
|
|
|
+ console.log("打印drawItem",drawItem);
|
|
|
+ // 计算通用的缩放因子,避免重复计算
|
|
|
+ const zoomScale = zoomRate * scale;
|
|
|
+ const offsetX = blockPoint.x * zoomScale;
|
|
|
+ const offsetY = blockPoint.y * zoomScale;
|
|
|
+
|
|
|
+ // 扣分点 加分点 标记// 1:文字 (扣分留痕 显示扣分信息) 2:划线 3:波浪线 4:画笔 5:评语
|
|
|
+ switch(drawItem.drawType) {
|
|
|
+ case 1: {
|
|
|
+ // 文字类型(扣分点/加分点标记)
|
|
|
+ const fontSize = Math.max(12, 40 * zoomScale);
|
|
|
+ ctx.font = `${fontSize}px Arial`;
|
|
|
+ ctx.fillStyle = '#D81E06';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+
|
|
|
+ const x = drawItem.x * zoomScale + offsetX;
|
|
|
+ const y = drawItem.y * zoomScale + offsetY;
|
|
|
+
|
|
|
+ if(drawItem.type==='reduce') {
|
|
|
+ ctx.fillText('-'+drawItem.score, x, y);
|
|
|
+ } else if(drawItem.type==='bonus') {
|
|
|
+ ctx.fillText('+'+drawItem.score, x, y);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ case 2: {
|
|
|
+ // 绘制横线
|
|
|
+ console.log("打印需要减去的高度",jHeight);
|
|
|
+ jHeight=0;
|
|
|
+ console.log("打印blockList",blockList);
|
|
|
+ const coords = {
|
|
|
+ x: this.GetInteger(drawItem.x * zoomScale + offsetX),
|
|
|
+ y: this.GetInteger(drawItem.y * zoomScale + offsetY - jHeight * zoomScale),
|
|
|
+ endX: this.GetInteger(drawItem.endX * zoomScale + offsetX),
|
|
|
+ endY: this.GetInteger(drawItem.endY * zoomScale + offsetY - jHeight * zoomScale)
|
|
|
+ };
|
|
|
+ this.DrawHorizontalLine(coords.x, coords.y, coords.endX, coords.endY);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ case 3: {
|
|
|
+ // 绘制波浪线
|
|
|
+ const coords = {
|
|
|
+ startX: parseFloat((drawItem.x * zoomScale + offsetX).toFixed(2)),
|
|
|
+ startY: parseFloat((drawItem.y * zoomScale + offsetY).toFixed(2)),
|
|
|
+ endX: parseFloat((drawItem.endX * zoomScale + offsetX).toFixed(2)),
|
|
|
+ endY: parseFloat((drawItem.endY * zoomScale + offsetY).toFixed(2))
|
|
|
+ };
|
|
|
+ this.DrawWaveLine(coords.startX, coords.startY, coords.endX, coords.endY);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ case 4:
|
|
|
+ // 绘制画笔数据
|
|
|
+ this.DrawPenLine(drawItem,blockPoint);
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 5: {
|
|
|
+ // 绘制评语
|
|
|
+ const coords = {
|
|
|
+ x: parseFloat((drawItem.x * zoomScale + offsetX).toFixed(2)),
|
|
|
+ y: parseFloat((drawItem.y * zoomScale + offsetY).toFixed(2))
|
|
|
+ };
|
|
|
+ this.DrawText(coords.x, coords.y, drawItem.text);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ default:
|
|
|
+ console.warn('未知的绘图类型:', drawItem.drawType);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
//初始数据加载
|
|
|
InitData()
|
|
|
{
|
|
|
@@ -472,11 +933,12 @@ export default {
|
|
|
this.ImageInfoChange();//用image图片替代背景 是为了高清显示
|
|
|
|
|
|
console.log("加载边框数据",this.drawData);
|
|
|
- this.DrawDataInfo();//加载边框数据
|
|
|
+ // this.DrawDataInfo();//加载边框数据
|
|
|
+ this.DrawDataInfoCommon(ctx,this.zoomRate,this.scale);
|
|
|
},
|
|
|
|
|
|
|
|
|
- //绘制批注信息
|
|
|
+ //绘制批注信息 此方法已弃用 改用DrawDataInfoCommon 公共
|
|
|
DrawDataInfo()
|
|
|
{
|
|
|
let ctx = this.canvas.getContext('2d');
|