Merge pull request #51 from zhaouv/dev-2.0-appendPic-20180218

追加素材
2018-02-21 18:22:27 +08:00 · 2018-02-21 18:22:27 +08:00 · 3f2c5c0284
commit 3f2c5c0284
parent d5fb1367e0 bb6a9e3266
5 changed files with 176 additions and 38 deletions
--- a/_server/css/editor.css
+++ b/_server/css/editor.css
@ -190,7 +190,7 @@ body{
 .gameCanvas {
  position: absolute;
 }
-#dataSelection{
+#dataSelection , .appendSelection{
  position: absolute;
  /* top:0;
  left:320px; */
--- a/_server/css/editor_mode.css
+++ b/_server/css/editor_mode.css
@ -13,7 +13,7 @@
 .leftTab > :first-child{margin-top:5px;}
 .leftTab > :last-child{margin-bottom:5px;}

-#left99 {
+#left1 {
  left: 5px;
  top: 650px;
  width: 435px;
--- a/_server/editor_mode.js
+++ b/_server/editor_mode.js
@ -3,14 +3,14 @@ function editor_mode(){
    'loc':'left2',
    'emenyitem':'left3',
    'floor':'left4',
-    'tower':'left5',
-    'test':'left99'
+    'tower':'left5'
  }
  this._ids={}
  this.dom={}
  this.actionList=[];
  this.mode='';
  this.info={};
+  this.appendPic={};
 }

 editor_mode.prototype.init = function(callback){
@ -23,6 +23,8 @@ editor_mode.prototype.init = function(callback){
  if (Boolean(callback))callback();
 }

+/////////////////////////////////////////////////////////////////////////////
+
 editor_mode.prototype.objToTable = function(obj,commentObj){
  var outstr=["\n<tr><td>条目</td><td>注释</td><td>值</td></tr>\n"];
  var guids=[];
@ -242,6 +244,8 @@ editor_mode.prototype.tower = function(callback){
  if (Boolean(callback))callback();
 }

+/////////////////////////////////////////////////////////////////////////////
+
 editor_mode.prototype.listen = function(callback){

  var newIdIdnum = document.getElementById('newIdIdnum');
@ -251,7 +255,7 @@ editor_mode.prototype.listen = function(callback){
      var idnum = parseInt(newIdIdnum.children[1].value);
      editor_file.changeIdAndIdnum(editor,id,idnum,editor_mode.info,function(err){
        if(err){printe(err);throw(err)}
-        printf('添加id的idnum成功');
+        printe('添加id的idnum成功,请F5刷新编辑器');
      });
    }
  }
@ -288,6 +292,147 @@ editor_mode.prototype.listen = function(callback){
    });
  }

+  var ratio=1;
+  var appendPicCanvas = document.getElementById('appendPicCanvas');
+  var bg = appendPicCanvas.children[0];
+  var source = appendPicCanvas.children[1];
+  var picClick = appendPicCanvas.children[2];
+  var sprite = appendPicCanvas.children[3];
+  var appendPicSelection = document.getElementById('appendPicSelection');
+
+  var selectAppend = document.getElementById('selectAppend');
+  var selectAppend_str=[];
+  ["terrains", "animates", "enemys", "items", "npcs"].forEach(function(image){
+    selectAppend_str.push(["<option value='",image,"'>",image,'</option>\n'].join(''));
+  });
+  selectAppend.innerHTML=selectAppend_str.join('');
+  selectAppend.onchange = function(){
+    var value = selectAppend.value;
+    editor_mode.appendPic.imageName = value;
+    var img = editor.material.images[value];
+    editor_mode.appendPic.toImg = img;
+    var num = ~~img.width/32;
+    editor_mode.appendPic.num = num;
+    editor_mode.appendPic.index = 0;
+    var selectStr = '';
+    for(var ii=0;ii<num;ii++){
+      appendPicSelection.children[ii].style='left:0;top:0';
+      selectStr+='{"x":0,"y":0},'
+    }
+    editor_mode.appendPic.selectPos = eval('['+selectStr+']');
+    for(var jj=num;jj<4;jj++){
+      appendPicSelection.children[jj].style='display:none';
+    }
+    sprite.style.width = (sprite.width = img.width)/ratio + 'px';
+    sprite.style.height = (sprite.height = img.height+32)/ratio + 'px';
+    sprite.getContext('2d').drawImage(img, 0, 0);
+  }
+  selectAppend.onchange();
+
+  var selectFileBtn = document.getElementById('selectFileBtn');
+  var selectFileStr = document.getElementById('selectFileStr');
+  selectFileBtn.onclick = function(){
+    var loadImage = function (content, callback) {
+      var image = new Image();
+      try {
+        image.src = content;
+        if (image.complete) {
+          callback(image);
+          return;
+        }
+        image.onload = function () {
+          callback(image);
+        }
+      }
+      catch (e) {
+        printe(e);
+      }
+    }
+    core.readFile(function(content){
+      loadImage(content,function(image){
+        editor_mode.appendPic.img = image;
+        editor_mode.appendPic.width = image.width;
+        editor_mode.appendPic.height = image.height;
+        for(var ii=0;ii<3;ii++){
+          var newsprite = appendPicCanvas.children[ii];
+          newsprite.style.width = (newsprite.width = Math.floor(image.width/32)*32)/ratio + 'px';
+          newsprite.style.height = (newsprite.height = Math.floor(image.height/32)*32)/ratio + 'px';
+        }
+
+        //画灰白相间的格子
+        var bgc = bg.getContext('2d');
+        var colorA = ["#f8f8f8", "#cccccc"];
+        var colorIndex;
+        var sratio=4;
+        for (var ii = 0; ii < image.width/32*sratio; ii++){
+          colorIndex = 1-ii%2;
+          for (var jj = 0; jj < image.height/32*sratio; jj++) {
+            bgc.fillStyle = colorA[colorIndex];
+            colorIndex = 1 - colorIndex;
+            bgc.fillRect(ii * 32/sratio, jj * 32/sratio, 32/sratio, 32/sratio);
+          }
+        }
+        
+        //把导入的图片画出
+        source.getContext('2d').drawImage(image, 0, 0);
+
+        //重置临时变量
+        selectAppend.onchange();
+      });
+    },null,'img');
+
+    return;
+  }
+
+  var left1 = document.getElementById('left1');
+  var eToLoc = function (e) { 
+    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    var loc = { 
+      'x': scrollLeft+e.clientX + appendPicCanvas.scrollLeft  - left1.offsetLeft-appendPicCanvas.offsetLeft, 
+      'y': scrollTop+e.clientY + appendPicCanvas.scrollTop - left1.offsetTop-appendPicCanvas.offsetTop, 
+      'size': 32 
+    };
+    return loc; 
+  }//返回可用的组件内坐标
+
+  var locToPos = function (loc) {
+    var pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
+    return pos;
+  }
+  
+  picClick.onclick = function(e){
+    var loc = eToLoc(e);
+    var pos = locToPos(loc);
+    console.log(e,loc,pos);
+    var num = editor_mode.appendPic.num;
+    var ii = editor_mode.appendPic.index;
+    if(ii+1>=num)editor_mode.appendPic.index=ii+1-num;
+    else editor_mode.appendPic.index++;
+    editor_mode.appendPic.selectPos[ii]=pos;
+    appendPicSelection.children[ii].style=[
+      'left:',pos.x*32,'px;',
+      'top:',pos.y*32,'px'
+    ].join('');
+  }
+
+  var appendConfirm = document.getElementById('appendConfirm');
+  appendConfirm.onclick = function(){
+    var sprited = sprite.getContext('2d');
+    //sprited.drawImage(img, 0, 0);
+    var height = editor_mode.appendPic.toImg.height;
+    var sourced = source.getContext('2d');
+    for(var ii=0,v;v=editor_mode.appendPic.selectPos[ii];ii++){
+      var imgData=sourced.getImageData(v.x*32,v.y*32,32,32);
+      sprited.putImageData(imgData,ii*32,height);
+    }
+    var imgbase64 = sprite.toDataURL().split(',')[1];
+    fs.writeFile('./project/images/'+editor_mode.appendPic.imageName+'.png',imgbase64,'base64',function(err,data){
+      if(err){printe(err);throw(err)}
+      printe('追加素材成功,请刷新编辑器');
+    });
+  }
+
  if (Boolean(callback))callback();
 }

--- a/editor.html
+++ b/editor.html
@ -32,39 +32,26 @@
      </div>
      
    </div>
-    <div id="left99" class='leftTab'><!-- 可以直接删掉,在editor_mode.js中,把ids中的'test':'left99'也要删掉 -->
-      <div >
-        <h3>测试用标签页</h3>
-        <div class='etable'>
-          <table>
-            <tbody id='test_tbody'>
-              <tr><td id='test_td' title="['aa']['bb']">条目</td><td>注释<span title='&#97;&#98;&#99;&#10;&#20013;&#25991;&#10;&#97;&#97;&#97;'>aaa</span></td><td>值</td></tr>
-              <tr><td></td><td></td><td></td></tr>
-              <tr><td></td><td></td><td></td></tr>
-              <tr><td>变量名字符串</td><td title='&#97;&#98;&#99;&#10;&#20013;&#25991;&#10;&#97;&#97;&#97;'>可能显示不全但是hover时通过span title='xxx'来显示</td><td>高度以此为准</td></tr>
-              <tr><td></td><td></td><td>此处是利用slice实现</td></tr>
-              <tr><td></td><td></td><td></td></tr>
-            </tbody>
-          </table>
-        </div>
-        <div class='etable'>
-          <table>
-            <tbody id='test_tbody2'>
-              <tr><td>条目</td><td>注释</td><td>值</td></tr>
-              <tr><td></td><td></td><td><textarea spellcheck='false' id='temp_text' rows="2">abc</textarea></td></tr>
-              <tr><td></td><td></td><td><input spellcheck='false' id='temp_input' value='abc' /></td></tr>
-              <tr><td></td><td></td><td><select id="temp_select">
-                <option value="abc">abc</option>
-                <option value="ground2">ground2</option>
-              </select></tr>
-            </tbody>
-          </table>
-        </div>
-        <div >
-          <input  type="button" value="保存"/>
+    <div id="left1" class='leftTab'><div ><!-- appendpic -->
+      <h3>追加素材</h3>
+      <p>
+        <input id="selectFileBtn" type="button" value="导入文件到画板"/>
+        <select id="selectAppend"></select><!-- ["terrains", "animates", "enemys", "items", "npcs"] -->
+        <input id="appendConfirm" type="button" value="追加"/>
+      </p>
+      <div id="appendPicCanvas" style="position:relative;overflow: auto;height:470px;">
+        <canvas style="position:absolute"></canvas><!-- 用于画出灰白相间背景 -->
+        <canvas style="position:absolute"></canvas><!-- 用于画出选中文件 -->
+        <canvas style="position:absolute;z-index:100"></canvas><!-- 用于响应鼠标点击 -->
+        <canvas style="position:absolute;display:none;"></canvas><!-- 画出追加后的sprite用于储存 -->
+        <div id="appendPicSelection">
+          <div class="appendSelection"><span style="font-size:10px">1</span></div>
+          <div class="appendSelection"><span style="font-size:10px">&nbsp;&nbsp;2</span></div>
+          <div class="appendSelection"><span style="font-size:10px">&nbsp;&nbsp;&nbsp;&nbsp;3</span></div>
+          <div class="appendSelection"><span style="font-size:10px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4</span></div>
        </div>
      </div>
-    </div>
+    </div></div>
    <div id="left2" class='leftTab'><div><!-- loc -->
      <h3>地图选点</h3>
      <p id='pos_a6771a78_a099_417c_828f_0a24851ebfce'>0,0</p>
--- a/libs/core.js
+++ b/libs/core.js
@ -216,6 +216,11 @@ core.prototype.init = function (coreData) {
        core.platform.fileReader.onload = function () {
            var content=core.platform.fileReader.result;
            var obj=null;
+            if(content.slice(0,4)==='data'){
+                if (core.isset(core.platform.successCallback))
+                    core.platform.successCallback(content);
+                return;
+            }
            try {
                obj=JSON.parse(content);
                if (core.isset(obj)) {
@ -4952,7 +4957,7 @@ core.prototype.isset = function (val) {
 }

 ////// 读取一个本地文件内容 //////
-core.prototype.readFile = function (success, error) {
+core.prototype.readFile = function (success, error, readType) {

    // step 0: 不为http/https，直接不支持
    if (!core.platform.isOnline) {
@ -4979,7 +4984,8 @@ core.prototype.readFile = function (success, error) {
                    core.platform.errorCallback();
                return;
            }
-            core.platform.fileReader.readAsText(core.platform.fileInput.files[0]);
+            if(!readType)core.platform.fileReader.readAsText(core.platform.fileInput.files[0]);
+            else core.platform.fileReader.readAsDataURL(core.platform.fileInput.files[0]);
            core.platform.fileInput.value = '';
        }
    }