From 7043c950d853d5e383173e93fe3dadb917c06bfc Mon Sep 17 00:00:00 2001 From: oc Date: Sun, 26 Aug 2018 02:28:06 +0800 Subject: [PATCH] Draw Thumbnail & View maps --- libs/actions.js | 75 ++++++++++++++++++-------- libs/core.js | 10 ++-- libs/maps.js | 14 +++-- libs/ui.js | 138 ++++++++++++++++++++++++++++++++++-------------- libs/utils.js | 2 +- 5 files changed, 164 insertions(+), 75 deletions(-) diff --git a/libs/actions.js b/libs/actions.js index 2ae074d3..1003c29c 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -351,7 +351,7 @@ actions.prototype.keyUp = function(keyCode, fromReplay) { case 33: case 34: // PAGEUP/PAGEDOWN if (core.status.heroStop) { if (core.flags.enableViewMaps) { - core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId)); + core.ui.drawMaps(); } else { core.drawTip("本塔不允许浏览地图！"); @@ -968,23 +968,47 @@ actions.prototype.keyUpFly = function (keycode) { ////// 查看地图界面时的点击操作 ////// actions.prototype.clickViewMaps = function (x,y) { + if (!core.isset(core.status.event.data)) { + core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId)); + return; + } + var now = core.floorIds.indexOf(core.status.floorId); - var nextId = core.status.event.data; - if(y<=4) { - nextId++; - while (nextId=2 && x<=10 && y<=1) { + core.ui.drawMaps(index, cx, cy-1); + return; } - else if (y>=8) { - nextId--; - while (nextId>=0 && nextId!=now && core.floors[core.floorIds[nextId]].cannotViewMap) - nextId--; - if (nextId>=0) - core.ui.drawMaps(nextId); + if (x>=2 && x<=10 && y>=11) { + core.ui.drawMaps(index, cx, cy+1); + return; } - else { + if (x<=1 && y>=2 && y<=10) { + core.ui.drawMaps(index, cx-1, cy); + return; + } + if (x>=11 && y>=2 && y<=10) { + core.ui.drawMaps(index, cx+1, cy); + return; + } + + if(x>=2 && x<=10 && y<=4) { + index++; + while (index=2 && x<=10 && y>=8) { + index--; + while (index>=0 && index!=now && core.floors[core.floorIds[index]].cannotViewMap) + index--; + if (index>=0) + core.ui.drawMaps(index); + } + else if (x>=2 && x<=10 && y>=5 && y<=7) { core.clearMap('data'); core.setOpacity('data', 1); core.ui.closePanel(); @@ -993,17 +1017,23 @@ actions.prototype.clickViewMaps = function (x,y) { ////// 查看地图界面时，按下某个键的操作 ////// actions.prototype.keyDownViewMaps = function (keycode) { - if (keycode==37 || keycode==38 || keycode==33) { - this.clickViewMaps(6,2); - } - else if (keycode==39 || keycode==40 || keycode==34) { - this.clickViewMaps(6,10); - } + if (!core.isset(core.status.event.data)) return; + if (keycode==38||keycode==33) this.clickViewMaps(6, 3); + if (keycode==40||keycode==34) this.clickViewMaps(6, 9); + if (keycode==87) this.clickViewMaps(6,0); + if (keycode==65) this.clickViewMaps(0,6); + if (keycode==83) this.clickViewMaps(6,12); + if (keycode==68) this.clickViewMaps(12,6); return; } ////// 查看地图界面时，放开某个键的操作 ////// actions.prototype.keyUpViewMaps = function (keycode) { + if (!core.isset(core.status.event.data)) { + core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId)); + return; + } + if (keycode==27 || keycode==13 || keycode==32 || keycode==67) { core.clearMap('data'); core.setOpacity('data', 1); @@ -1585,9 +1615,12 @@ actions.prototype.clickSettings = function (x,y) { core.drawTip("本塔不允许浏览地图！"); } else { + /* core.drawText("\t[系统提示]即将进入浏览地图模式。\n\n点击地图上半部分，或按[↑]键可查看前一张地图\n点击地图下半部分，或按[↓]键可查看后一张地图\n点击地图中间，或按[ESC]键可离开浏览地图模式\n此模式下可以打开怪物手册以查看某层楼的怪物属性", function () { core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId)); }) + */ + core.ui.drawMaps(); } break; case 3: diff --git a/libs/core.js b/libs/core.js index 93f24225..bdb734b8 100644 --- a/libs/core.js +++ b/libs/core.js @@ -2,11 +2,6 @@ * 初始化 start */ -// 额外功能 -Number.prototype.clamp = function(min, max) { - return Math.min(Math.max(this, min), max); -}; - function core() { this.material = { 'animates': {}, @@ -81,7 +76,8 @@ function core() { offsetX: 0, // in pixel offsetY: 0, width: 13, // map width and height - height: 13 + height: 13, + tempCanvas: null, // A temp canvas for drawing } this.initStatus = { 'played': false, @@ -275,6 +271,8 @@ core.prototype.init = function (coreData, callback) { core.material.ground = new Image(); core.material.ground.src = "project/images/ground.png"; + core.bigmap.tempCanvas = document.createElement('canvas').getContext('2d'); + core.loader.load(function () { console.log(core.material); // 设置勇士高度 diff --git a/libs/maps.js b/libs/maps.js index f1423463..3368d423 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -354,10 +354,8 @@ maps.prototype.drawMap = function (mapName, callback) { } } images.forEach(function (t) { - var size=416, ratio=1; var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2]; if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.images[p])) { - dx*=32; dy*=32; var image = core.material.images.images[p]; if (!t[3]) { if (/.*\.gif/i.test(p) && main.mode=='play') { @@ -365,23 +363,23 @@ maps.prototype.drawMap = function (mapName, callback) { var gif = new Image(); gif.src = core.material.images.images[p].src; gif.style.position = 'absolute'; - gif.style.left = (dx*core.domStyle.scale)+"px"; - gif.style.top = (dy*core.domStyle.scale)+"px"; + gif.style.left = (32*dx*core.domStyle.scale)+"px"; + gif.style.top = (32*dy*core.domStyle.scale)+"px"; gif.style.width = core.material.images.images[p].width*core.domStyle.scale+"px"; gif.style.height = core.material.images.images[p].height*core.domStyle.scale+"px"; core.dom.gif.appendChild(gif); } else { - core.canvas.bg.drawImage(image, dx * ratio, dy * ratio, Math.min(size - dx * ratio, ratio * image.width), Math.min(size - dy * ratio, ratio * image.height)); + core.canvas.bg.drawImage(image, 32*dx, 32*dy, image.width, image.height); } } else if (t[3]==1) - core.canvas.event2.drawImage(image, dx*ratio, dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height)); + core.canvas.event2.drawImage(image, 32*dx, 32*dy, image.width, image.height); else if (t[3]==2) { core.canvas.event2.drawImage(image, 0, 0, image.width, image.height-32, - dx * ratio, dy * ratio, ratio * image.width, ratio * (image.height-32)); + 32*dx, 32*dy, image.width, image.height-32); core.canvas.bg.drawImage(image, 0, image.height-32, image.width, 32, - dx * ratio, (dy + image.height - 32) * ratio, ratio*image.width, 32*ratio); + 32*dx, 32*dy + image.height - 32, image.width, 32); } } }) diff --git a/libs/ui.js b/libs/ui.js index 0a4fd41d..b3fc3c82 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -1476,30 +1476,81 @@ ui.prototype.drawFly = function(page) { } ////// 绘制浏览地图界面 ////// -ui.prototype.drawMaps = function (index) { - if (!core.isset(index)) index=core.floorIds.indexOf(core.status.floorId); +ui.prototype.drawMaps = function (index, x, y) { + core.lockControl(); + core.status.event.id = 'viewMaps'; + + if (!core.isset(index)) { + core.status.event.data = null; + core.clearMap('ui'); + core.setAlpha('ui', 1); + + core.clearMap('animate'); + core.setOpacity('animate', 0.4); + core.fillRect('animate', 0, 0, 416, 416, '#000000'); + + core.strokeRect('ui', 66, 2, 284, 60, "#FFD700", 4); + core.strokeRect('ui', 2, 66, 60, 284); + core.strokeRect('ui', 66, 416-62, 284, 60); + core.strokeRect('ui', 416-62, 66, 60, 284); + core.strokeRect('ui', 66, 66, 284, 92); + core.strokeRect('ui', 66, 32*8+2, 284, 92); + core.canvas.ui.textAlign = 'center'; + core.fillText('ui', "上移地图 [W]", 208, 38, '#FFD700', '20px Arial'); + core.fillText('ui', "下移地图 [S]", 208, 390); + + var top = 150; + core.fillText('ui', "左", 32, top); + core.fillText('ui', "移", 32, top+32); + core.fillText('ui', "地", 32, top+32*2); + core.fillText('ui', "图", 32, top+32*3); + core.fillText('ui', "[A]", 32, top+32*4); + core.fillText('ui', "右", 384, top); + core.fillText('ui', "移", 384, top+32); + core.fillText('ui', "地", 384, top+32*2); + core.fillText('ui', "图", 384, top+32*3); + core.fillText('ui', "[D]", 384, top+32*4); + + core.fillText('ui', "前张地图 [▲ / PGUP]", 208, 64+54); + core.fillText('ui', "后张地图 [▼ / PGDN]", 208, 32*8+54); + + core.fillText('ui', "退出 [ESC / ENTER]", 208, 208+8); + core.fillText('ui', "[X] 可查看怪物手册", 285, 208+40, null, '13px Arial'); + return; + } + + core.clearMap('animate'); + core.setOpacity('animate', 1); + + if (core.isset(index.index)) { + x=index.x; + y=index.y; + index=index.index; + } if (index<0) index=0; if (index>=core.floorIds.length) index=core.floorIds.length-1; + var floorId = core.floorIds[index], mw = core.floors[floorId].width||13, mh = core.floors[floorId].height||13; + if (!core.isset(x)) x = parseInt(mw/2); + if (!core.isset(y)) y = parseInt(mh/2); + if (x<6) x=6; + if (x>mw-7) x=mw-7; + if (y<6) y=6; + if (y>mh-7) y=mh-7; - core.lockControl(); - core.status.event.id = 'viewMaps'; - core.status.event.data = index; - - var floorId = core.floorIds[index]; + core.status.event.data = {"index": index, "x": x, "y": y}; clearTimeout(core.interval.tipAnimate); - core.clearMap('ui'); core.setAlpha('ui', 1); - this.drawThumbnail(floorId, 'ui', core.status.maps[floorId].blocks, 0, 0, 416); + this.drawThumbnail(floorId, 'ui', core.status.maps[floorId].blocks, 0, 0, 416, x, y); core.clearMap('data'); core.setOpacity('data', 0.2); core.canvas.data.textAlign = 'left'; core.setFont('data', '16px Arial'); - var text = core.floors[floorId].title; + var text = core.floors[floorId].title + " ["+(x-6)+","+(y-6)+"]"; var textX = 16, textY = 18, width = textX + core.canvas.data.measureText(text).width + 16, height = 42; core.fillRect('data', 5, 5, width, height, '#000'); core.setOpacity('data', 0.5); @@ -1679,7 +1730,7 @@ ui.prototype.drawSLPanel = function(index) { core.fillText('ui', i==0?"自动存档":name+id, (2*i+1)*u, 35, '#FFFFFF', "bold 17px Verdana"); core.strokeRect('ui', (2*i+1)*u-size/2, 50, size, size, i==offset?strokeColor:'#FFFFFF', i==offset?6:2); if (core.isset(data) && core.isset(data.floorId)) { - this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i+1)*u-size/2, 50, size, data.hero.loc, data.hero.flags.heroIcon||"hero.png"); + this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i+1)*u-size/2, 50, size, data.hero.loc.x, data.hero.loc.y, data.hero.loc, data.hero.flags.heroIcon||"hero.png"); core.fillText('ui', core.formatDate(new Date(data.time)), (2*i+1)*u, 65+size, '#FFFFFF', '10px Verdana'); } else { @@ -1691,7 +1742,7 @@ ui.prototype.drawSLPanel = function(index) { core.fillText('ui', name+id, (2*i-5)*u, 230, '#FFFFFF', "bold 17px Verdana"); core.strokeRect('ui', (2*i-5)*u-size/2, 245, size, size, i==offset?strokeColor:'#FFFFFF', i==offset?6:2); if (core.isset(data) && core.isset(data.floorId)) { - this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i-5)*u-size/2, 245, size, data.hero.loc, data.hero.flags.heroIcon||"hero.png"); + this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i-5)*u-size/2, 245, size, data.hero.loc.x, data.hero.loc.y, data.hero.loc, data.hero.flags.heroIcon||"hero.png"); core.fillText('ui', core.formatDate(new Date(data.time)), (2*i-5)*u, 260+size, '#FFFFFF', '10px Verdana'); } else { @@ -1709,20 +1760,27 @@ ui.prototype.drawSLPanel = function(index) { } ////// 绘制一个缩略图 ////// -ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroLoc, heroIcon) { - core.clearMap(canvas, x, y, size, size); +ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, centerX, centerY, heroLoc, heroIcon) { + + var mw = core.floors[floorId].width || 13; + var mh = core.floors[floorId].height || 13; + // 绘制到tempCanvas上面 + var tempCanvas = core.bigmap.tempCanvas; + var tempWidth = mw*32, tempHeight = mh*32; + tempCanvas.canvas.width = tempWidth; + tempCanvas.canvas.height = tempHeight; + tempCanvas.clearRect(0, 0, tempWidth, tempHeight); + var groundId = core.floors[floorId].defaultGround || "ground"; var blockIcon = core.material.icons.terrains[groundId]; var blockImage = core.material.images.terrains; - var persize = size/13; - var mw = core.floors[floorId].width || 13; - var mh = core.floors[floorId].height || 13; - for (var i=0;i<13;i++) { - for (var j=0;j<13;j++) { - core.canvas[canvas].drawImage(blockImage, 0, blockIcon * 32, 32, 32, x + i * persize, y + j * persize, persize, persize); + // background + for (var i=0;i