jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

update drawmapgui

Browse Source
This commit is contained in:
echo 2017-12-22 00:17:15 +08:00
parent bc789fc0df
commit c4d1f61737
1 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
drawMapGUI.html
View File

@ -24,7 +24,6 @@
top: 10px; top: 10px;
width: 435px; width: 435px;
height: 400px; height: 400px;
/* border: 1px solid rgb(238, 13, 13); */
} }
#editArea{ #editArea{
@ -65,20 +64,27 @@
margin-right: 20px; margin-right: 20px;
margin-top: 5px; margin-top: 5px;
} }
#mid{ #mid{
position: absolute; position: absolute;
left: 448px; left: 448px;
top: 0; top: 10px;
width: 440px;
height: 630px;
}
.map {
position: absolute;
left: 20px;
top: 21px;
width: 416px; width: 416px;
height: 620px; height: 416px;
/* border: 1px solid rgb(238, 13, 13); */
} }
#mid .tools{ #mid .tools{
position: absolute; position: absolute;
width: 400px; width: 425px;
height: 195px; height: 180px;
left: 0; left: 0;
top: 425px; bottom: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding: 10px 5px; padding: 10px 5px;
margin-left: 8px;; margin-left: 8px;;
@ -88,8 +94,8 @@
float: right; float: right;
width: 50%; width: 50%;
height: 95%; height: 95%;
padding: 10px; padding: 5px 10px 10px 10px;
margin-right: 5px; margin-right: 0;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 2px; border-radius: 2px;
@ -149,11 +155,18 @@
} }
#right{ #right{
position: absolute; position: absolute;
left: 896px; left: 900px;
top: 0; top: 10px;
width: 450px; width: 440px;
height: 620px; height: 630px;
/* border: 1px solid rgb(238, 13, 13); */ /* border: 1px solid rgb(238, 13, 13); */
}
#iconLib{
position: absolute;
width: 435px;
height: 620px;
left: 5px;
top: 5px;
overflow:auto; overflow:auto;
} }
.gameCanvas { .gameCanvas {
@ -161,8 +174,8 @@
} }
#dataSelection{ #dataSelection{
position: absolute; position: absolute;
top:0; /* top:0;
left:320px; left:320px; */
z-index:75; z-index:75;
width:32px;height:32px; width:32px;height:32px;
@ -191,27 +204,36 @@
color: #fff; color: #fff;
} }
table.col{ table.col{
position: absolute; position: relative;
text-align: center;
border-collapse: collapse;
}
table.col td{
background-color: #4DB6AC;
}
#arrColMark td{
width: 16px;
}
#arrColMark {
top: 2px; top: 2px;
left: 36px; left: 36px;
width: 385px; width: 385px;
height: 16px; height: 16px;
font-size: 13px; font-size: 13px;
text-align: center;
border-collapse: collapse;
} }
table.col td{ #mapColMark {
width: 16px; top: 2px;
background-color: #4DB6AC; left: 19px;
width: 418px;
height: 16px;
font-size: 13px;
}
#mapColMark td{
width: 29px;
} }
table.row{ table.row{
position: absolute; position: relative;
top: 25px;
left: 2px;
width: 16px;
height: 262px;
font-size: 12px;
text-align: right; text-align: right;
vertical-align:middle; vertical-align:middle;
border-collapse: collapse; border-collapse: collapse;
@ -219,7 +241,23 @@
table.row td{ table.row td{
background-color: #795548; background-color: #795548;
} }
#arrRowMark{
top: 5px;
left: 2px;
width: 16px;
height: 262px;
font-size: 12px;
}
#mapRowMark{
top: 1px;
left: 2px;
width: 16px;
height: 416px;
font-size: 12px;
}
#mapRowMark td{
height: 29px;
}
/* for vue dom */ /* for vue dom */
[v-cloak] { [v-cloak] {
display: none !important; display: none !important;
@ -229,9 +267,9 @@
<body> <body>
<div class="main"> <div class="main">
<div id="left"> <div id="left">
<table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table>
<div id="editArea" v-cloak> <div id="editArea" v-cloak>
<table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table>
<textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea> <textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea>
<p class="warnText" v-if="error">{{ errors[error-1] }}</p> <p class="warnText" v-if="error">{{ errors[error-1] }}</p>
</div> </div>
@ -241,11 +279,12 @@
</div> </div>
<div id="mid"> <div id="mid">
<div class="map"> <table class="col" id='mapColMark'></table>
<table class="row" id='mapRowMark'></table>
<div class="map" id="mapEdit">
<canvas class='gameCanvas' id='bg' width='416' height='416' style='z-index:1'></canvas> <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='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='ui' width='416' height='416' style='z-index:100'></canvas>
</div> </div>
<div class="tools"> <div class="tools">
<div id="tip" v-cloak > <div id="tip" v-cloak >
@ -273,7 +312,9 @@
</div> </div>
</div> </div>
<div id="right"> <div id="right">
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas> <div id="iconLib">
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
</div>
<div id="selectBox"> <div id="selectBox">
<div id='dataSelection' v-show="isSelected"></div> <div id='dataSelection' v-show="isSelected"></div>
</div> </div>
@ -285,8 +326,8 @@
<script>main={'instance':{}}</script> <script>main={'instance':{}}</script>
<script src='libs/icons.js'></script> <script src='libs/icons.js'></script>
<script src='libs/maps.js'></script> <script src='libs/maps.js'></script>
<!-- <script src='_server/vendor/vue.min.js'></script> --> <script src='_server/vendor/vue.min.js'></script>
<script src="https://unpkg.com/vue"></script> <!-- <script src="https://unpkg.com/vue"></script> -->
<script> <script>
main.instance.icons.init();//不知道为什么,需要手动init,明明maps是正常的 main.instance.icons.init();//不知道为什么,需要手动init,明明maps是正常的
icons=main.instance.icons.getIcons(); icons=main.instance.icons.getIcons();
@ -326,13 +367,14 @@
colNum += tpl; colNum += tpl;
} }
arrColMark.innerHTML = '<tr>'+colNum+'</tr>'; arrColMark.innerHTML = '<tr>'+colNum+'</tr>';
mapColMark.innerHTML = '<tr>'+colNum+'</tr>';
var rowNum = ' '; var rowNum = ' ';
for(var i=0; i<13; i++){ for(var i=0; i<13; i++){
var tpl = '<tr><td>'+i+'</td></tr>'; var tpl = '<tr><td>'+i+'</td></tr>';
rowNum += tpl; rowNum += tpl;
} }
arrRowMark.innerHTML = rowNum; arrRowMark.innerHTML = rowNum;
mapRowMark.innerHTML = rowNum;
</script> </script>
@ -614,14 +656,15 @@
function eToLoc(e) { function eToLoc(e) {
var loc = { var loc = {
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft, 'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft,
'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop, 'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop-mapEdit.offsetTop,
'size': 32 'size': 32
}; };
return loc; }//返回可用的组件内坐标 return loc; }//返回可用的组件内坐标
function locToPos(loc) { function locToPos(loc) {
pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) } pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
console.log(pos)
return pos; return pos;
} }
@ -747,12 +790,12 @@
data.onmousedown = function (e) { data.onmousedown = function (e) {
e.stopPropagation(); e.stopPropagation();
var loc = { var loc = {
'x': document.documentElement.scrollLeft + e.clientX - right.offsetLeft, 'x': document.documentElement.scrollLeft + e.clientX - right.offsetLeft-iconLib.offsetLeft,
'y': document.documentElement.scrollTop + right.scrollTop+e.clientY - right.offsetTop, 'y': document.documentElement.scrollTop + e.clientY + iconLib.scrollTop - right.offsetTop-iconLib.offsetTop,
'size': 32 'size': 32
}; };
pos = locToPos(loc); pos = locToPos(loc);
// console.log(pos);
for (var spriter in widthsX){ for (var spriter in widthsX){
if(pos.x>=widthsX[spriter][1] && pos.x<widthsX[spriter][2]){ if(pos.x>=widthsX[spriter][1] && pos.x<widthsX[spriter][2]){
pos.x=widthsX[spriter][1]; pos.x=widthsX[spriter][1];
@ -764,8 +807,8 @@
selectBox.isSelected = true; selectBox.isSelected = true;
// console.log(pos,core.material.images[pos.images].height) // console.log(pos,core.material.images[pos.images].height)
dataSelection.style.left=pos.x*32+'px'; dataSelection.style.left = (iconLib.offsetLeft+pos.x*32) +'px';
dataSelection.style.top=pos.y*32+'px'; dataSelection.style.top = (iconLib.offsetTop + pos.y*32) +'px';
info={'images':pos.images,'y':pos.y}; info={'images':pos.images,'y':pos.y};
for (var ii=0;ii<ids.length;ii++){ for (var ii=0;ii<ids.length;ii++){
if(pos.images==ids[ii].images && pos.y==ids[ii].y) if(pos.images==ids[ii].images && pos.y==ids[ii].y)