|
@@ -72,6 +72,20 @@ SingleImageView.prototype.init = function() {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ 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');
|
|
|
+ });
|
|
|
+ this.imageControl.find('.zoom-in-button').click(this, function(event) {
|
|
|
+ self.reloadImage(-0.2);
|
|
|
+ self.markControl.trigger('image.reload.event');
|
|
|
+ });
|
|
|
+ this.imageControl.find('.zoom-fit-button').click(this, function(event) {
|
|
|
+ self.reloadImage();
|
|
|
+ self.markControl.trigger('image.reload.event');
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
SingleImageView.prototype.render = function() {
|
|
@@ -81,6 +95,7 @@ SingleImageView.prototype.render = function() {
|
|
|
//设置画布大小及背景颜色
|
|
|
this.image = new Image();
|
|
|
this.image.src = this.task.imageData;
|
|
|
+ this.image.scale = 1.0;
|
|
|
this.image.onload = function(){
|
|
|
self.canvas.width = Math.min(self.container.width(), self.image.width);
|
|
|
self.canvas.height = self.canvas.width * self.image.height / self.image.width;
|
|
@@ -93,17 +108,27 @@ SingleImageView.prototype.render = function() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-SingleImageView.prototype.reloadImage = function() {
|
|
|
+SingleImageView.prototype.reloadImage = function(scale) {
|
|
|
if(this.image != undefined){
|
|
|
- this.canvas.width = Math.min(this.container.width(), this.image.width);
|
|
|
+ if(scale != undefined){
|
|
|
+ this.image.scale = this.image.scale + scale;
|
|
|
+ if(this.image.scale < 0.2){
|
|
|
+ this.image.scale = 0.2;
|
|
|
+ }else if(this.image.scale > 3){
|
|
|
+ this.image.scale = 3;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.image.scale = 1.0;
|
|
|
+ }
|
|
|
+ this.canvas.width = Math.min(this.container.width(), this.image.width) * this.image.scale;
|
|
|
this.canvas.height = this.canvas.width * this.image.height / this.image.width;
|
|
|
this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.canvas.width, this.canvas.height);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
SingleImageView.prototype.drawTag = function(tag){
|
|
|
- if(tag!=undefined && tag.positionX>0 && tag.positionY>0){
|
|
|
- this.ctx.font ="60px Arial";
|
|
|
+ if(tag!=undefined && tag.positionX>0 && tag.positionY>0 && this.image!=undefined){
|
|
|
+ this.ctx.font = parseInt(60 * this.image.scale) + "px Arial";
|
|
|
this.ctx.fillStyle = 'red';
|
|
|
this.ctx.fillText(tag.content, tag.positionX*this.canvas.width, tag.positionY*this.canvas.height);
|
|
|
}
|
|
@@ -119,4 +144,10 @@ SingleImageView.prototype.updateScrollTop = function(scrollTopPercent) {
|
|
|
} 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>';
|