|
@@ -461,7 +461,7 @@ export default {
|
|
|
|
|
|
|
|
this.ImageInfoChange();//用image图片替代背景 是为了高清显示
|
|
this.ImageInfoChange();//用image图片替代背景 是为了高清显示
|
|
|
|
|
|
|
|
- // console.log("加载边框数据",this.drawData);
|
|
|
|
|
|
|
+ console.log("加载边框数据",this.drawData);
|
|
|
for(var i=0;i<this.drawData.length;i++)
|
|
for(var i=0;i<this.drawData.length;i++)
|
|
|
{
|
|
{
|
|
|
let item=this.drawData[i];
|
|
let item=this.drawData[i];
|
|
@@ -506,6 +506,29 @@ export default {
|
|
|
ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
|
|
|
|
|
|
ctx.textAlign = 'left';
|
|
ctx.textAlign = 'left';
|
|
|
|
|
+
|
|
|
|
|
+ const iconX=obj.x-20*this.zoomRate*this.scale;
|
|
|
|
|
+ const iconY=obj.y-20*this.zoomRate*this.scale;
|
|
|
|
|
+ const iconWidth = 100*this.zoomRate*this.scale;
|
|
|
|
|
+ const iconHeight = 100*this.zoomRate*this.scale;
|
|
|
|
|
+
|
|
|
|
|
+ // displayType:res.data.displayType,//显示类型 0-分数 1-对错 2-等级
|
|
|
|
|
+ // displayName: res.data.displayName,//显示值
|
|
|
|
|
+ // correctType: res.data.correctType,//显示对错的时候 0-错 1-半对 2-全对
|
|
|
|
|
+ if(item.displayType === 0){
|
|
|
|
|
+ ctx.fillText(`${item.displayName}`,obj.x+35*this.zoomRate*this.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{
|
|
|
|
|
+ //半对
|
|
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
else
|
|
else
|
|
|
{
|
|
{
|
|
@@ -521,26 +544,40 @@ export default {
|
|
|
const iconWidth = 50*this.zoomRate*this.scale;
|
|
const iconWidth = 50*this.zoomRate*this.scale;
|
|
|
const iconHeight = 50*this.zoomRate*this.scale;
|
|
const iconHeight = 50*this.zoomRate*this.scale;
|
|
|
// console.log("打印item.score",item.score)
|
|
// console.log("打印item.score",item.score)
|
|
|
- if(item.score==0)
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ if(item.displayType === 0 || item.displayType === 2){
|
|
|
|
|
+ ctx.fillText(`${item.displayName}`,obj.x+35*this.zoomRate*this.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{
|
|
|
|
|
+ //半对
|
|
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ // if(item.score==0)
|
|
|
|
|
+ // {
|
|
|
|
|
|
|
|
|
|
|
|
|
- //0 分全错
|
|
|
|
|
- ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
|
|
+ // //0 分全错
|
|
|
|
|
+ // ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
- else if(item.score==item.fullScore)
|
|
|
|
|
- {
|
|
|
|
|
- //满分 全对
|
|
|
|
|
- ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
- }
|
|
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
- //半对
|
|
|
|
|
- ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else if(item.score==item.fullScore)
|
|
|
|
|
+ // {
|
|
|
|
|
+ // //满分 全对
|
|
|
|
|
+ // ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else
|
|
|
|
|
+ // {
|
|
|
|
|
+ // //半对
|
|
|
|
|
+ // ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ // }
|
|
|
}
|
|
}
|
|
|
- ctx.fillText(item.score,obj.x+35*this.zoomRate*this.scale,obj.y);
|
|
|
|
|
|
|
+ // ctx.fillText(`${item.score}`,obj.x+35*this.zoomRate*this.scale,obj.y);
|
|
|
|
|
|
|
|
// ctx.fillStyle = 'blue';
|
|
// ctx.fillStyle = 'blue';
|
|
|
// ctx.font = `24px Arial`; // 让文字大小跟随缩放
|
|
// ctx.font = `24px Arial`; // 让文字大小跟随缩放
|
|
@@ -613,6 +650,27 @@ export default {
|
|
|
ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
ctx.font = `${fontSize}px Arial`; // 让文字大小跟随缩放
|
|
|
|
|
|
|
|
ctx.textAlign = 'left';
|
|
ctx.textAlign = 'left';
|
|
|
|
|
+
|
|
|
|
|
+ const iconX=obj.x-20*this.zoomRate*this.scale;
|
|
|
|
|
+ const iconY=obj.y-20*this.zoomRate*this.scale;
|
|
|
|
|
+ const iconWidth = 100*this.zoomRate*this.scale;
|
|
|
|
|
+ const iconHeight = 100*this.zoomRate*this.scale;
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ if(item.displayType == 0){
|
|
|
|
|
+ ctx.fillText(`${item.displayName}`,obj.x+35*this.zoomRate*this.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{
|
|
|
|
|
+ //半对
|
|
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
else
|
|
else
|
|
|
{
|
|
{
|
|
@@ -627,27 +685,42 @@ export default {
|
|
|
const iconY=obj.y-20*this.zoomRate*this.scale;
|
|
const iconY=obj.y-20*this.zoomRate*this.scale;
|
|
|
const iconWidth = 50*this.zoomRate*this.scale;
|
|
const iconWidth = 50*this.zoomRate*this.scale;
|
|
|
const iconHeight = 50*this.zoomRate*this.scale;
|
|
const iconHeight = 50*this.zoomRate*this.scale;
|
|
|
|
|
+
|
|
|
|
|
+ if(item.displayType === 0 || item.displayType === 2){
|
|
|
|
|
+ ctx.fillText(`${item.displayName}`,obj.x+35*this.zoomRate*this.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{
|
|
|
|
|
+ //半对
|
|
|
|
|
+ ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
// console.log("打印item.score",item.score)
|
|
// console.log("打印item.score",item.score)
|
|
|
- if(item.score==0)
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ // if(item.score==0)
|
|
|
|
|
+ // {
|
|
|
|
|
|
|
|
|
|
|
|
|
- //0 分全错
|
|
|
|
|
- ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
|
|
+ // //0 分全错
|
|
|
|
|
+ // ctx.drawImage(this.CacheAllWrong, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
- else if(item.score==item.fullScore)
|
|
|
|
|
- {
|
|
|
|
|
- //满分 全对
|
|
|
|
|
- ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
- }
|
|
|
|
|
- else
|
|
|
|
|
- {
|
|
|
|
|
- //半对
|
|
|
|
|
- ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else if(item.score==item.fullScore)
|
|
|
|
|
+ // {
|
|
|
|
|
+ // //满分 全对
|
|
|
|
|
+ // ctx.drawImage(this.CacheAllRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // else
|
|
|
|
|
+ // {
|
|
|
|
|
+ // //半对
|
|
|
|
|
+ // ctx.drawImage(this.CacheHalfRight, iconX, iconY, iconWidth, iconHeight);
|
|
|
|
|
+ // }
|
|
|
}
|
|
}
|
|
|
- ctx.fillText(item.score,obj.x+35*this.zoomRate*this.scale,obj.y);
|
|
|
|
|
|
|
+ // ctx.fillText(item.score,obj.x+35*this.zoomRate*this.scale,obj.y);
|
|
|
|
|
|
|
|
// ctx.fillStyle = 'blue';
|
|
// ctx.fillStyle = 'blue';
|
|
|
// ctx.font = `24px Arial`; // 让文字大小跟随缩放
|
|
// ctx.font = `24px Arial`; // 让文字大小跟随缩放
|