From b1401462035c62e2d354cf70be47a4d187c2f407 Mon Sep 17 00:00:00 2001 From: oc Date: Wed, 19 Dec 2018 22:35:41 +0800 Subject: [PATCH] createCanvas return value --- docs/api.md | 2 +- docs/personalization.md | 2 +- libs/control.js | 11 +++++------ libs/core.js | 6 +++--- libs/events.js | 4 ++-- libs/maps.js | 10 +++++----- libs/ui.js | 24 ++++++++---------------- 7 files changed, 25 insertions(+), 34 deletions(-) diff --git a/docs/api.md b/docs/api.md index e908bcbd..d9b387dc 100644 --- a/docs/api.md +++ b/docs/api.md @@ -524,7 +524,7 @@ core.ui.createCanvas(name, x, y, width, height, zIndex) 动态创建一个画布。name为要创建的画布名，如果已存在则会直接取用当前存在的。 x,y为创建的画布相对窗口左上角的像素坐标，width,height为创建的长宽。 zIndex为创建的纵向高度（关系到画布之间的覆盖），z值高的将覆盖z值低的；系统画布的z值可在个性化中查看。 -创建一个画布后，可以通过 core.dymCanvas[name] 进行调用。 +返回创建的画布的context，也可以通过core.dymCanvas[name]调用。 core.ui.findCanvas(name) diff --git a/docs/personalization.md b/docs/personalization.md index ac67729c..e6bc66e8 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -34,7 +34,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 例如：`core.createCanvas('test', 10, 20, 100, 200, 74)` 创建了一个名为test的画布，其左上角相对窗口的像素坐标为(10,20)，宽100高200，纵向高度74（在动画层和天气层之间）。 -可以通过 `core.dymCanvas[name]` 来获得该画布的context；例如 `core.dymCanvas.test` 就是我们上面创建的画布的context，然后进行操作。 +该函数会返回画布的context，也可以通过 `core.dymCanvas[name]` 来获得；例如 `core.dymCanvas.test` 就是我们上面创建的画布的context，然后进行操作。 也可以简单的使用`core.fillText()`, `core.fillRect()`, `core.strokeRect()`等等对画布进行任意绘制。 diff --git a/libs/control.js b/libs/control.js index c2bb9f1d..bb458a01 100644 --- a/libs/control.js +++ b/libs/control.js @@ -575,10 +575,9 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) { sx = Math.min(sx, t.x * 32); dx = Math.max(dx, t.x * 32); sy = Math.min(sy, t.y * 32); dy = Math.max(dy, t.y * 32); }); - core.createCanvas('route', sx-core.bigmap.offsetX, sy-core.bigmap.offsetY, dx-sx+32, dy-sy+32, 95); core.status.automaticRoute.offsetX = sx; core.status.automaticRoute.offsetY = sy; - var ctx = core.dymCanvas['route']; + var ctx = core.createCanvas('route', sx-core.bigmap.offsetX, sy-core.bigmap.offsetY, dx-sx+32, dy-sy+32, 95); ctx.fillStyle = '#bfbfbf'; ctx.strokeStyle = '#bfbfbf'; ctx.lineWidth = 8; @@ -601,13 +600,13 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) { var step = 0, currStep = null; moveStep.forEach(function (t) { var dir = t.direction; - if (currStep == null || currStep == dir) { - step++; currStep = dir; - } + if (currStep == null || currStep == dir) + step++; else { core.status.automaticRoute.autoStepRoutes.push({'direction': currStep, 'step': step}); - step = 1; currStep = dir; + step = 1; } + currStep = dir; }); core.status.automaticRoute.autoStepRoutes.push({'direction': currStep, 'step': step}); diff --git a/libs/core.js b/libs/core.js index 1eca8c5f..17a7265e 100644 --- a/libs/core.js +++ b/libs/core.js @@ -712,7 +712,7 @@ core.prototype.setStrokeStyle = function (name, style) { ////// canvas创建 ////// core.prototype.createCanvas = function (name, x, y, width, height, z) { - core.ui.createCanvas(name, x, y, width, height, z); + return core.ui.createCanvas(name, x, y, width, height, z); } ////// canvas查找 ////// @@ -722,12 +722,12 @@ core.prototype.findCanvas = function (name) { ////// canvas重定位 ////// core.prototype.relocateCanvas = function (name, x, y) { - core.ui.relocateCanvas(name, x, y); + return core.ui.relocateCanvas(name, x, y); } ////// canvas重置 ////// core.prototype.resizeCanvas = function (name, width, height) { - core.ui.resizeCanvas(name, width, height); + return core.ui.resizeCanvas(name, width, height); } ////// canvas删除 ////// diff --git a/libs/events.js b/libs/events.js index ed08fd13..4cb66773 100644 --- a/libs/events.js +++ b/libs/events.js @@ -1533,9 +1533,9 @@ events.prototype.showImage = function (code, image, x, y, dw, dh, opacityVal, ti var zIndex = code + 100; time = time || 0; var name = "image"+ zIndex; - core.createCanvas(name, x, y, image.width * dw, image.height * dh, zIndex); + var ctx = core.createCanvas(name, x, y, image.width * dw, image.height * dh, zIndex); - core.dymCanvas[name].drawImage(image, 0, 0, image.width * dw, image.height * dh); + ctx.drawImage(image, 0, 0, image.width * dw, image.height * dh); if (time == 0) core.setOpacity(name, opacityVal); else { diff --git a/libs/maps.js b/libs/maps.js index e4149a23..00aaf093 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -829,16 +829,16 @@ maps.prototype.__initBlockCanvas = function (block, height, x, y) { } if (damage != null) { damageCanvas = "blockDamage"+x+"_"+y; - core.createCanvas(damageCanvas, 0, 0, 32, 32, 65); - core.dymCanvas[damageCanvas].textAlign = 'left'; - core.dymCanvas[damageCanvas].font = "bold 11px Arial"; - core.fillBoldText(core.dymCanvas[damageCanvas], damage, damageColor, 1, 31); + var ctx = core.createCanvas(damageCanvas, 0, 0, 32, 32, 65); + ctx.textAlign = 'left'; + ctx.font = "bold 11px Arial"; + core.fillBoldText(ctx, damage, damageColor, 1, 31); if (core.flags.displayCritical) { var critical = core.enemys.nextCriticals(block.event.id); if (critical.length>0) critical=critical[0]; critical = core.formatBigNumber(critical[0], true); if (critical == '???') critical = '?'; - core.fillBoldText(core.dymCanvas[damageCanvas], critical, '#FFFFFF', 1, 21); + core.fillBoldText(ctx, critical, '#FFFFFF', 1, 21); } } return { diff --git a/libs/ui.js b/libs/ui.js index 7a632dc9..645f2c38 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -367,15 +367,8 @@ ui.prototype.getTitleAndIcon = function (content) { // 绘制选择光标 ui.prototype.drawWindowSelector = function(background,x,y,w,h) { w = Math.round(w), h = Math.round(h); - if (core.isset(core.dymCanvas.selector)) { - core.relocateCanvas("selector", x, y); - core.resizeCanvas("selector", w, h); - } - else { - core.ui.createCanvas("selector", x, y, w, h, 165); - } + var dstImage = core.ui.createCanvas("selector", x, y, w, h, 165); core.setOpacity("selector", 0.8); - var dstImage = core.dymCanvas.selector; // back dstImage.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4); // corner @@ -2779,7 +2772,7 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) { this.relocateCanvas(name, x, y); this.resizeCanvas(name, width, height); core.dymCanvas[name].canvas.style.zIndex = z; - return; + return core.dymCanvas[name]; } var newCanvas = document.createElement("canvas"); newCanvas.id = name; @@ -2801,6 +2794,7 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) { } }); core.dom.gameDraw.appendChild(newCanvas); + return core.dymCanvas[name]; } ////// canvas查找 ////// @@ -2815,9 +2809,7 @@ ui.prototype.findCanvas = function (name) { ////// canvas重定位 ////// ui.prototype.relocateCanvas = function (name, x, y) { - if (!core.isset(name)) return; - var index = core.findCanvas(name); - if (index < 0) return; + if (this.findCanvas(name)<0) return null; if (core.isset(x)) { core.dymCanvas[name].canvas.style.left = x * core.domStyle.scale + 'px'; core.dymCanvas._list[index].style.left = x; @@ -2826,11 +2818,12 @@ ui.prototype.relocateCanvas = function (name, x, y) { core.dymCanvas[name].canvas.style.top = y * core.domStyle.scale + 'px'; core.dymCanvas._list[index].style.top = y; } + return core.dymCanvas[name]; } ////// canvas重置 ////// ui.prototype.resizeCanvas = function (name, width, height) { - if (!core.isset(name)) return; + if (this.findCanvas(name)<0) return null; var dstCanvas = core.dymCanvas[name].canvas; if (core.isset(width)) { dstCanvas.width = width; @@ -2840,12 +2833,11 @@ ui.prototype.resizeCanvas = function (name, width, height) { dstCanvas.height = height; dstCanvas.style.height = height * core.domStyle.scale + 'px'; } + return core.dymCanvas[name]; } ////// canvas删除 ////// ui.prototype.deleteCanvas = function (name) { - if (!core.isset(name)) return; - var index = core.findCanvas(name); - if (index == -1) return; + if (this.findCanvas(name)<0) return null; core.dom.gameDraw.removeChild(core.dymCanvas[name].canvas); delete core.dymCanvas[name]; core.dymCanvas._list.splice(index,1);