bigmap-editor

This commit is contained in:
YouWei Zhao 2018-08-26 00:33:02 +08:00
parent 23062fde85
commit 7032cb7c83
3 changed files with 58 additions and 17 deletions

View File

@ -308,7 +308,7 @@ editor.prototype.listen = function () {
function fillPos(pos) { function fillPos(pos) {
uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8); uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8); uc.fillRect(pos.x * 32 + 12 - core.bigmap.offsetX, pos.y * 32 + 12 - core.bigmap.offsetY, 8, 8);
}//在格子内画一个随机色块 }//在格子内画一个随机色块
function eToLoc(e) { function eToLoc(e) {
@ -325,7 +325,7 @@ editor.prototype.listen = function () {
}//返回可用的组件内坐标 }//返回可用的组件内坐标
function locToPos(loc) { function locToPos(loc) {
editor.pos = {'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size)} editor.pos = {'x': ~~(loc.x / loc.size)+core.bigmap.offsetX/32, 'y': ~~(loc.y / loc.size)+core.bigmap.offsetY/32}
return editor.pos; return editor.pos;
} }

View File

@ -24,7 +24,14 @@ document.body.onmousedown = function (e) {
} }
}); });
if (clickpath.indexOf('edit') === -1 && clickpath.indexOf('tip') === -1 && clickpath.indexOf('brushMod') === -1 && clickpath.indexOf('brushMod2') === -1) { var unselect=true;
for(var ii=0,thisId;thisId=['edit','tip','brushMod','brushMod2','viewportButtons'][ii];ii++){
if (clickpath.indexOf(thisId) !== -1){
unselect=false;
break;
}
}
if (unselect) {
if (clickpath.indexOf('eui') === -1) { if (clickpath.indexOf('eui') === -1) {
if (selectBox.isSelected) { if (selectBox.isSelected) {
editor_mode.onmode(''); editor_mode.onmode('');

View File

@ -5,6 +5,11 @@
<link href="_server/css/editor.css" rel="stylesheet"> <link href="_server/css/editor.css" rel="stylesheet">
<link href="_server/CodeMirror/codemirror.css" rel="stylesheet"> <link href="_server/CodeMirror/codemirror.css" rel="stylesheet">
<link href="_server/css/editor_mode.css" rel="stylesheet"> <link href="_server/css/editor_mode.css" rel="stylesheet">
<style>
#mapEdit {
overflow: hidden;
}
</style>
</head> </head>
<body> <body>
<script> <script>
@ -241,7 +246,14 @@
<input type="radio" id="brushMod" name="brushMod" value="line" checked="checked" />画线 <input type="radio" id="brushMod" name="brushMod" value="line" checked="checked" />画线
<input type="radio" id="brushMod2" name="brushMod" value="rectangle" />画矩形 <input type="radio" id="brushMod2" name="brushMod" value="rectangle" />画矩形
</span> </span>
<br><br><br> <br>
<div id="viewportButtons">
<input type="button" value="↑"/>
<input type="button" value="↓"/>
<input type="button" value="←"/>
<input type="button" value="→"/>
</div>
<br>
<select id="selectFloor"></select> <select id="selectFloor"></select>
<input type="button" value="保存地图" id='saveFloor'/> <input type="button" value="保存地图" id='saveFloor'/>
<!-- --> <!-- -->
@ -370,35 +382,38 @@
<div id="gif"></div> <div id="gif"></div>
<div id="gif2"></div> <div id="gif2"></div>
<div id="curtain"></div> <div id="curtain"></div>
<!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> --> <div id="gameDraw">
<!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> --> <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas> <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
<!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> --> <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas> <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas> <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas> <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas> <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
</div>
</div> </div>
<!-- */</script> --> <!-- */</script> -->
<script> <script>
// 生成定位编号 // 生成定位编号
(function () { buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a = function (offsetX,offsetY) {
var colNum = ' '; var colNum = ' ';
for (var i = 0; i < 13; i++) { for (var i = 0; i < 13; i++) {
var tpl = '<td>' + i + '<div class="colBlock" style="left:' + (i * 32 + 1) + 'px;"></div></td>'; var tpl = '<td>' + (i+offsetX) + '<div class="colBlock" style="left:' + (i * 32 + 1) + 'px;"></div></td>';
colNum += tpl; colNum += tpl;
} }
arrColMark.innerHTML = '<tr>' + colNum + '</tr>'; arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
mapColMark.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 + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>'; var tpl = '<tr><td>' + (i+offsetY) + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>';
rowNum += tpl; rowNum += tpl;
} }
arrRowMark.innerHTML = rowNum; arrRowMark.innerHTML = rowNum;
mapRowMark.innerHTML = rowNum; mapRowMark.innerHTML = rowNum;
})(); }
</script> </script>
<!-- =========================================================== --> <!-- =========================================================== -->
@ -433,6 +448,24 @@ if (location.protocol.indexOf("http")!=0) {
</script> </script>
<script src='_server/editor.js'></script> <script src='_server/editor.js'></script>
<script> <script>
editor.buildMark=buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a;
delete(buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a);
editor.moveViewport=function(x,y){
core.bigmap.offsetX = core.clamp(core.bigmap.offsetX+32*x, 0, 32*core.bigmap.width-416);
core.bigmap.offsetY = core.clamp(core.bigmap.offsetY+32*y, 0, 32*core.bigmap.height-416);
core.control.updateViewport()
editor.buildMark(core.bigmap.offsetX/32,core.bigmap.offsetY/32);
}
var viewportButtons=document.getElementById('viewportButtons');
for(var ii=0,node;node=viewportButtons.children[ii];ii++){
(function(x,y){
node.onclick=function(){
editor.moveViewport(x,y);
}
})([0,0,-1,1][ii],[-1,1,0,0][ii]);
}
var useCompress = main.useCompress; var useCompress = main.useCompress;
main.useCompress = false; main.useCompress = false;
main.init('editor', function () { main.init('editor', function () {
@ -450,6 +483,7 @@ if (location.protocol.indexOf("http")!=0) {
editor_blockly = editor_blockly(); editor_blockly = editor_blockly();
editor.useCompress = useCompress; editor.useCompress = useCompress;
delete(useCompress); delete(useCompress);
editor.moveViewport(0,0);
}); });
}); });