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

//查看原始题卡模块
var sheet_view = function(option, success) {
    var object = new SheetView(option);
    success();
    return object;
}

function SheetView(option) {
    this.markControl = option.markControl;
    this.server = option.server;
    if (option.sheetConfig) {
        this.sheetConfig = JSON.parse(option.sheetConfig);
    } else {
        this.sheetConfig = [];
    }
    this.init();
    this.markControl.on('task.get.success', this, function(event, context, eventObject) {
        this.render(context.task.sheetUrls);
    });
    this.markControl.on('task.get.none', this, function(event, context, eventObject) {
        this.render();
    });
    this.markControl.on('task.get.before', this, function(event, context, eventObject) {
        this.render();
    });
    this.markControl.on('view.sidebar.open', this, function(event, context, eventObject) {
        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);
        }
    });
}

SheetView.prototype.init = function() {
    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() {
        self.toggle(false);
    });

    this.control = getDom(this.control_dom, this.markControl).appendTo(this.markControl.container.assistant);
    this.control.find('#show-sheet-button').click(function() {
        self.markControl.container.assistant.hide();
        self.toggle(true);
    });
    this.control.find('#hide-sheet-button').click(function() {
        self.markControl.container.assistant.hide();
        self.toggle(false);
    });
    self.toggle(false);
}

SheetView.prototype.render = function(urls) {
    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'));
        }
        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;
    image.canvas = document.getElementById('sheet-canvas');
    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");
    }
}

SheetView.prototype.toggle = function(show) {
    if (show == true) {
        this.show = true;
        this.container.show();
    } else {
        this.show = false;
        this.container.hide();
    }
}

SheetView.prototype.control_dom = '<h3 class="popover-title">查看原卷</h3>\
<div class="popover-content"><p id="sheet-list" class="popover-list">\
<a href="#" id="show-sheet-button">打开</a><a href="#" id="hide-sheet-button">关闭</a>\
</p></div>';

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>';

SheetView.prototype.container_content_dom = '<div class="popover-cont"></div>';