|
@@ -1,5 +1,5 @@
|
|
|
//简单多张图片排列显示模块
|
|
|
-var single_image_view = function(option, success) {
|
|
|
+var single_image_view = function (option, success) {
|
|
|
var object = new SingleImageView(option);
|
|
|
success();
|
|
|
return object;
|
|
@@ -8,52 +8,52 @@ var single_image_view = function(option, success) {
|
|
|
function SingleImageView(option) {
|
|
|
this.markControl = option.markControl;
|
|
|
this.init();
|
|
|
- this.markControl.on('center.width.change', this, function(event, context, eventObject) {
|
|
|
+ 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.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.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.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.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.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) {
|
|
|
+ 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.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) {
|
|
|
+ this.markControl.on('image.position.change', this, function (event, context, topPercent) {
|
|
|
if (this.task != undefined) {
|
|
|
this.updateScrollTop(topPercent);
|
|
|
}
|
|
|
});
|
|
|
- this.markControl.on('mark.setting.init', this, function(event, context, setting) {
|
|
|
+ this.markControl.on('mark.setting.init', this, function (event, context, setting) {
|
|
|
var scale = setting['image.view.scale'];
|
|
|
if (scale != undefined) {
|
|
|
this.scale = Number(scale);
|
|
@@ -61,7 +61,7 @@ function SingleImageView(option) {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-SingleImageView.prototype.init = function() {
|
|
|
+SingleImageView.prototype.init = function () {
|
|
|
var self = this;
|
|
|
this.container = this.markControl.container.imageContent;
|
|
|
this.container.height(this.markControl.container.centerContent.height());
|
|
@@ -72,38 +72,55 @@ SingleImageView.prototype.init = function() {
|
|
|
this.ctx.fillStyle = "#FFFFFF";
|
|
|
this.scale = 1.0;
|
|
|
|
|
|
- $(this.canvas).click(function(event) {
|
|
|
+ $(this.canvas).click(function (event) {
|
|
|
if (self.task != undefined) {
|
|
|
+ let left = event.pageX - $(self.canvas).offset().left
|
|
|
+ let top = event.pageY - $(self.canvas).offset().top
|
|
|
+ let offsetX = left
|
|
|
+ let offsetY = top
|
|
|
+ let offsetIndex = 1
|
|
|
+ for (let i = 0; i < self.task.imageLayout.length; i++) {
|
|
|
+ let layout = self.task.imageLayout[i]
|
|
|
+ if (top > layout.top && top <= layout.bottom) {
|
|
|
+ offsetIndex = layout.config.i
|
|
|
+ offsetX = left / layout.ratio + layout.config.x
|
|
|
+ offsetY = (top - layout.top) / layout.ratio + layout.config.y
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
self.markControl.trigger('image.click.event', {
|
|
|
- positionX: ((event.pageX - $(self.canvas).offset().left) / $(self.canvas).width()).toFixed(3),
|
|
|
- positionY: ((event.pageY - $(self.canvas).offset().top) / $(self.canvas).height()).toFixed(3)
|
|
|
+ positionX: (left / $(self.canvas).width()).toFixed(3),
|
|
|
+ positionY: (top / $(self.canvas).height()).toFixed(3),
|
|
|
+ offsetIndex: offsetIndex,
|
|
|
+ offsetX: offsetX,
|
|
|
+ offsetY: offsetY
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
this.imageControl = getDom(this.image_control_dom, this.markControl).insertBefore(this.markControl.container.assistantButton.parent());
|
|
|
- this.imageControl.find('.zoom-in-button').click(this, function(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-out-button').click(this, function(event) {
|
|
|
+ this.imageControl.find('.zoom-out-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) {
|
|
|
+ this.imageControl.find('.zoom-fit-button').click(this, function (event) {
|
|
|
self.reloadImage('fit');
|
|
|
self.markControl.trigger('image.reload.event');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-SingleImageView.prototype.render = function() {
|
|
|
+SingleImageView.prototype.render = function () {
|
|
|
var self = this;
|
|
|
$(this.canvas).hide();
|
|
|
if (this.task != undefined && this.task.imageData != undefined) {
|
|
|
//设置画布大小及背景颜色
|
|
|
this.image = new Image();
|
|
|
this.image.src = this.task.imageData;
|
|
|
- this.image.onload = function() {
|
|
|
+ this.image.onload = function () {
|
|
|
self.reloadImage();
|
|
|
$(self.canvas).show();
|
|
|
|
|
@@ -112,14 +129,14 @@ SingleImageView.prototype.render = function() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-SingleImageView.prototype.reloadImage = function(scaleAddon) {
|
|
|
+SingleImageView.prototype.reloadImage = function (scaleAddon) {
|
|
|
if (this.image != undefined) {
|
|
|
var scale = this.scale;
|
|
|
if (scaleAddon != undefined) {
|
|
|
- if (scaleAddon=='fit') {
|
|
|
- scale = 1.0;
|
|
|
- } else {
|
|
|
- scale += scaleAddon;
|
|
|
+ if (scaleAddon == 'fit') {
|
|
|
+ scale = 1.0;
|
|
|
+ } else {
|
|
|
+ scale += scaleAddon;
|
|
|
}
|
|
|
}
|
|
|
if (scale < 0.2) {
|
|
@@ -140,7 +157,7 @@ SingleImageView.prototype.reloadImage = function(scaleAddon) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-SingleImageView.prototype.drawTag = function(tag) {
|
|
|
+SingleImageView.prototype.drawTag = function (tag) {
|
|
|
if (tag != undefined && tag.positionX > 0 && tag.positionY > 0 && this.image != undefined) {
|
|
|
this.ctx.font = parseInt(60 * this.scale) + "px Arial";
|
|
|
this.ctx.fillStyle = 'red';
|
|
@@ -148,7 +165,7 @@ SingleImageView.prototype.drawTag = function(tag) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-SingleImageView.prototype.updateScrollTop = function(scrollTopPercent) {
|
|
|
+SingleImageView.prototype.updateScrollTop = function (scrollTopPercent) {
|
|
|
var height = this.canvas.height;
|
|
|
var minHeight = this.container.height();
|
|
|
if (scrollTopPercent != undefined && scrollTopPercent >= 0 && scrollTopPercent <= 1 && height > minHeight) {
|