From 8ad043ad6cac42df87c86eae10295e527906199e Mon Sep 17 00:00:00 2001 From: oc Date: Tue, 16 Oct 2018 23:41:26 +0800 Subject: [PATCH] canvas:image --- docs/personalization.md | 1 + editor-mobile.html | 1 + editor.html | 1 + index.html | 1 + libs/events.js | 13 +++++++------ styles.css | 4 ++++ 6 files changed, 15 insertions(+), 6 deletions(-) diff --git a/docs/personalization.md b/docs/personalization.md index 4738fce6..1065d8ab 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -17,6 +17,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 - fg：前景层；绘制前景图层素材fgmap，和前景贴图 - damage：显伤层；主要用来绘制怪物显伤和领域显伤 - animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。 +- image：图片层；主要用来绘制显示图片 - weather：天气层；主要用来绘制天气（雨/雪） - route：路线层；主要用来绘制勇士的行走路线图，也用来绘制图块的淡入/淡出效果，图块的移动等。 - curtain：色调层；用来控制当前楼层的画面色调 diff --git a/editor-mobile.html b/editor-mobile.html index b04d75ae..5cb4bf13 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -409,6 +409,7 @@ + diff --git a/editor.html b/editor.html index 1a37ee1b..71aa57a1 100644 --- a/editor.html +++ b/editor.html @@ -395,6 +395,7 @@ + diff --git a/index.html b/index.html index f84ce4e1..96eeb2d6 100644 --- a/index.html +++ b/index.html @@ -122,6 +122,7 @@ + diff --git a/libs/events.js b/libs/events.js index 933b5c5e..2938afd6 100644 --- a/libs/events.js +++ b/libs/events.js @@ -132,8 +132,9 @@ events.prototype.gameOver = function (ending, fromReplay, norank) { // 清空图片和天气 core.clearMap('animate'); - core.dom.gif2.innerHTML = ""; + core.clearMap('image'); core.clearMap('weather') + core.dom.gif2.innerHTML = ""; core.animateFrame.weather.type = null; core.animateFrame.weather.level = 0; core.animateFrame.weather.nodes = []; @@ -587,10 +588,10 @@ events.prototype.doAction = function() { break; case "showImage": // 显示图片 if (core.isset(data.loc) && core.isset(core.material.images.images[data.name])) { - core.canvas.animate.drawImage(core.material.images.images[data.name], + core.canvas.image.drawImage(core.material.images.images[data.name], core.calValue(data.loc[0]), core.calValue(data.loc[1])); } - else core.clearMap('animate'); + else core.clearMap('image'); this.doAction(); break; case "animateImage": // 淡入淡出图片 @@ -1369,7 +1370,7 @@ events.prototype.animateImage = function (type, image, loc, time, keep, callback if (type == 'hide') opacityVal = 1; if (type == 'hide' && keep) { - core.clearMap('animate'); + core.clearMap('image'); } core.setOpacity('data', opacityVal); @@ -1383,7 +1384,7 @@ events.prototype.animateImage = function (type, image, loc, time, keep, callback if (opacityVal >=1 || opacityVal<=0) { clearInterval(animate); if (type == 'show' && keep) - core.canvas.animate.drawImage(image, x, y); + core.canvas.image.drawImage(image, x, y); core.clearMap('data'); core.setOpacity('data', 1); core.status.replay.animate=false; @@ -1399,7 +1400,7 @@ events.prototype.moveImage = function (image, from, to, time, keep, callback) { core.setAlpha('data', 1); core.setOpacity('data', 1); - if (keep) core.clearMap('animate'); + if (keep) core.clearMap('image'); core.status.replay.animate=true; var fromX = core.calValue(from[0]), fromY = core.calValue(from[1]), diff --git a/styles.css b/styles.css index 19d1048e..174041ab 100644 --- a/styles.css +++ b/styles.css @@ -285,6 +285,10 @@ p#name { z-index: 70; } +#image { + z-index: 75; +} + #weather { z-index: 80; }