canvas:image

docs/personalization.md

@@ -17,6 +17,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
 - fg：前景层；绘制前景图层素材fgmap，和前景贴图
 - damage：显伤层；主要用来绘制怪物显伤和领域显伤
 - animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。
+- image：图片层；主要用来绘制显示图片
 - weather：天气层；主要用来绘制天气（雨/雪）
 - route：路线层；主要用来绘制勇士的行走路线图，也用来绘制图块的淡入/淡出效果，图块的移动等。
 - curtain：色调层；用来控制当前楼层的画面色调

editor-mobile.html

@@ -409,6 +409,7 @@
         <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
         <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>

editor.html

@@ -395,6 +395,7 @@
         <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
         <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>

index.html

@@ -122,6 +122,7 @@
         <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>

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]),

styles.css

@@ -285,6 +285,10 @@ p#name {
     z-index: 70;
 }
 
+#image {
+    z-index: 75;
+}
+
 #weather {
     z-index: 80;
 }