评卷页面原图遮盖操作，按照当前画布缩放比例重置遮盖坐标和宽高

stmms-web/src/main/webapp/static/mark-new/js/modules/sheet-view.js

@@ -20,39 +20,39 @@ function SheetView(option) {
         this.render();
     });
     this.markControl.on('view.sidebar.open', this, function(event, context, eventObject) {
-        if(context.task!=undefined){
-        	this.render(context.task.sheetUrls);
+        if (context.task != undefined) {
+            this.render(context.task.sheetUrls);
         }
     });
     this.markControl.on('view.sidebar.close', this, function(event, context, eventObject) {
-    	if(context.task!=undefined){
-        	this.render(context.task.sheetUrls);
+        if (context.task != undefined) {
+            this.render(context.task.sheetUrls);
         }
     });
 }
 
 SheetView.prototype.init = function() {
-	var self = this;
+    var self = this;
     this.markControl.initMarkFunction();
     this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container);
     this.container.width(this.maxWidth);
-    
+
     this.container.header = getDom(this.container_header_dom, this.markControl).appendTo(this.container);
     this.container.header.width('100%');
 
     this.container.content = getDom(this.container_content_dom, this.markControl).appendTo(this.container);
     this.container.content.width('100%');
-    
-    this.container.header.find('.image-close').click(function () {
+
+    this.container.header.find('.image-close').click(function() {
         self.toggle(false);
     });
-    
+
     this.control = getDom(this.control_dom, this.markControl).appendTo(this.markControl.container.assistant);
-    this.control.find('#show-sheet-button').click(function () {
+    this.control.find('#show-sheet-button').click(function() {
         self.markControl.container.assistant.hide();
         self.toggle(true);
     });
-    this.control.find('#hide-sheet-button').click(function () {
+    this.control.find('#hide-sheet-button').click(function() {
         self.markControl.container.assistant.hide();
         self.toggle(false);
     });
@@ -60,64 +60,64 @@ SheetView.prototype.init = function() {
 }
 
 SheetView.prototype.render = function(urls) {
-	var self = this;
-	self.container.header.find('.image-switch').empty();
-	self.container.content.empty();
+    var self = this;
+    self.container.header.find('.image-switch').empty();
+    self.container.content.empty();
     if (urls != undefined && urls.length > 0) {
         for (var i = 0; i < urls.length; i++) {
-        	var url = urls[i];
-        	var sheetId = "sheet"+i;
-        	var nav = $('<a href="#" data-url="'+url+'" id="'+sheetId+'"><span>'+(i+1)+'</span></a>').appendTo(this.container.header.find('.image-switch'));
+            var url = urls[i];
+            var sheetId = "sheet" + i;
+            var nav = $('<a href="#" data-url="' + url + '" id="' + sheetId + '"><span>' + (i + 1) + '</span></a>').appendTo(this.container.header.find('.image-switch'));
         }
-        this.container.header.find('.image-switch a').click(function(){
-        	var url = this.getAttribute("data-url");
-        	var sheetId = this.getAttribute("id");
-        	self.renderContent(self.container.content, sheetId);
+        this.container.header.find('.image-switch a').click(function() {
+            var url = this.getAttribute("data-url");
+            var sheetId = this.getAttribute("id");
+            self.renderContent(self.container.content, sheetId);
         });
         this.container.header.find('.image-switch a').first().click();
-        
+
     } else {
         this.container.hide();
     }
 }
 
 SheetView.prototype.renderContent = function(content, sheetId) {
-	content.width(this.markControl.container.centerContent.width());
-	content.height(this.markControl.container.centerContent.height());
-	content.empty();
-	var url =  document.getElementById(sheetId).getAttribute("data-url");
-	var show  = false;
-	var i = sheetId.split("sheet")[1];
-//	if(i%2==0){
-//		show = true;
-//	}
-	content.append($('<canvas id="sheet-canvas"></canvas>'));
-	var image = new Image();
-	image.crossOrigin = '';
-	image.src = this.server + url ;
+    content.width(this.markControl.container.centerContent.width());
+    content.height(this.markControl.container.centerContent.height());
+    content.empty();
+    var url = document.getElementById(sheetId).getAttribute("data-url");
+    var show = false;
+    var i = sheetId.split("sheet")[1];
+    //  if(i%2==0){
+    //      show = true;
+    //  }
+    content.append($('<canvas id="sheet-canvas"></canvas>'));
+    var image = new Image();
+    image.crossOrigin = '';
+    image.src = this.server + url;
     image.canvas = document.getElementById('sheet-canvas');
     image.content = content;
     var self = this;
-    if(self.sheetConfig){
-    	self.sheetConfig = JSON.parse(self.sheetConfig);
-	};
+    if (self.sheetConfig) {
+        self.sheetConfig = JSON.parse(self.sheetConfig);
+    };
     image.onload = function() {
-    	var ctx = this.canvas.getContext("2d");
-    	this.canvas.width = Math.min(this.width, this.content.width());
-    	this.canvas.height = this.canvas.width * this.height / this.width;
-    	ctx.drawImage(image, 0,0,this.width,this.height,0, 0, this.canvas.width, this.canvas.height);
-    	ctx.fillStyle = "#FFFFFF";
-//    	if(show){
-//    		ctx.fillRect(0, 0, this.canvas.width/2, this.canvas.height*3.7/10);
-//    	}
-    	for(var j = 0; j < self.sheetConfig.length; j++){
-    		var config = self.sheetConfig[j];
-    		if(config.i == i+1){
-    			ctx.fillRect(config.x, config.y, config.w, config.h);
-    		}
-    	}
-    	
-    	this.canvas.toDataURL("image/jpeg");
+        var ctx = self.canvas.getContext("2d");
+        self.canvas.width = Math.min(image.width, self.content.width());
+        var scale = self.canvas.width / image.width;
+        self.canvas.height = image.height * scale;
+        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, self.canvas.width, self.canvas.height);
+        ctx.fillStyle = "#FFFFFF";
+        //      if(show){
+        //          ctx.fillRect(0, 0, this.canvas.width/2, this.canvas.height*3.7/10);
+        //      }
+        for (var j = 0; j < self.sheetConfig.length; j++) {
+            var config = self.sheetConfig[j];
+            if (config.i == (i + 1)) {
+                ctx.fillRect(config.x * sacle, config.y * scale, config.w * scale, config.h * scale);
+            }
+        }
+        //this.canvas.toDataURL("image/jpeg");
     }
 }
 
@@ -139,8 +139,8 @@ SheetView.prototype.control_dom = '<h3 class="popover-title">查看原卷</h3>\
 SheetView.prototype.container_dom = '<div class="image-view-popover sheet" style=" width:100%; height:100vh;"></div>';
 
 SheetView.prototype.container_header_dom = '<div class="popover-header">\
-	<p class="title">原图切换</p>\
-	<p class="image-switch"></p>\
-	<p class="image-close"><img src="{staticServer}/mark-new/images/images-close-b.png" /></p></div>';
+    <p class="title">原图切换</p>\
+    <p class="image-switch"></p>\
+    <p class="image-close"><img src="{staticServer}/mark-new/images/images-close-b.png" /></p></div>';
 
-SheetView.prototype.container_content_dom = '<div class="popover-cont"></div>';
+SheetView.prototype.container_content_dom = '<div class="popover-cont"></div>';