追加素材完成
This commit is contained in:
YouWei Zhao
parent
7e61378d68
commit
e436a5f995
@ -10,6 +10,7 @@ function editor_mode(){
|
||||
this.actionList=[];
|
||||
this.mode='';
|
||||
this.info={};
|
||||
this.appendPic={};
|
||||
}
|
||||
|
||||
editor_mode.prototype.init = function(callback){
|
||||
@ -254,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刷新编辑器');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -291,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();
|
||||
}
|
||||
|
||||
|
||||
@ -35,15 +35,16 @@
|
||||
<div id="left1" class='leftTab'><div ><!-- appendpic -->
|
||||
<h3>追加素材</h3>
|
||||
<p>
|
||||
<input type="button" value="选择文件"/>
|
||||
<input id="selectFileBtn" type="button" value="导入文件到画板"/>
|
||||
<select id="selectAppend"></select><!-- ["terrains", "animates", "enemys", "items", "npcs"] -->
|
||||
<input type="button" value="追加"/>
|
||||
<input id="appendConfirm" type="button" value="追加"/>
|
||||
</p>
|
||||
<div id="appendPicCanvas" style="position:relative;overflow: auto;height:500px;">
|
||||
<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>
|
||||
<div id="appendPicSelection">
|
||||
<div class="appendSelection"><span style="font-size:10px">1</span></div>
|
||||
<div class="appendSelection"><span style="font-size:10px"> 2</span></div>
|
||||
<div class="appendSelection"><span style="font-size:10px"> 3</span></div>
|
||||
|
||||
10
libs/core.js
10
libs/core.js
@ -215,6 +215,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)) {
|
||||
@ -4949,7 +4954,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) {
|
||||
@ -4976,7 +4981,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 = '';
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user