更新轨迹版本原卷遮盖

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

@@ -8,6 +8,11 @@ var sheet_view = function(option, success) {
 function SheetView(option) {
 	this.markControl = option.markControl;
 	this.server = option.server;
+    if (option.sheetConfig) {
+        this.sheetConfig = JSON.parse(option.sheetConfig);
+    } else {
+        this.sheetConfig = [];
+    }
 	this.list = [];
 	this.markControl.on('task.get.success', this, function(event, context, eventObject) {
 		this.render(context.task.sheetUrls);
@@ -51,25 +56,40 @@ SheetView.prototype.renderContent = function(content, url,i) {
 	content.height(this.markControl.container.centerContent.height());
 	content.empty();
 //	content.append($('<img src="'+this.server + url +'">'));
-	var show  = false;
-	if(i%2==0){
-		show = true;
-	}
-	content.append($('<canvas id="sheet-canvas'+i+'"></canvas>'));
-	var image = new Image();
-	image.crossOrigin = '';
-	image.src = this.server + url ;
-    image.canvas = document.getElementById('sheet-canvas'+i);
-    image.content = content;
-    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);
-    	if(show){
-    		ctx.fillStyle = "#FFFFFF";
-    		ctx.fillRect(0, 0, this.canvas.width/2, this.canvas.height*3.7/10);
-    	}
+	    var show = false;
+	    //  if(i%2==0){
+	    //      show = true;
+	    //  }
+		content.append($('<canvas id="sheet-canvas'+i+'"></canvas>'));
+	    var image = new Image();
+	    image.crossOrigin = '';
+	    image.src = this.server + url;
+	    image.canvas = document.getElementById('sheet-canvas'+i);
+	    image.content = content;
+	    var self = this;
+	    image.onload = function() {
+	        var ctx = image.canvas.getContext("2d");
+	        image.canvas.width = Math.min(image.width, image.content.width());
+	        var scale = image.canvas.width / image.width;
+	        image.canvas.height = image.height * scale;
+	        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.canvas.width, image.canvas.height);
+	        ctx.fillStyle = "#FFFFFF";
+	        if(self.sheetConfig.length!=0){
+	        	for (var j = 0; j < self.sheetConfig.length; j++) {
+	        		var config = self.sheetConfig[j];
+	        		var index = parseNumber(i) + 1;
+	        		if (config.i == index) {
+	        			//兼容简单模式1:0:0:0:0
+	        			if(config.x==0 && config.y==0 && config.w==0 && config.h==0){
+	        				ctx.fillRect(0, 0, image.width * scale, image.height * scale);
+	        			}else{
+	        				ctx.fillRect(config.x * scale, config.y * scale, config.w * scale, config.h * scale);
+	        			}
+	        		}
+	        	}
+	        }else{
+	        	ctx.fillRect(0, 0, this.canvas.width/2, this.canvas.height*3.7/10);
+	        }
     	this.canvas.toDataURL("image/jpeg");
     }
 }