<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阅卷平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery-ui.min.js "></script>
    <script type="text/javascript" src="${ctxStatic}/utils/image-utils.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
    var imageServer = '${fileServer}';
    var urls = '${urls}'.split(',');
    var tags = JSON.parse('${tags}');
    var ctx;
    $(document).ready(function () {
    	var canvas = $('#canvas')[0];
        ctx = canvas.getContext('2d');
    	new ImageLoader({
            server: imageServer,
            flush: true,
            strict: false,
            split: [0,1]
        }).combine(urls, canvas, [], function (layout) {
            //阅卷轨迹
            if (tags != undefined && tags.length > 0) {
                ctx.font = "30px Arial";
                ctx.fillStyle = 'red';
                for (var j = 0; j < tags.length; j++) {
                	var tag = tags[j];
                    ctx.fillText(
                        		tag.content,
                        		tag.offsetX,
                        		tag.offsetY+layout[tag.offsetIndex-1].top);
                }
            }
        })
/*         var images = [];
        var count = 0;
        for (var i = 0; i < urls.length; i++) {
            var image = new Image();
            images.push(image);
            image.src = imageServer + urls[i];
            image.onload = function () {
                this.loaded = true;
                count++;

                if (count == urls.length) {
                    render(images);
                }
            }
        } */
    });
    /*
    function render(images) {
        var maxWidth = 0;
        var totalHeight = 0;
        for (var i = 0; i < images.length; i++) {
            images[i].left = 0;
            images[i].top = totalHeight;
            maxWidth = Math.max(maxWidth, images[i].width);
            totalHeight += images[i].height;
        }

        var canvas = $('#canvas')[0];
        canvas.width = maxWidth;
        canvas.height = totalHeight;
        ctx = canvas.getContext('2d');
        for (var i = 0; i < images.length; i++) {
            ctx.drawImage(images[i], 0, 0, images[i].width, images[i].height, images[i].left, images[i].top, images[i].width, images[i].height);
        }

        for (var i = 0; i < tags.length; i++) {
            renderTags(tags[i], images)
        }
    }
    function renderTags(group, images) {
        var configs = group.config;
        var tags = group.tags;
        if (tags.length == 0) {
            return;
        }

        var maxWidth = 0;
        var totalHeight = 0;
        // 计算评卷分组拼接图的总高度与最大宽度
        for (var i = 0; i < configs.length; i++) {
            var config = configs[i];
            //直接使用整张裁切图
                var image = images[config.i - 1];
                if (image != undefined) {
                    config.w = image.width;
                    config.h = image.height;
                }
        }

        // 遍历所有显示元素
        for (var i = 0; i < tags.length; i++) {
            var tag = tags[i];
            // 计算显示元素在拼接图内的绝对位置
            var left = tag.offsetX;
            var top = tag.offsetY;
            var start = 0;
            for (var j = 0; j < configs.length; j++) {
                var config = configs[j];
                if (config.w > 0 && config.h > 0) {
                    var image = images[config.i - 1];
                    if (top <= (config.h + start) && image != undefined) {
                        // 根据绝对高度判断显示元素是否落在当前拼接块
                        ctx.font = "60px Arial";
                        ctx.fillStyle = 'red';
                        ctx.fillText(tag.content, Math.max(60, left + config.x + image.left), Math.max(60, top - start + config.y + image.top));
                        break;
                    } else {
                        start += config.h;
                    }
                }
            }
        }
    }
    
   function renderGroup(group, images) {
        var configs = group.config;
        var tags = group.tags;
        if (configs.length == 0 || tags.length == 0) {
            return;
        }

        var maxWidth = 0;
        var totalHeight = 0;
        // 计算评卷分组拼接图的总高度与最大宽度
        for (var i = 0; i < configs.length; i++) {
            var config = configs[i];
            if (config.w == 0 || config.h == 0) {
                // 兼容老数据，宽高未设置时，表示直接使用整张裁切图
                var image = images[config.i - 1];
                if (image != undefined) {
                    config.w = image.width;
                    config.h = image.height;
                }
            }
            if (config.w > 0 && config.h > 0) {
                maxWidth = Math.max(maxWidth, config.w);
                totalHeight += config.h;
            }
        }

        // 遍历所有显示元素
        for (var i = 0; i < tags.length; i++) {
            var tag = tags[i];
            // 计算显示元素在拼接图内的绝对位置
            var left = maxWidth * tag.positionX;
            var top = totalHeight * tag.positionY;
            var start = 0;
            for (var j = 0; j < configs.length; j++) {
                var config = configs[j];
                if (config.w > 0 && config.h > 0) {
                    var image = images[config.i - 1];
                    if (top <= (config.h + start) && image != undefined) {
                        // 根据绝对高度判断显示元素是否落在当前拼接块
                        ctx.font = "60px Arial";
                        ctx.fillStyle = 'red';
                        ctx.fillText(tag.content, Math.max(60, left + config.x + image.left), Math.max(60, top - start + config.y + image.top));
                        break;
                    } else {
                        start += config.h;
                    }
                }
            }
        }
    } */
</script>
</html>