uievent mobile

This commit is contained in:
ckcz123 2019-05-31 19:56:57 +08:00
parent cbad40d773
commit b15782228a
3 changed files with 121 additions and 4 deletions

View File

@ -483,3 +483,87 @@ div.row .rowtd .rowtext{
border-radius: 3px;
width: 90px;
}
#uieventDiv {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(127,127,127,0.6);
z-index: 2000
}
#uieventDialog {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background: white;
width: 100vw;
}
#uieventHead {
margin: 10px 20px;
}
#uieventTitle {
font-weight: bold;
}
#uieventNo {
float: right;
}
#uieventYes {
display: none;
float: right;
margin-right: 15px;
}
#uieventBody {
width: 100vw;
height: 100vw;
position: relative;
margin-left: 0;
margin-bottom: 5px;
overflow: hidden;
}
#uievent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#selectPoint {
display: none;
margin-left: 10px;
margin-bottom: 10px;
}
#selectPointFloor {
margin-right: 10px;
}
#selectPointButtons {
display: inline;
}
#selectPointBox {
position: absolute;
z-index: 75;
width: 26px;
height: 26px;
margin: 3px 0 0 3px;
padding: 0;
/* display: none; */
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.0);
border: 1px solid #000;
box-shadow: 0 0 0 2px #fff,
0 0 0 3px #000;
}

View File

@ -448,6 +448,7 @@ uievent.previewUI = function (list) {
uievent.selectPoint = function (floorId, x, y, hideFloor, callback) {
uievent.values.hideFloor = hideFloor;
uievent.values.callback = callback;
uievent.values.size = editor.isMobile ? window.innerWidth / core.__SIZE__ : 32;
uievent.isOpen = true;
uievent.elements.div.style.display = 'block';
@ -475,8 +476,10 @@ uievent.updateSelectPoint = function (redraw) {
{ctx: 'uievent', centerX: uievent.values.left + core.__HALF_SIZE__,
centerY: uievent.values.top + core.__HALF_SIZE__});
}
uievent.elements.selectPointBox.style.left = 32 * (uievent.values.x - uievent.values.left) + "px";
uievent.elements.selectPointBox.style.top = 32 * (uievent.values.y - uievent.values.top) + "px";
uievent.elements.selectPointBox.style.width = (uievent.values.size - 6) + "px";
uievent.elements.selectPointBox.style.height = (uievent.values.size - 6) + "px";
uievent.elements.selectPointBox.style.left = uievent.values.size * (uievent.values.x - uievent.values.left) + "px";
uievent.elements.selectPointBox.style.top = uievent.values.size * (uievent.values.y - uievent.values.top) + "px";
}
uievent.setPoint = function (floorId, x, y) {
@ -497,8 +500,8 @@ uievent.elements.selectFloor.onchange = function () {
uievent.elements.body.onclick = function (e) {
if (uievent.mode != 'selectPoint') return;
uievent.values.x = uievent.values.left + Math.floor(e.offsetX / 32);
uievent.values.y = uievent.values.top + Math.floor(e.offsetY / 32);
uievent.values.x = uievent.values.left + Math.floor(e.offsetX / uievent.values.size);
uievent.values.y = uievent.values.top + Math.floor(e.offsetY / uievent.values.size);
uievent.updateSelectPoint(false);
}

View File

@ -216,6 +216,7 @@
<input class="color" id="colorPicker" value="255,215,0,1"/>
<button onclick="confirmColor()">确定</button>
</div>
<button class="cpPanel" onclick="editor_blockly.selectPoint()">选点</button>
<xml id="toolbox" style="display:none">
</xml>
</h3>
@ -522,6 +523,35 @@
<button id='inputNo'>取消</button>
</div>
</div>
<!-- UI预览 & 地图选点 -->
<div id='uieventDiv' style='display: none'>
<div id='uieventDialog'>
<div id="uieventHead">
<span id="uieventTitle"></span>
<select id="uieventBackground" style="margin-left: 20px">
<option value="thumbnail" selected>缩略图</option>
<option value="#000000">黑色</option>
<option value="#FFFFFF">白色</option>
</select>
<button id="uieventNo">关闭</button>
<button id="uieventYes">确定</button>
</div>
<hr style="clear: both; margin-top: 0"/>
<div id='uieventBody'>
<canvas class='gameCanvas' id='uievent' width='416' height='416'></canvas>
<div id="selectPointBox"></div>
</div>
<div id="selectPoint">
<select id="selectPointFloor"></select>
<div id="selectPointButtons">
<input type="button" value="←"/>
<input type="button" value="↑"/>
<input type="button" value="↓"/>
<input type="button" value="→"/>
</div>
</div>
</div>
</div>
<!-- */</script> -->
<!-- =========================================================== -->