|
@@ -54,10 +54,54 @@
|
|
|
}
|
|
|
|
|
|
for (var i = 0; i < tags.length; i++) {
|
|
|
- renderGroup(tags[i], images)
|
|
|
+ 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;
|