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) {
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) {
@ -325,7 +325,7 @@ editor.prototype.listen = function () {
}//返回可用的组件内坐标
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;
}

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 (selectBox.isSelected) {
editor_mode.onmode('');

View File

@ -5,6 +5,11 @@
<link href="_server/css/editor.css" rel="stylesheet">
<link href="_server/CodeMirror/codemirror.css" rel="stylesheet">
<link href="_server/css/editor_mode.css" rel="stylesheet">
<style>
#mapEdit {
overflow: hidden;
}
</style>
</head>
<body>
<script>
@ -241,7 +246,14 @@
<input type="radio" id="brushMod" name="brushMod" value="line" checked="checked" />画线
<input type="radio" id="brushMod2" name="brushMod" value="rectangle" />画矩形
</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>
<input type="button" value="保存地图" id='saveFloor'/>
<!-- -->
@ -370,35 +382,38 @@
<div id="gif"></div>
<div id="gif2"></div>
<div id="curtain"></div>
<!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
<!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' 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 id="gameDraw">
<!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
<!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></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>
<!-- */</script> -->
<script>
// 生成定位编号
(function () {
buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a = function (offsetX,offsetY) {
var colNum = ' ';
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;
}
arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
var rowNum = ' ';
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;
}
arrRowMark.innerHTML = rowNum;
mapRowMark.innerHTML = rowNum;
})();
}
</script>
<!-- =========================================================== -->
@ -433,6 +448,24 @@ if (location.protocol.indexOf("http")!=0) {
</script>
<script src='_server/editor.js'></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;
main.useCompress = false;
main.init('editor', function () {
@ -450,6 +483,7 @@ if (location.protocol.indexOf("http")!=0) {
editor_blockly = editor_blockly();
editor.useCompress = useCompress;
delete(useCompress);
editor.moveViewport(0,0);
});
});