drawmapgui: update layout
This commit is contained in:
echo
parent
3684e7e1db
commit
3a7c988148
138
drawMapGUI.html
138
drawMapGUI.html
@ -1,17 +1,75 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html,body,div,img{margin:0;padding:0;}
|
||||
|
||||
.main {
|
||||
max-width: 100%;
|
||||
min-height: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#left{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 416px;
|
||||
height: 400px;
|
||||
border: 1px solid rgb(238, 13, 13);
|
||||
}
|
||||
#left #pout{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
#mid{
|
||||
position: absolute;
|
||||
left: 448px;
|
||||
top: 0;
|
||||
width: 416px;
|
||||
height: 600px;
|
||||
border: 1px solid rgb(238, 13, 13);
|
||||
}
|
||||
#mid .tools{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
left: 0;
|
||||
top: 448px;
|
||||
}
|
||||
.btn{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
border-radius: 3px;
|
||||
/* background-color: green; */
|
||||
}
|
||||
.input{
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
#right{
|
||||
position: absolute;
|
||||
left: 896px;
|
||||
top: 0;
|
||||
width: 450px;
|
||||
height: 600px;
|
||||
border: 1px solid rgb(238, 13, 13);
|
||||
overflow:auto;
|
||||
}
|
||||
.gameCanvas {
|
||||
position: absolute;
|
||||
}
|
||||
.auxiliary {
|
||||
position: absolute;
|
||||
z-index:50;
|
||||
//display:none;
|
||||
}
|
||||
body,div,img{margin:0;padding:0;}
|
||||
|
||||
#dataSelection{
|
||||
position: absolute;z-index:75;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:320px;
|
||||
z-index:75;
|
||||
width:32px;height:32px;
|
||||
|
||||
margin:-2px 0 0 -2px;
|
||||
@ -23,19 +81,35 @@ body,div,img{margin:0;padding:0;}
|
||||
box-shadow: 0px 0px 2px rgb(87, 198, 232);
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<canvas class='auxiliary' id='grass_pic' width='530' height='64' style='z-index:3;top:500px;left:12px'></canvas>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div id="left">
|
||||
|
||||
<p id='pout'>可以在console中通过printf(str)来改变这里的值</p>
|
||||
|
||||
</div>
|
||||
<div id="mid">
|
||||
<div class="map">
|
||||
<canvas class='gameCanvas' id='bg' width='416' height='416' style='z-index:1'></canvas>
|
||||
<canvas class='gameCanvas' id='eventLayer' width='416' height='416' style='z-index:2'></canvas>
|
||||
<canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
|
||||
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
|
||||
<input class='auxiliary' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
|
||||
<p class='auxiliary' id='pout' style='top:660px;left:12px' >可以在console中通过printf(str)来改变这里的值</p>
|
||||
<div id='dataSelection' style="top:0px;left:768px;"></div>
|
||||
|
||||
<input class='gameCanvas' type="button" value="exportMap" onclick="exportMap()" style="top:600px;left:50px"/>
|
||||
<input class='gameCanvas' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
|
||||
<input class='gameCanvas' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
|
||||
</div>
|
||||
<div class="tools">
|
||||
<input class='btn' type="button" value="exportMap" onclick="exportMap()" style="top:600px;left:50px"/>
|
||||
<input class='btn' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
|
||||
<input class='btn' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
|
||||
|
||||
<input class='input' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right">
|
||||
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
|
||||
<div id='dataSelection'></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>main={'instance':{}}</script>
|
||||
<script src='libs/icons.js'></script>
|
||||
@ -293,7 +367,7 @@ drawInitData = function(){
|
||||
|
||||
var images=core.material.images;
|
||||
maxHeight=700;
|
||||
sumWidth=416+32;
|
||||
sumWidth=0;
|
||||
widthsX={};
|
||||
for(var ii=0;ii<core.images.length;ii++){
|
||||
var img=core.images[ii];
|
||||
@ -307,10 +381,11 @@ drawInitData = function(){
|
||||
var fullWidth=~~(sumWidth*ratio);
|
||||
var fullHeight=~~(maxHeight*ratio);
|
||||
|
||||
data.style.width = (data.width = fullWidth)/ratio + 'px';
|
||||
// data.style.width = (data.width = fullWidth)/ratio + 'px';
|
||||
data.style.height = (data.height = fullHeight)/ratio + 'px';
|
||||
|
||||
var dc = data.getContext('2d');
|
||||
var bgc = bg.getContext('2d');
|
||||
//var colorA = ["#f8f8f8", "#cccccc"];
|
||||
//var colorIndex = 1;
|
||||
//在data内画一个13*13的灰白相间的格子
|
||||
@ -319,9 +394,9 @@ drawInitData = function(){
|
||||
//dc.fillStyle = colorA[colorIndex];
|
||||
//colorIndex = 1 - colorIndex;
|
||||
//dc.fillRect(ii * 32, jj * 32, 32, 32);
|
||||
dc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
|
||||
bgc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
|
||||
}
|
||||
var nowx=416+32;
|
||||
var nowx=0;
|
||||
for(var ii=0;ii<core.images.length;ii++){
|
||||
var img=core.images[ii];
|
||||
dc.drawImage(images[img], nowx, 0)
|
||||
@ -340,7 +415,13 @@ function fillPos(pos) {
|
||||
uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
|
||||
}//在格子内画一个随机色块
|
||||
|
||||
function eToLoc(e) { var loc = { 'x': document.documentElement.scrollLeft+e.clientX - ui.offsetLeft, 'y': document.documentElement.scrollTop+e.clientY - ui.offsetTop, 'size': 32 }; return loc; }//返回可用的组件内坐标
|
||||
function eToLoc(e) {
|
||||
var loc = {
|
||||
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft,
|
||||
'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop,
|
||||
'size': 32
|
||||
};
|
||||
return loc; }//返回可用的组件内坐标
|
||||
|
||||
function locToPos(loc) {
|
||||
pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
|
||||
@ -406,7 +487,8 @@ ui.onmouseup = function (e) {
|
||||
var loc = eToLoc(e);
|
||||
if (stepPostfix.length) {
|
||||
console.log(stepPostfix);
|
||||
for (var ii = 0; ii < stepPostfix.length; ii++)map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = info;
|
||||
for (var ii = 0; ii < stepPostfix.length; ii++)
|
||||
map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = info;
|
||||
map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||||
console.log(map);
|
||||
updateMap();
|
||||
@ -419,7 +501,11 @@ ui.onmouseup = function (e) {
|
||||
info=ids[20];//autotile
|
||||
data.onmousedown = function (e) {
|
||||
e.stopPropagation();
|
||||
var loc = eToLoc(e);
|
||||
var loc = {
|
||||
'x': document.documentElement.scrollLeft + e.clientX - right.offsetLeft,
|
||||
'y': document.documentElement.scrollTop + right.scrollTop+e.clientY - right.offsetTop,
|
||||
'size': 32
|
||||
};
|
||||
pos = locToPos(loc);
|
||||
console.log(pos);
|
||||
for (var spriter in widthsX){
|
||||
@ -517,12 +603,12 @@ function exportMap(callback){
|
||||
else mapxy='!!?';
|
||||
}
|
||||
mapxy=String(mapxy);
|
||||
mapxy=Array(Math.max(5-mapxy.length,0)).join(' ')+mapxy;
|
||||
mapxy=Array(Math.max(4-mapxy.length,0)).join(' ')+mapxy;
|
||||
filestr+=mapxy+','
|
||||
}
|
||||
filestr+='],\n'
|
||||
}
|
||||
printf('<pre>'+filestr+'\n</pre><p>已复制到剪贴板</p>'+'<textarea cols="1" rows="1" id=poutTmp>'+filestr+'\n</textarea><br><br><br>');
|
||||
printf('<pre>'+filestr+'\n</pre><p>已复制到剪贴板</p>'+'<textarea cols="1" rows="1" id="poutTmp" style="display: none;">'+filestr+'\n</textarea><br><br><br>');
|
||||
poutTmp.select();
|
||||
document.execCommand("Copy");
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user