From ce81f3480a220257d832aeb93020c8f996ccca93 Mon Sep 17 00:00:00 2001 From: oc Date: Thu, 20 Dec 2018 00:22:04 +0800 Subject: [PATCH] forward calWidth & drawImage --- _server/editor.js | 2 +- docs/api.md | 19 +++- libs/actions.js | 2 +- libs/control.js | 10 +- libs/core.js | 15 +++ libs/events.js | 6 +- libs/maps.js | 40 ++++---- libs/ui.js | 224 +++++++++++++++++++++++++------------------ libs/utils.js | 2 +- project/functions.js | 2 +- 10 files changed, 196 insertions(+), 126 deletions(-) diff --git a/_server/editor.js b/_server/editor.js index 77b802e1..119a67de 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -324,7 +324,7 @@ editor.prototype.updateMap = function () { ctx.lineWidth = OFFSET; ctx.strokeRect(x * 32 + OFFSET, y * 32 + OFFSET, 32 - OFFSET * 2, 32 - OFFSET * 2); ctx.font = "30px Verdana"; - ctx.textAlign = 'center' + ctx.textAlign = 'center'; ctx.fillStyle = 'red'; ctx.fillText("?", x * 32 + 16, y * 32 + 27); return; diff --git a/docs/api.md b/docs/api.md index d9b387dc..a43454ba 100644 --- a/docs/api.md +++ b/docs/api.md @@ -516,10 +516,27 @@ core.ui.setAlpha(name, font) / core.ui.setOpacity(name, font) 尽量不要对系统画布使用setOpacity（因为会对已经绘制的内容产生影响），自定义创建的画布则不受此限制。 -core.ui.setFillStyle(name, style) / core.ui.setStrokeStype(name, style) +core.ui.setFillStyle(name, style) / core.ui.setStrokeStyle(name, style) 设置一个画布的填充样式/描边样式。 +core.ui.setTextAlign(name, align) +设置一个画布的文字对齐模式。 + + +core.ui.calWidth(name, text, font) +计算一段文字在画布上的绘制宽度 +font可选，如果存在则会先设置该画布上的字体。 + + +core.ui.drawImage(name, image, x, y, w, h, x1, y1, w1, h1) +在一个画布上绘制图片。 +name为画布名，可以是系统画布之一，也可以是任意自定义动态创建的画布名。 +image为要绘制的图片，可以是一个全塔属性中定义的图片名（会从images中去获取），图片本身，或者一个画布。 +后面的8个坐标参数与canvas的drawImage的八个参数完全相同。 +请查看 http://www.w3school.com.cn/html5/canvas_drawimage.asp 了解更多。 + + core.ui.createCanvas(name, x, y, width, height, zIndex) 动态创建一个画布。name为要创建的画布名，如果已存在则会直接取用当前存在的。 x,y为创建的画布相对窗口左上角的像素坐标，width,height为创建的长宽。 diff --git a/libs/actions.js b/libs/actions.js index ab8abb3a..3f6af8fb 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -2686,7 +2686,7 @@ actions.prototype.loadPaint = function () { var value = core.paint[core.status.floorId]; if (core.isset(value)) value = LZString.decompress(value).split(","); core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height); - core.canvas.paint.drawImage(core.bigmap.tempCanvas.canvas, 0, 0); + core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0); core.drawTip("读取绘图文件成功"); }) diff --git a/libs/control.js b/libs/control.js index bb458a01..3faf777d 100644 --- a/libs/control.js +++ b/libs/control.js @@ -84,7 +84,7 @@ control.prototype.setRequestAnimationFrame = function () { cv.clearRect(block.x * 32, block.y * 32, 32, 32); if (core.isset(block.name)) { if (block.name == 'bg') { - core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); + core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); } core.drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, core.status.autotileAnimateObjs.status); } @@ -963,7 +963,7 @@ control.prototype.jumpHero = function (ex, ey, time, callback) { core.bigmap.offsetX = core.clamp(nowx - 32*6, 0, 32*core.bigmap.width-416); core.bigmap.offsetY = core.clamp(nowy - 32*6, 0, 32*core.bigmap.height-416); core.control.updateViewport(); - core.canvas.hero.drawImage(core.material.images.hero, heroIcon[status] * 32, heroIcon.loc * height, 32, height, + core.drawImage('hero', core.material.images.hero, heroIcon[status] * 32, heroIcon.loc * height, 32, height, nowx - core.bigmap.offsetX, nowy + 32-height - core.bigmap.offsetY, 32, height); } else { @@ -1055,7 +1055,7 @@ control.prototype.drawHero = function (direction, x, y, status, offset) { core.clearAutomaticRouteNode(x+dx, y+dy); - core.canvas.hero.clearRect(x * 32 - core.bigmap.offsetX - 32, y * 32 - core.bigmap.offsetY - 32, 96, 96); + core.clearMap('hero', x * 32 - core.bigmap.offsetX - 32, y * 32 - core.bigmap.offsetY - 32, 96, 96); var heroIconArr = core.material.icons.hero; var drawObjs = []; @@ -1074,7 +1074,7 @@ control.prototype.drawHero = function (direction, x, y, status, offset) { if (core.isset(core.status.hero.followers)) { var index=1; core.status.hero.followers.forEach(function (t) { - core.canvas.hero.clearRect(32*t.x-core.bigmap.offsetX-32, 32*t.y-core.bigmap.offsetY-32, 96, 96); + core.clearMap('hero', 32*t.x-core.bigmap.offsetX-32, 32*t.y-core.bigmap.offsetY-32, 96, 96); if (core.isset(core.material.images.images[t.img])) { drawObjs.push({ "img": core.material.images.images[t.img], @@ -1094,7 +1094,7 @@ control.prototype.drawHero = function (direction, x, y, status, offset) { }); drawObjs.forEach(function (block) { - core.canvas.hero.drawImage(block.img, block.heroIcon[block.status]*32, + core.drawImage('hero', block.img, block.heroIcon[block.status]*32, block.heroIcon.loc * block.height, 32, block.height, block.posx, block.posy+32-block.height, 32, block.height); }); diff --git a/libs/core.js b/libs/core.js index 17a7265e..98037f67 100644 --- a/libs/core.js +++ b/libs/core.js @@ -710,6 +710,21 @@ core.prototype.setStrokeStyle = function (name, style) { core.ui.setStrokeStyle(name, style); } +////// 设置某个canvas的对齐 ////// +core.prototype.setTextAlign = function (name, align) { + core.ui.setTextAlign(name, align); +} + +////// 计算某段文字的宽度 ////// +core.prototype.calWidth = function (name, text, font) { + return core.ui.calWidth(name, text, font); +} + +////// 绘制一张图片 ////// +core.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) { + core.ui.drawImage(name, image, x, y, w, h, x1, y1, w1, h1); +} + ////// canvas创建 ////// core.prototype.createCanvas = function (name, x, y, width, height, z) { return core.ui.createCanvas(name, x, y, width, height, z); diff --git a/libs/events.js b/libs/events.js index 4cb66773..f0aa8603 100644 --- a/libs/events.js +++ b/libs/events.js @@ -1259,7 +1259,7 @@ events.prototype.getItem = function (itemId, itemNum, itemX, itemY, callback) { if (itemNum > 1) text += "x" + itemNum; if (itemCls === 'items') text += core.items.getItemEffectTip(itemId); core.drawTip(text, core.material.icons.items[itemId]); - core.canvas.event.clearRect(itemX * 32, itemY * 32, 32, 32); + core.clearMap('event', itemX * 32, itemY * 32, 32, 32); core.updateStatusBar(); this.eventdata.afterGetItem(itemId, itemX, itemY, callback); @@ -1315,8 +1315,8 @@ events.prototype.openDoor = function (id, x, y, needKey, callback) { core.events.afterOpenDoor(id,x,y,callback); return; } - core.canvas.event.clearRect(32 * x, 32 * y, 32, 32); - core.canvas.event.drawImage(core.material.images.animates, 32 * state, 32 * door, 32, 32, 32 * x, 32 * y, 32, 32); + core.clearMap('event', 32 * x, 32 * y, 32, 32); + core.drawImage('event', core.material.images.animates, 32 * state, 32 * door, 32, 32, 32 * x, 32 * y, 32, 32); }, speed / core.status.replay.speed) } diff --git a/libs/maps.js b/libs/maps.js index 00aaf093..4da72796 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -379,17 +379,17 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) { if (block.name == 'bg') { var groundId = (core.status.maps||core.floors)[core.status.floorId].defaultGround || "ground"; var blockIcon = core.material.icons.terrains[groundId]; - core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); + core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); } core.canvas[block.name].drawImage(image, x * 32, y * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); return; } - core.canvas.event.clearRect(block.x * 32 + dx, block.y * 32 + dy, 32, 32); - core.canvas.event.drawImage(image, x * 32, y * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 32); + core.clearMap('event', block.x * 32 + dx, block.y * 32 + dy, 32, 32); + core.drawImage('event', image, x * 32, y * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 32); if (height>32) { - core.canvas.event2.clearRect(block.x * 32 + dx, block.y * 32 + 32 - height + dy, 32, height-32) - core.canvas.event2.drawImage(image, x * 32, y * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32); + core.clearMap('event2', block.x * 32 + dx, block.y * 32 + 32 - height + dy, 32, height-32) + core.drawImage('event2', image, x * 32, y * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32); } } @@ -485,7 +485,7 @@ maps.prototype.drawMap = function (floorId, callback) { var blockIcon = core.material.icons.terrains[groundId]; for (var x = 0; x < width; x++) { for (var y = 0; y < height; y++) { - core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32); + core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32); } } @@ -507,24 +507,24 @@ maps.prototype.drawMap = function (floorId, callback) { if (/.*\.gif/i.test(p) && main.mode=='play') { core.dom.gif.innerHTML = ""; var gif = new Image(); - gif.src = core.material.images.images[p].src; + gif.src = image.src; gif.style.position = 'absolute'; 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"; + gif.style.width = image.width*core.domStyle.scale+"px"; + gif.style.height = image.height*core.domStyle.scale+"px"; core.dom.gif.appendChild(gif); } else { - core.canvas.bg.drawImage(image, 32*dx, 32*dy, image.width, image.height); + core.drawImage('bg', image, 32*dx, 32*dy, image.width, image.height); } } else if (t[3]==1) - core.canvas.fg.drawImage(image, 32*dx, 32*dy, image.width, image.height); + core.drawImage('fg', image, 32*dx, 32*dy, image.width, image.height); else if (t[3]==2) { - core.canvas.fg.drawImage(image, 0, 0, image.width, image.height-32, + core.drawImage('fg', image, 0, 0, image.width, image.height-32, 32*dx, 32*dy, image.width, image.height-32); - core.canvas.bg.drawImage(image, 0, image.height-32, image.width, 32, + core.drawImage('bg', image, 0, image.height-32, image.width, 32, 32*dx, 32*dy + image.height - 32, image.width, 32); } } @@ -1145,11 +1145,11 @@ maps.prototype.hideBlock = function (x, y, floorId) { // 删除动画，清除地图 if (floorId==core.status.floorId) { core.removeGlobalAnimate(x, y); - core.canvas.event.clearRect(x * 32, y * 32, 32, 32); + core.clearMap('event', x * 32, y * 32, 32, 32); var height = 32; if (core.isset(block.block.event)) height=block.block.event.height||32; if (height>32) - core.canvas.event2.clearRect(x * 32, y * 32 +32-height, 32, height-32); + core.clearMap('event2', x * 32, y * 32 +32-height, 32, height-32); } block.disable = true; @@ -1169,11 +1169,11 @@ maps.prototype.removeBlock = function (x, y, floorId) { // 删除动画，清除地图 if (floorId==core.status.floorId) { core.removeGlobalAnimate(x, y); - core.canvas.event.clearRect(x * 32, y * 32, 32, 32); + core.clearMap('event', x * 32, y * 32, 32, 32); var height = 32; if (core.isset(block.block.event)) height=block.block.event.height||32; if (height>32) - core.canvas.event2.clearRect(x * 32, y * 32 +32-height, 32, height-32); + core.clearMap('event2', x * 32, y * 32 +32-height, 32, height-32); } // 删除Index @@ -1314,7 +1314,7 @@ maps.prototype.drawBoxAnimate = function () { obj.status = ((obj.status||0)+1)%obj.animate; core.clearMap('ui', obj.bgx, obj.bgy, obj.bgWidth, obj.bgHeight); core.fillRect('ui', obj.bgx, obj.bgy, obj.bgWidth, obj.bgHeight, core.material.groundPattern); - core.canvas.ui.drawImage(obj.image, obj.status * 32, obj.pos, + core.drawImage('ui', obj.image, obj.status * 32, obj.pos, 32, obj.height, obj.x, obj.y, 32, obj.height); } } @@ -1333,7 +1333,7 @@ maps.prototype.drawAnimateFrame = function (animate, centerX, centerY, index) { var cx = centerX+t.x, cy=centerY+t.y; if (!t.mirror && !t.angle) { - core.canvas.animate.drawImage(image, cx-realWidth/2 - core.bigmap.offsetX, cy-realHeight/2 - core.bigmap.offsetY, realWidth, realHeight); + core.drawImage('animate', image, cx-realWidth/2 - core.bigmap.offsetX, cy-realHeight/2 - core.bigmap.offsetY, realWidth, realHeight); } else { core.saveCanvas('animate'); @@ -1342,7 +1342,7 @@ maps.prototype.drawAnimateFrame = function (animate, centerX, centerY, index) { core.canvas.animate.rotate(-t.angle*Math.PI/180); if (t.mirror) core.canvas.animate.scale(-1,1); - core.canvas.animate.drawImage(image, -realWidth/2 - core.bigmap.offsetX, -realHeight/2 - core.bigmap.offsetY, realWidth, realHeight); + core.drawImage('animate', image, -realWidth/2 - core.bigmap.offsetX, -realHeight/2 - core.bigmap.offsetY, realWidth, realHeight); core.loadCanvas('animate'); } core.setAlpha('animate', 1); diff --git a/libs/ui.js b/libs/ui.js index d6abdb45..c37c8dad 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -174,6 +174,42 @@ ui.prototype.setStrokeStyle = function (name, style) { if (ctx) ctx.strokeStyle = style; } +////// 设置某个canvas的对齐 ////// +ui.prototype.setTextAlign = function (name, align) { + var ctx = this.getContextByName(name); + if (ctx) ctx.textAlign = align; +} + +////// 计算某段文字的宽度 ////// +ui.prototype.calWidth = function (name, text, font) { + var ctx = this.getContextByName(name); + if (ctx) { + if (core.isset(font)) ctx.font = font; + return ctx.measureText(text).width; + } + return 0; +} + +////// 绘制一张图片 ////// +ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) { + var ctx = this.getContextByName(name); + if (!ctx) return; + if (typeof image == 'string') { + image = core.material.images.images[image]; + if (!core.isset(image)) return; + } + + // 只能接受2, 4, 8个参数 + if (core.isset(x) && core.isset(y) && core.isset(w) && core.isset(h) && core.isset(x1) && core.isset(y1) && core.isset(w1) && core.isset(h1)) { + ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1); + } + else if (core.isset(x) && core.isset(y) && core.isset(w) && core.isset(h)) { + ctx.drawImage(image, x, y, w, h); + } + else if (core.isset(x) && core.isset(y)) { + ctx.drawImage(image, x, y); + } +} ///////////////// UI绘制 @@ -203,17 +239,17 @@ ui.prototype.drawTip = function (text, itemIcon) { var textX, textY, width, height, hide = false, alpha = 0; clearInterval(core.interval.tipAnimate); core.setFont('data', "16px Arial"); - core.canvas.data.textAlign = 'left'; + core.setTextAlign('data', 'left'); if (!core.isset(itemIcon)) { textX = 16; textY = 18; - width = textX + core.canvas.data.measureText(text).width + 16; + width = textX + core.calWidth('data', text) + 16; height = 42; } else { textX = 44; textY = 18; - width = textX + core.canvas.data.measureText(text).width + 8; + width = textX + core.calWidth('data', text) + 8; height = 42; } core.interval.tipAnimate = window.setInterval(function () { @@ -227,7 +263,7 @@ ui.prototype.drawTip = function (text, itemIcon) { core.setAlpha('data', alpha); core.fillRect('data', 5, 5, width, height, '#000'); if (core.isset(itemIcon)) { - core.canvas.data.drawImage(core.material.images.items, 0, itemIcon * 32, 32, 32, 10, 8, 32, 32); + core.drawImage('data', core.material.images.items, 0, itemIcon * 32, 32, 32, 10, 8, 32, 32); } core.fillText('data', text, textX + 5, textY + 15, '#fff'); core.setAlpha('data', 1); @@ -386,7 +422,8 @@ ui.prototype.drawWindowSelector = function(background,x,y,w,h) { // 绘制皮肤 ui.prototype.drawWindowSkin = function(background,canvas,x,y,w,h,direction,px,py) { // 仿RM窗口皮肤 ↓ - var dstImage = core.canvas[canvas]; + var dstImage = core.getContextByName(canvas); + if (!dstImage) return; var dx = 0, dy = 0; // 绘制背景 dstImage.drawImage(background, 0, 0, 128, 128, x+2, y+2, w-4, h-4); @@ -429,7 +466,7 @@ ui.prototype.calTextBoxWidth = function (canvas, content, min_width, max_width) // 如果不存在手动换行，则二分自动换行 if (allLines.length == 1) { - var w = core.canvas[canvas].measureText(allLines[0]).width; + var w = core.calWidth(canvas, allLines[0]); if (w content_left + validWidth) { index--; offsetx = content_left; @@ -783,7 +820,7 @@ ui.prototype.drawScrollText = function (content, time, callback) { core.clearMap('ui'); var per_pixel = 1, per_time = time * per_pixel / (416+height); var currH = 416; - core.canvas.ui.drawImage(tempCanvas.canvas, 0, currH); + core.drawImage('ui', tempCanvas.canvas, 0, currH); var animate = setInterval(function () { core.clearMap('ui'); currH -= per_pixel; @@ -793,7 +830,7 @@ ui.prototype.drawScrollText = function (content, time, callback) { if (core.isset(callback)) callback(); return; } - core.canvas.ui.drawImage(tempCanvas.canvas, 0, currH); + core.drawImage('ui', tempCanvas.canvas, 0, currH); }, per_time); core.animateFrame.asyncId[animate] = true; @@ -826,7 +863,7 @@ ui.prototype.drawChoices = function(content, choices) { var globalFont = core.status.globalAttribute.font; core.setFont('ui', "bold 17px "+globalFont); for (var i = 0; i < choices.length; i++) { - width = Math.max(width, core.canvas.ui.measureText(core.replaceText(choices[i].text || choices[i])).width + 30); + width = Math.max(width, core.calWidth('ui', core.replaceText(choices[i].text || choices[i]))+30); } var left=parseInt((416 - width) / 2); // 左边界 @@ -877,7 +914,7 @@ ui.prototype.drawChoices = function(content, choices) { var content_top = top + 35; if (core.isset(id)) { - core.canvas.ui.textAlign = "center"; + core.setTextAlign('ui', 'center'); content_top = top+55; var title_offset = left+width/2; @@ -893,7 +930,7 @@ ui.prototype.drawChoices = function(content, choices) { core.clearMap('ui', left + 15, top + 30, 32, heroHeight); core.fillRect('ui', left + 15, top + 30, 32, heroHeight, core.material.groundPattern); var heroIcon = core.material.icons.hero['down']; - core.canvas.ui.drawImage(core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+15, top+30, 32, heroHeight); + core.drawImage('ui', core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+15, top+30, 32, heroHeight); } else { core.fillText('ui', name, title_offset, top + 27, titleColor, 'bold 19px '+globalFont); @@ -911,7 +948,7 @@ ui.prototype.drawChoices = function(content, choices) { } } - core.canvas.ui.textAlign = "left"; + core.setTextAlign('ui', 'left'); for (var i=0;i=choices.length) core.status.event.selection-=choices.length; - var len = core.canvas.ui.measureText(core.replaceText(choices[core.status.event.selection].text || choices[core.status.event.selection])).width; + var len = core.calWidth('ui', core.replaceText(choices[core.status.event.selection].text || choices[core.status.event.selection])); if (isWindowSkin) this.drawWindowSelector(background, 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28); else @@ -969,7 +1006,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) { var lines = contents.length; var max_length = 0; for (var i in contents) { - max_length = Math.max(max_length, core.canvas.ui.measureText(contents[i]).width); + max_length = Math.max(max_length, core.calWidth('ui', contents[i])); } var left = Math.min(208 - 40 - parseInt(max_length / 2), 100); @@ -987,7 +1024,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) { } core.setAlpha('ui', 1); - core.canvas.ui.textAlign = "center"; + core.setTextAlign('ui', 'center'); for (var i in contents) { core.fillText('ui', contents[i], 208, top + 50 + i*30, textColor); } @@ -995,7 +1032,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) { core.fillText('ui', "确定", 208 - 38, bottom - 35, null, "bold 17px "+globalFont); core.fillText('ui', "取消", 208 + 38, bottom - 35); - var len=core.canvas.ui.measureText("确定").width; + var len=core.calWidth('ui', "确定"); var strokeLeft = 208 + (76*core.status.event.selection-38) - parseInt(len/2) - 5; @@ -1154,7 +1191,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) { core.strokeRect('ui', left + right - margin - boxWidth - 1 , top+margin-1, boxWidth+2, monsterHeight+boxWidth-32+2); // 名称 - core.canvas.ui.textAlign='center'; + core.setTextAlign('ui', 'center'); core.fillText('ui', core.status.hero.name, left+margin+boxWidth/2, top+margin+heroHeight+40, '#FFD700', 'bold 22px '+globalFont); core.fillText('ui', "怪物", left+right-margin-boxWidth/2, top+margin+monsterHeight+40); for (var i=0, j=0; i 1) core.fillText('ui', '上一页', 208 - 80, top*32+19); if (page < totalPage) @@ -1503,14 +1538,14 @@ ui.prototype.drawBook = function (index) { core.fillRect('ui', 0, 0, 416, 416); core.setAlpha('ui', 1); - core.canvas.ui.textAlign = 'left'; + core.setTextAlign('ui', 'left'); var globalFont = core.status.globalAttribute.font; core.setFont('ui', 'bold 15px '+globalFont); if (enemys.length == 0) { core.fillText('ui', "本层无怪物", 83, 222, '#999999', "bold 50px "+globalFont); // 退出 - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont); return; } @@ -1545,7 +1580,7 @@ ui.prototype.drawBook = function (index) { }); // 数据 - core.canvas.ui.textAlign = "center"; + core.setTextAlign('ui', 'center'); if (enemy.specialText=='') { core.fillText('ui', enemy.name, 115, 62 * i + 47, '#DDDDDD', 'bold 17px '+globalFont); @@ -1554,7 +1589,7 @@ ui.prototype.drawBook = function (index) { core.fillText('ui', enemy.name, 115, 62 * i + 40, '#DDDDDD', 'bold 17px '+globalFont); core.fillText('ui', enemy.specialText, 115, 62 * i + 62, '#FF6A6A', 'bold 15px '+globalFont); } - core.canvas.ui.textAlign = "left"; + core.setTextAlign('ui', 'left'); core.fillText('ui', '生命', 165, 62 * i + 32, '#DDDDDD', '13px '+globalFont); core.fillText('ui', core.formatBigNumber(enemy.hp||0), 195, 62 * i + 32, '#DDDDDD', 'bold 13px '+globalFont); core.fillText('ui', '攻击', 255, 62 * i + 32, '#DDDDDD', '13px '+globalFont); @@ -1572,7 +1607,7 @@ ui.prototype.drawBook = function (index) { // 加点 if (core.flags.enableAddPoint) { - core.canvas.ui.textAlign = "left"; + core.setTextAlign('ui', 'left'); core.fillText('ui', '加点', expOffset, 62 * i + 50, '#DDDDDD', '13px '+globalFont); core.fillText('ui', core.formatBigNumber(enemy.point||0), expOffset + 30, 62 * i + 50, '#DDDDDD', 'bold 13px '+globalFont); expOffset = 255; @@ -1580,7 +1615,7 @@ ui.prototype.drawBook = function (index) { } if (core.flags.enableExperience && line_cnt<2) { - core.canvas.ui.textAlign = "left"; + core.setTextAlign('ui', 'left'); core.fillText('ui', '经验', expOffset, 62 * i + 50, '#DDDDDD', '13px '+globalFont); core.fillText('ui', core.formatBigNumber(enemy.experience||0), expOffset + 30, 62 * i + 50, '#DDDDDD', 'bold 13px '+globalFont); line_cnt++; @@ -1590,7 +1625,7 @@ ui.prototype.drawBook = function (index) { if (line_cnt==1) damageOffset=326; if (line_cnt==2) damageOffset=361; - core.canvas.ui.textAlign = "center"; + core.setTextAlign('ui', 'center'); var damage = enemy.damage; var color = '#FFFF00'; @@ -1614,7 +1649,7 @@ ui.prototype.drawBook = function (index) { damage += "[b]"; core.fillText('ui', damage, damageOffset, 62 * i + 50, color, 'bold 13px '+globalFont); - core.canvas.ui.textAlign = "left"; + core.setTextAlign('ui', 'left'); core.fillText('ui', '临界', 165, 62 * i + 68, '#DDDDDD', '13px '+globalFont); core.fillText('ui', core.formatBigNumber(enemy.critical||0), 195, 62 * i + 68, '#DDDDDD', 'bold 13px '+globalFont); @@ -1630,7 +1665,7 @@ ui.prototype.drawBook = function (index) { } core.drawBoxAnimate(); this.drawPagination(page, totalPage, 12); - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); // 退出 core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont); } @@ -1744,7 +1779,7 @@ ui.prototype.drawBookDetail = function (index) { core.strokeRect('data', left - 1, top - 1, right + 1, bottom + 1, core.status.globalAttribute.borderColor, 2); // 名称 - core.canvas.data.textAlign = "left"; + core.setTextAlign('data', 'left'); core.fillText('data', enemy.name, content_left, top + 30, '#FFD700', 'bold 22px '+globalFont); var content_top = top + 57; @@ -1755,7 +1790,7 @@ ui.prototype.drawBookDetail = function (index) { if (index>=0) { var x1 = text.substring(0, index+1); core.fillText('data', x1, content_left, content_top, '#FF6A6A', 'bold 16px '+globalFont); - var len=core.canvas.data.measureText(x1).width; + var len=core.calWidth('data', x1); core.fillText('data', text.substring(index+1), content_left+len, content_top, '#FFFFFF', '16px '+globalFont); } else { @@ -1781,7 +1816,7 @@ ui.prototype.drawFly = function(page) { core.setAlpha('ui', 0.85); core.fillRect('ui', 0, 0, 416, 416, '#000000'); core.setAlpha('ui', 1); - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); var globalFont = core.status.globalAttribute.font core.fillText('ui', '楼层跳跃', 208, 60, '#FFFFFF', "bold 28px "+globalFont); core.fillText('ui', '返回游戏', 208, 403, '#FFFFFF', "bold 15px "+globalFont) @@ -1817,7 +1852,7 @@ ui.prototype.drawMaps = function (index, x, y) { 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.setTextAlign('ui', 'center'); core.fillText('ui', "上移地图 [W]", 208, 38, '#FFD700', '20px Arial'); core.fillText('ui', "下移地图 [S]", 208, 390); @@ -1883,16 +1918,16 @@ ui.prototype.drawMaps = function (index, x, y) { var value = core.paint[floorId]; if (core.isset(value)) value = LZString.decompress(value).split(","); core.utils.decodeCanvas(value, 32*mw, 32*mh); - core.canvas.ui.drawImage(core.bigmap.tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, 0, 0, 416, 416); + core.drawImage('ui', core.bigmap.tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, 0, 0, 416, 416); } core.clearMap('data'); - core.canvas.data.textAlign = 'left'; + core.setTextAlign('data', 'left'); core.setFont('data', '16px Arial'); var text = core.status.maps[floorId].title; if (!all && (mw>13 || mh>13)) text+=" ["+(x-6)+","+(y-6)+"]"; - var textX = 16, textY = 18, width = textX + core.canvas.data.measureText(text).width + 16, height = 42; + var textX = 16, textY = 18, width = textX + core.calWidth('data', text) + 16, height = 42; core.fillRect('data', 5, 5, width, height, 'rgba(0,0,0,0.4)'); core.fillText('data', text, textX + 5, textY + 15, 'rgba(255,255,255,0.6)'); } @@ -1973,12 +2008,12 @@ ui.prototype.drawToolbox = function(index) { core.canvas.ui.fill(); // 文字 - core.canvas.ui.textAlign = 'right'; + core.setTextAlign('ui', 'right'); var globalFont = core.status.globalAttribute.font; core.fillText('ui', "消耗道具", 411, 124-ydelta, '#333333', "bold 16px "+globalFont); core.fillText('ui', "永久道具", 411, 284-ydelta); - core.canvas.ui.textAlign = 'left'; + core.setTextAlign('ui', 'left'); // 描述 if (core.isset(selectId)) { var item=core.material.items[selectId]; @@ -2003,7 +2038,7 @@ ui.prototype.drawToolbox = function(index) { } } - core.canvas.ui.textAlign = 'right'; + core.setTextAlign('ui', 'right'); var images = core.material.images.items; // 消耗道具 @@ -2012,7 +2047,7 @@ ui.prototype.drawToolbox = function(index) { if (!core.isset(tool)) break; var yoffset = 144 + Math.floor(i/6)*54 + 5 - ydelta; var icon=core.material.icons.items[tool]; - core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32) + core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32) // 个数 core.fillText('ui', core.itemCount(tool), 16*(4*(i%6)+1)+40, yoffset+33, '#FFFFFF', "bold 14px "+globalFont); if (selectId == tool) @@ -2025,7 +2060,7 @@ ui.prototype.drawToolbox = function(index) { if (!core.isset(constant)) break; var yoffset = 304+Math.floor(i/6)*54+5-ydelta; var icon=core.material.icons.items[constant]; - core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32) + core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32) if (selectId == constant) core.strokeRect('ui', 16*(4*(i%6)+1)+1, yoffset-4, 40, 40, '#FFD700'); } @@ -2034,7 +2069,7 @@ ui.prototype.drawToolbox = function(index) { this.drawPagination(toolsPage, toolsTotalPage, 7); this.drawPagination(constantsPage, constantsTotalPage, 12); - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); // 装备栏 // if (core.flags.equipment) @@ -2116,12 +2151,12 @@ ui.prototype.drawEquipbox = function(index) { core.canvas.ui.fill(); // 文字 - core.canvas.ui.textAlign = 'right'; + core.setTextAlign('ui', 'right'); var globalFont = core.status.globalAttribute.font; core.fillText('ui', "当前装备", 411, 124-ydelta, '#333333', "bold 16px "+globalFont); core.fillText('ui', "拥有装备", 411, 284-ydelta); - core.canvas.ui.textAlign = 'left'; + core.setTextAlign('ui', 'left'); // 描述 if (core.isset(selectId)) { @@ -2167,9 +2202,9 @@ ui.prototype.drawEquipbox = function(index) { } var content = title + ' ' + nowValue + '->'; core.fillText('ui', content, drawOffset, 89, '#CCCCCC', 'bold 14px '+globalFont); - drawOffset += core.canvas.ui.measureText(content).width; + drawOffset += core.calWidth('ui', content); core.fillText('ui', newValue, drawOffset, 89, color); - drawOffset += core.canvas.ui.measureText(newValue).width + 15; + drawOffset += core.calWidth('ui', newValue) + 15; }) } } @@ -2179,7 +2214,7 @@ ui.prototype.drawEquipbox = function(index) { } } - core.canvas.ui.textAlign = 'right'; + core.setTextAlign('ui', 'right'); var images = core.material.images.items; // 当前装备 @@ -2187,7 +2222,7 @@ ui.prototype.drawEquipbox = function(index) { var equipId = equipEquipment[i] || null; if (core.isset(equipId)) { var icon = core.material.icons.items[equipId]; - core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(8*(i%3)+5)+5, 144+Math.floor(i/3)*54+5-ydelta, 32, 32); + core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(8*(i%3)+5)+5, 144+Math.floor(i/3)*54+5-ydelta, 32, 32); } core.fillText('ui', allEquips[i]||"未知", 16*(8*(i%3)+1)+40, 144+Math.floor(i/3)*54+32-ydelta, '#FFFFFF', "bold 16px "+globalFont); core.strokeRect('ui', 16*(8*(i%3)+5)+1, 144+Math.floor(i/3)*54+1-ydelta, 40, 40, index==i?'#FFD700':"#FFFFFF"); @@ -2198,7 +2233,7 @@ ui.prototype.drawEquipbox = function(index) { var ownEquip=ownEquipment[12*(page-1)+i]; if (!core.isset(ownEquip)) continue; var icon=core.material.icons.items[ownEquip]; - core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, 304+Math.floor(i/6)*54+5-ydelta, 32, 32) + core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, 304+Math.floor(i/6)*54+5-ydelta, 32, 32) // 个数 if (core.itemCount(ownEquip)>1) core.fillText('ui', core.itemCount(ownEquip), 16*(4*(i%6)+1)+40, 304+Math.floor(i/6)*54+38-ydelta, '#FFFFFF', "bold 14px "+globalFont); @@ -2208,7 +2243,7 @@ ui.prototype.drawEquipbox = function(index) { this.drawPagination(page, totalPage, 12); // 道具栏 - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); core.fillText('ui', '[道具栏]', 370, 25,'#DDDDDD', 'bold 15px '+globalFont); // 退出按钮 core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont); @@ -2247,7 +2282,7 @@ ui.prototype.drawSLPanel = function(index, refresh) { core.setAlpha('ui', 1); core.ui.drawPagination(page+1, max_page, 12); - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); // 退出 core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont); @@ -2424,6 +2459,9 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente if (core.status.event.id=='viewMaps' && (core.status.event.data||{}).damage) core.control.updateDamage(floorId, tempCanvas); + var ctx = core.getContextByName(canvas); + if (ctx == null) return; + // draw to canvas core.clearMap(canvas, x, y, size, size); if (!core.isset(centerX)) centerX=parseInt(mw/2); @@ -2436,20 +2474,20 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente var side = (416 - realWidth) / 2; core.fillRect(canvas, 0, 0, side, realHeight, '#000000'); core.fillRect(canvas, 416-side, 0, side, realHeight); - core.canvas[canvas].drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, side, 0, realWidth, realHeight); + ctx.drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, side, 0, realWidth, realHeight); } else { var realWidth = 416, realHeight = realWidth * tempHeight / tempWidth; var side = (416 - realHeight) / 2; core.fillRect(canvas, 0, 0, realWidth, side, '#000000'); core.fillRect(canvas, 0, 416-side, realWidth, side); - core.canvas[canvas].drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, 0, side, realWidth, realHeight); + ctx.drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, 0, side, realWidth, realHeight); } } else { var offsetX = core.clamp(centerX-6, 0, mw-13), offsetY = core.clamp(centerY-6, 0, mh-13); // offsetX~offsetX+12; offsetY~offsetY+12 - core.canvas[canvas].drawImage(tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, x, y, size, size); + ctx.drawImage(tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, x, y, size, size); } } @@ -2463,7 +2501,7 @@ ui.prototype.drawKeyBoard = function () { core.fillRect('ui', left, top, right, bottom, core.material.groundPattern); core.strokeRect('ui', left - 1, top - 1, right + 1, bottom + 1, '#FFFFFF', 2); - core.canvas.ui.textAlign = "center"; + core.setTextAlign('ui', 'center'); var globalFont = core.status.globalAttribute.font; core.fillText('ui', "虚拟键盘", 208, top+35, "#FFD700", "bold 22px "+globalFont); @@ -2488,7 +2526,7 @@ ui.prototype.drawKeyBoard = function () { offset+=32; }); - core.canvas.ui.textAlign = 'center'; + core.setTextAlign('ui', 'center'); core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont); } @@ -2717,7 +2755,7 @@ ui.prototype.drawPaint = function () { var value = core.paint[core.status.floorId]; if (core.isset(value)) value = LZString.decompress(value).split(","); core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height); - core.dymCanvas.paint.drawImage(core.bigmap.tempCanvas.canvas, 0, 0); + core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0); core.setLineWidth('paint', 3); core.setStrokeStyle('paint', '#FF0000'); diff --git a/libs/utils.js b/libs/utils.js index 63e91eeb..5f2931e2 100644 --- a/libs/utils.js +++ b/libs/utils.js @@ -84,7 +84,7 @@ utils.prototype.splitLines = function(canvas, text, maxLength, font) { } else { var toAdd = text.substring(last, i+1); - var width = core.canvas[canvas].measureText(toAdd).width; + var width = core.calWidth(canvas, toAdd); if (core.isset(maxLength) && width>maxLength) { contents.push(text.substring(last, i)); last=i; diff --git a/project/functions.js b/project/functions.js index 81c672f6..83c5ddd4 100644 --- a/project/functions.js +++ b/project/functions.js @@ -1180,7 +1180,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = var text_start = left + 24; // 名称 - core.canvas.ui.textAlign = "left"; + core.setTextAlign('ui', 'left'); var globalFont = (core.status.globalAttribute||core.initStatus.globalAttribute).font; core.fillText('ui', "HTML5 魔塔样板", text_start, top+35, "#FFD700", "bold 22px "+globalFont); core.fillText('ui', "版本： "+core.firstData.version, text_start, top + 80, "#FFFFFF", "bold 17px "+globalFont);