优化通用工具并尝试在评卷页面尝试使用

stmms-web/src/main/webapp/WEB-INF/views/include/trialDetail.jsp

@@ -62,8 +62,9 @@ function initTrialDetailContent(libraryId){
 	                },
 	                onSuccess: function(images){
 	                    trailDetailModal.setContent($('#trial-detail-content'));
-	                    trialCanvas.setMaxWidth($('#trial-left-div').width()*0.95);
+	                    trialCanvas.changeBoxSize($('#trial-left-div').width()*0.95);
 	                    trialCanvas.drawImages(images, data.pictureConfig);
+	                    $('.jBox-content').unbind('mousewheel');
 	                }
 	            });
 	        }else {

stmms-web/src/main/webapp/WEB-INF/views/modules/mark/markNew.jsp

@@ -19,6 +19,9 @@
 <script src="${ctxStatic}/perfect-scrollbar/min/perfect-scrollbar.min.js"></script>
 <link href="${ctxStatic}/perfect-scrollbar/min/perfect-scrollbar.min.css" rel="stylesheet">
 
+<script type="text/javascript" src="${ctxStatic}/utils/easy-canvas.js"></script>
+<script type="text/javascript" src="${ctxStatic}/utils/image-loader.js"></script>
+
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/mark-control.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/task-control.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/answer-view.js"></script>
@@ -31,7 +34,6 @@
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/warning-info.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/thumbnail.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/single-image-view.js"></script>
-<script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/simple-image-view.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/change-name.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/tag-process.js"></script>
 <script type="text/javascript" src="${ctxStatic}/mark-new/js/modules/view-sidebar.js"></script>

stmms-web/src/main/webapp/static/mark-new/js/modules/single-image-view-refactor.js

@@ -0,0 +1,132 @@
+//简单多张图片排列显示模块
+var single_image_view = function(option, success) {
+    var object = new SingleImageView(option);
+    success();
+    return object;
+}
+
+function SingleImageView(option) {
+    this.markControl = option.markControl;
+    this.init();
+    this.markControl.on('center.width.change', this, function(event, context, eventObject) {
+        this.reloadImage();
+        this.markControl.trigger('image.reload.event');
+    });
+    this.markControl.on('step.board.show', this, function(event, context, eventObject) {
+        this.container.removeClass('span12');
+        this.container.addClass('span10');
+        this.reloadImage();
+        this.markControl.trigger('image.reload.event');
+    });
+    this.markControl.on('step.board.hide', this, function(event, context, eventObject) {
+        this.container.removeClass('span10');
+        this.container.addClass('span12');
+        this.reloadImage();
+        this.markControl.trigger('image.reload.event');
+    });
+    this.markControl.on('task.get.before', this, function(event, context, eventObject) {
+        this.task = undefined;
+        this.image = undefined;
+        this.render();
+    });
+    this.markControl.on('task.get.success', this, function(event, context, eventObject) {
+        this.task = context.task;
+        this.image = undefined;
+        this.render();
+    });
+    this.markControl.on('task.get.none', this, function(event, context, eventObject) {
+        this.task = undefined;
+        this.image = undefined;
+        this.render();
+    });
+    this.markControl.on('mark.tag.show', this, function(event, context, tag){
+        if(this.task != undefined && tag != undefined){
+        	this.drawTag(tag);
+        }
+    });
+    this.markControl.on('mark.tag.clear', this, function(event, context, track){
+        this.reloadImage();
+        this.markControl.trigger('image.reload.event');
+    });
+    this.markControl.on('image.position.change', this, function(event, context, topPercent) {
+        if (this.task != undefined) {
+            this.updateScrollTop(topPercent);
+        }
+    });
+}
+
+SingleImageView.prototype.init = function() {
+    var self = this;
+    this.container = this.markControl.container.imageContent;
+    this.container.height(this.markControl.container.centerContent.height());
+    this.container.css('overflow','scroll');
+    
+    this.canvas = $('<canvas></canvas>').appendTo(this.container)[0]
+    this.ec = new EasyCanvas({
+    	canvas: this.canvas,
+    	onClick: function(offset){
+        	self.markControl.trigger('image.click.event', offset);
+    	}
+    });
+    
+    this.imageControl = getDom(this.image_control_dom, this.markControl).insertBefore(this.markControl.container.assistantButton.parent());
+    this.imageControl.find('.zoom-out-button').click(this, function(event) {
+    	//self.reloadImage(0.2);
+        //self.markControl.trigger('image.reload.event');
+        self.ec.zoom(0.2);
+    });
+    this.imageControl.find('.zoom-in-button').click(this, function(event) {
+    	//self.reloadImage(-0.2);
+        //self.markControl.trigger('image.reload.event');
+        self.ec.zoom(-0.2);
+    });
+    this.imageControl.find('.zoom-fit-button').click(this, function(event) {
+    	//self.reloadImage();
+        //self.markControl.trigger('image.reload.event');
+        self.ec.zoom('default');
+    });
+}
+
+SingleImageView.prototype.render = function() {
+    var self = this;
+    this.ec.reset();
+    if (this.task != undefined && this.task.imageData != undefined) {
+        //设置画布大小及背景颜色
+        this.image = new Image();
+        this.image.src = this.task.imageData;
+        this.image.onload = function(){
+        	self.ec.drawImage(self.image);
+        	self.markControl.trigger('task.load.finish');
+        }
+    }
+}
+
+SingleImageView.prototype.reloadImage = function() {
+    if(this.image != undefined){
+        this.ec.drawImage(this.image);
+    }
+}
+
+SingleImageView.prototype.drawTag = function(tag){
+    if(tag!=undefined && tag.left>0 && tag.top>0 && this.image!=undefined){
+        this.ec.drawText(tag.content, tag.left, tag.top)
+    }
+}
+
+SingleImageView.prototype.updateScrollTop = function(scrollTopPercent) {
+    var height = this.canvas.height;
+    var minHeight = this.container.height();
+    if (scrollTopPercent != undefined && scrollTopPercent >= 0 && scrollTopPercent <= 1 && height > minHeight) {
+        var left = height * (1 - scrollTopPercent);
+        var scrollTop = left > minHeight ? (height - left) : (height - minHeight);
+        this.container.scrollTop(scrollTop);
+    } else {
+        this.container.scrollTop(0);
+    }
+}
+
+SingleImageView.prototype.image_control_dom = '<em>\
+<a href="#" class="btn zoom-out-button">放大</a>\
+<a href="#" class="btn zoom-in-button">缩小</a>\
+<a href="#" class="btn zoom-fit-button">适应</a>\
+</em>';

stmms-web/src/main/webapp/static/utils/easy-canvas.js

@@ -9,28 +9,48 @@ function EasyCanvas(option) {
     this.canvas = option.canvas
     this.context = this.canvas.getContext("2d")
     this.ratio = this.getPixelRatio()
-    this.originSize = {}
 
-    if (option.maxWidth != undefined && option.maxWidth > 0) {
-        this.maxWidth = option.maxWidth
-    } else if (option.maxHeight != undefined && option.maxHeight > 0) {
-        this.maxHeight = option.maxHeight
+    this.originSize = {
+        width: 0,
+        height: 0
+    }
+    this.styleSize = {
+        width: 0,
+        height: 0
+    }
+    this.boxSize = {}
+    this.fontConfig = {
+        name: option.fontName || 'Arial',
+        size: option.fontSize || 60,
+        color: option.fontColor || 'red'
     }
-}
 
-EasyCanvas.prototype.setMaxWidth = function(width) {
-    if (width != undefined) {
-        this.maxWidth = width
-        this.maxHeight = undefined
-        this.onSizeChange()
+    if (option.boxWidth != undefined && boxWidth.boxWidth > 0) {
+        this.boxSize.width = option.boxWidth
+    } else if (option.boxHeight != undefined && option.boxHeight > 0) {
+        this.boxSize.height = option.boxHeight
+    }
+
+    this.onClick = option.onClick || (function() {})
+
+    let self = this
+    this.canvas.onclick = function(event) {
+        if (self.originSize.width > 0 && self.originSize.height > 0) {
+            self.onClick({
+                left: (event.offsetX - this.offsetLeft),
+                top: (event.offsetY - this.offsetTop)
+            })
+        }
     }
 }
 
-EasyCanvas.prototype.setMaxHeight = function(height) {
-    if (height != undefined) {
-        this.maxHeight = height
-        this.maxWidth = undefined
-        this.onSizeChange()
+EasyCanvas.prototype.changeBoxSize = function(width, height) {
+    if (width != undefined) {
+        this.boxSize.width = width
+        this.boxSize.height = undefined
+    } else if (height != undefined) {
+        this.boxSize.height = height
+        this.boxSize.width = undefined
     }
 }
 
@@ -48,80 +68,83 @@ EasyCanvas.prototype.clear = function() {
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.heigth)
 }
 
-EasyCanvas.prototype.resize = function(width, height) {
-    this.originSize = {
-        width: width || 0,
-        height: height || 0
+EasyCanvas.prototype.reset = function(width, height) {
+    this.originSize.width = Math.max((width || 0), 0)
+    this.originSize.height = Math.max((height || 0), 0)
+    this.styleSize.width = this.originSize.width
+    this.styleSize.height = this.originSize.height
+
+    if (this.styleSize.width > 0 && this.styleSize.height > 0) {
+        if (this.boxSize.width != undefined) {
+            this.styleSize.width = Math.min(this.originSize.width, this.boxSize.width)
+            this.styleSize.height = this.styleSize.width * this.originSize.height / this.originSize.width
+        } else if (this.boxSize.height != undefined) {
+            this.styleSize.height = Math.min(this.originSize.height, this.boxSize.height)
+            this.styleSize.width = this.styleSize.height * this.originSize.width / this.originSize.height
+        }
     }
-    this.canvas.width = this.originSize.width * this.ratio
-    this.canvas.height = this.originSize.height * this.ratio
-    this.context.scale(this.ratio, this.ratio)
+
+    this.canvas.width = this.styleSize.width * this.ratio
+    this.canvas.height = this.styleSize.height * this.ratio
+    this.canvas.style.width = this.styleSize.width + 'px'
+    this.canvas.style.height = this.styleSize.height + 'px'
+
     this.clear()
-    this.onSizeChange()
 }
 
-EasyCanvas.prototype.onSizeChange = function() {
-    let width, height
-    if (this.originSize.width == 0 || this.originSize.height == 0) {
-        width = 0
-        height = 0
-    } else if (this.maxWidth != undefined) {
-        width = Math.min(this.originSize.width, this.maxWidth)
-        height = width * this.originSize.heigth / this.originSize.width
-    } else if (this.maxHeigth != undefined) {
-        height = Math.min(this.originSize.height, this.maxHeight)
-        width = width * this.originSize.heigth / this.originSize.width
-    } else {
-        width = this.originSize.width
-        height = this.originSize.height
-    }
-    this.canvas.style.width = width + 'px'
-    this.canvas.style.height = height + 'px'
+EasyCanvas.prototype.drawImage = function(image) {
+    this.drawImages([image], undefined, 1.0)
 }
 
-EasyCanvas.prototype.drawImages = function(images, configs) {
-    let indexSet = {}
-    if (configs == undefined || configs.length == 0) {
+EasyCanvas.prototype.drawImages = function(images, config, scale) {
+    scale = scale || 1.0
+    if (config == undefined || config.length == 0) {
         //不指定拼接配置时，默认按顺序显示所有图片
-        configs = []
+        config = []
         for (let i = 0; i < images.length; i++) {
-            configs.push({
+            config.push({
                 i: i + 1,
                 x: 0,
                 y: 0,
                 w: 0,
                 h: 0
             })
-            indexSet[i] = true
-        }
-    } else {
-        for (let i = 0; i < configs.length; i++) {
-            indexSet[configs[i].i - 1] = true;
         }
     }
     let maxWidth = 0;
     let totalHeight = 0;
-    for (let i = 0; i < configs.length; i++) {
+    for (let i = 0; i < config.length; i++) {
         //计算最大宽度与合计高度
-        if (configs[i].w <= 0) {
-            configs[i].w = images[configs[i].i - 1].width;
+        if (config[i].w <= 0) {
+            config[i].w = images[config[i].i - 1].width;
         }
-        if (configs[i].h <= 0) {
-            configs[i].h = images[configs[i].i - 1].height;
+        if (config[i].h <= 0) {
+            config[i].h = images[config[i].i - 1].height;
         }
-        maxWidth = Math.max(maxWidth, configs[i].w);
-        totalHeight += configs[i].h;
+        maxWidth = Math.max(maxWidth, config[i].w * scale);
+        totalHeight += config[i].h * scale;
     }
     if (maxWidth > 0 && totalHeight > 0) {
         //设置画布大小
-        this.resize(maxWidth, totalHeight)
+        this.reset(maxWidth, totalHeight)
         //绘画到画布
+        scale = scale * this.styleSize.width / this.originSize.width
         let height = 0;
-        for (let i = 0; i < configs.length; i++) {
-            this.context.drawImage(images[configs[i].i - 1], configs[i].x, configs[i].y, configs[i].w, configs[i].h, 0, height, configs[i].w, configs[i].h);
-            height += configs[i].h;
+        for (let i = 0; i < config.length; i++) {
+            this.context.drawImage(images[config[i].i - 1], config[i].x, config[i].y, config[i].w, config[i].h, 0, height, config[i].w * scale * this.ratio, config[i].h * scale * this.ratio);
+            height += (config[i].h * scale * this.ratio);
         }
     } else {
-        this.resize()
+        this.reset()
     }
+}
+
+EasyCanvas.prototype.drawText = function(text, left, top) {
+    this.context.font = this.fontConfig.size * this.ratio + 'px ' + this.fontConfig.name
+    this.context.fillStyle = this.fontConfig.color
+    this.context.fillText(text, left * this.ratio, top * this.ratio)
+}
+
+EasyCanvas.prototype.getImageData = function(format) {
+    return this.canvas.toDataUrl(format ? format : 'image/jpeg')
 }

stmms-web/src/main/webapp/static/utils/image-loader.js

@@ -1,5 +1,5 @@
 /**
- * 针对云阅卷场景多图片并行加载的工具类
+ * 针对云阅卷场景多图片并行加载的工具
  * 1. 支持指定服务器地址
  * 2. 支持按云阅卷图片拼接规则筛选实际需要加载的图片
  * 3. 支持指定是否强制刷新图片