From 5a33a81224326ece61c9a675a6cecb400a975b1e Mon Sep 17 00:00:00 2001
From: YouWei Zhao <zhao.uv@gmail.com>
Date: Sun, 13 Jan 2019 10:44:37 -0500
Subject: [PATCH] editor-icons drawImage->img.src

---
 _server/css/editor.css        | 16 ++++++++++++++
 _server/css/editor_mobile.css | 16 ++++++++++++++
 _server/editor.js             | 41 ++++++++++++++++++++++++++++++++++-
 editor-mobile.html            |  3 ++-
 editor.html                   |  3 ++-
 5 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/_server/css/editor.css b/_server/css/editor.css
index ffd78e80..3ad43d05 100644
--- a/_server/css/editor.css
+++ b/_server/css/editor.css
@@ -254,6 +254,22 @@ body {
     overflow: auto;
 }
 
+#edata{
+    position: absolute;
+    z-index:0;
+    left: 0;
+    top: 0;
+}
+
+#iconImages {
+    z-index: 0;
+    overflow: hidden;
+}
+
+#iconImages img {
+    position: absolute;
+}
+
 .egameCanvas {
     position: absolute;
 }
diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css
index 9f3f81ff..0aba4685 100644
--- a/_server/css/editor_mobile.css
+++ b/_server/css/editor_mobile.css
@@ -238,6 +238,22 @@ body {
     overflow: auto;
 }
 
+#edata{
+    position: absolute;
+    z-index:0;
+    left: 0;
+    top: 0;
+}
+
+#iconImages {
+    z-index: 0;
+    overflow: hidden;
+}
+
+#iconImages img {
+    position: absolute;
+}
+
 .egameCanvas {
     position: absolute;
 }
diff --git a/_server/editor.js b/_server/editor.js
index 66731a6d..884efd3c 100644
--- a/_server/editor.js
+++ b/_server/editor.js
@@ -417,7 +417,46 @@ editor.prototype.drawInitData = function (icons) {
 
     if (fullWidth > edata.width) edata.style.width = (edata.width = fullWidth) / ratio + 'px';
     edata.style.height = (edata.height = fullHeight) / ratio + 'px';
-    var dc = edata.getContext('2d');
+    iconImages.style.width = (iconImages.width = fullWidth) / ratio + 'px';
+    iconImages.style.height = (iconImages.height = fullHeight) / ratio + 'px';
+    var dc = {drawImage:function(){
+        var image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight;
+        var a=Array.from(arguments)
+        if(arguments.length==3){
+            // [image, dx, dy]=arguments
+            // [sx, sy, sWidth, sHeight, dWidth, dHeight]=[0,0,image.width,image.height,image.width,image.height]
+            image=a[0]
+            a=[a[0],0,0,image.width,image.height,a[1],a[2],image.width,image.height]
+        }
+        if(arguments.length==5){
+            // [image, dx, dy, dWidth, dHeight]=arguments
+            // [sx, sy, sWidth, sHeight]=[0,0,image.width,image.height]
+            image=a[0]
+            a=[a[0],0,0,image.width,image.height,a[1],a[2],a[3],a[4]]
+        }
+        if(arguments.length==9){
+            // [image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight]=arguments
+        }
+        image=a[0];
+        sx=a[1];
+        sy=a[2];
+        sWidth=a[3];
+        sHeight=a[4];
+        dx=a[5];
+        dy=a[6];
+        dWidth=a[7];
+        dHeight=a[8];
+        //放弃对 dWidth, dHeight 的支持, 始终画一样大的
+        var dimg=new Image()
+        dimg.src = image.src;
+        dimg.style.clip=['rect(',sy,'px,',sx+sWidth,'px,',sy+sHeight,'px,',sx,'px)'].join('')
+        dimg.style.top=dy-sy+'px'
+        dimg.style.left=dx-sx+'px'
+        dimg.width=image.width/ratio
+        dimg.height=image.height/ratio
+        iconImages.appendChild(dimg)
+    }}
+    // var dc = edata.getContext('2d');
     var nowx = 0;
     var nowy = 0;
     for (var ii = 0; ii < imgNames.length; ii++) {
diff --git a/editor-mobile.html b/editor-mobile.html
index d0a663e1..a0974e62 100644
--- a/editor-mobile.html
+++ b/editor-mobile.html
@@ -257,7 +257,8 @@
     </div>
     <div id="right" style="z-index:-1;opacity: 0;">
         <div id="iconLib">
-            <canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
+            <div id="iconImages"></div>
+            <canvas class='egameCanvas' id='edata' width='416' height='416'></canvas>
             <div id="selectBox">
                 <div id='dataSelection' v-show="isSelected" v-cloak></div>
             </div>
diff --git a/editor.html b/editor.html
index 1dabd00d..e08cc33a 100644
--- a/editor.html
+++ b/editor.html
@@ -304,7 +304,8 @@
     </div>
     <div id="right">
         <div id="iconLib">
-            <canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
+            <div id="iconImages"></div>
+            <canvas class='egameCanvas' id='edata' width='416' height='416'></canvas>
             <div id="selectBox">
                 <div id='dataSelection' v-show="isSelected" v-cloak></div>
             </div>