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

previewUI

Browse Source
This commit is contained in:
oc 2019-05-29 21:35:19 +08:00
parent dc205877de
commit 317ff5d591
4 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_server/css/editor.css
View File

@ -503,6 +503,7 @@ table.row td {
height: 416px;
position: relative;
margin-left: 10px;
margin-bottom: 5px;
}
#selectPoint {

39
_server/editor_unsorted_3.js
View File

@ -392,21 +392,26 @@ uievent.close = function () {
}
uievent.no.onclick = uievent.close;
uievent.previewUI = function (list) {
uievent.isOpen = true;
uievent.div.style.display = 'block';
uievent.mode = 'previewUI';
uievent.selectPoint.style.display = 'none';
uievent.yes.style.display = 'none';
uievent.title.innerText = 'UI绘制预览';
uievent.background = document.getElementById('uieventBackground');
uievent.background.onchange = function () {
uievent.drawPreviewUI();
}
uievent.drawPreviewUI = function () {
core.setAlpha('uievent', 1);
core.clearMap('uievent');
// 绘制UI
core.drawThumbnail(editor.currentFloorId, null, {}, 'uievent');
if (list instanceof Array) {
list.forEach(function (data) {
var background = uievent.background.value;
if (background == 'thumbnail') {
core.drawThumbnail(editor.currentFloorId, null, {}, 'uievent');
}
else {
core.fillRect('uievent', 0, 0, core.__PIXELS__, core.__PIXELS__, background);
}
if (uievent.list instanceof Array) {
uievent.list.forEach(function (data) {
var type = data.type;
if (!type || !core.ui["_uievent_"+type]) return;
core.ui["_uievent_"+type](data);
@ -414,5 +419,19 @@ uievent.previewUI = function (list) {
}
}
uievent.previewUI = function (list) {
uievent.isOpen = true;
uievent.div.style.display = 'block';
uievent.mode = 'previewUI';
uievent.selectPoint.style.display = 'none';
uievent.yes.style.display = 'none';
uievent.title.innerText = 'UI绘制预览';
uievent.background.style.display = 'inline';
uievent.background.value = 'thumbnail';
uievent.list = list;
uievent.drawPreviewUI();
}

5
editor.html
View File

@ -510,6 +510,11 @@
<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>

28
libs/ui.js
View File

@ -595,7 +595,7 @@ ui.prototype.drawWindowSelector = function(background, x, y, w, h) {
w = Math.round(w), h = Math.round(h);
var ctx = core.ui.createCanvas("_selector", x, y, w, h, 165);
ctx.canvas.style.opacity = 0.8;
this._drawSelector(ctx, background, x, y, w, h);
this._drawSelector(ctx, background, w, h);
}
ui.prototype._uievent_drawSelector = function (data) {
@ -610,32 +610,34 @@ ui.prototype._uievent_drawSelector = function (data) {
var x = core.calValue(data.x), y = core.calValue(data.y), w = core.calValue(data.width), h = core.calValue(data.height);
w = Math.round(w); h = Math.round(h);
if (main.mode == 'editor') {
this._drawSelector('uievent', background, x, y, w, h);
this._drawSelector('uievent', background, w, h, x, y);
return;
}
var ctx = core.createCanvas('_uievent_selector', x, y, w, h, 136);
ctx.canvas.style.opacity = 0.8;
this._drawSelector(ctx, background, x, y, w, h);
this._drawSelector(ctx, background, w, h);
}
ui.prototype._drawSelector = function (ctx, background, x, y, w, h) {
ui.prototype._drawSelector = function (ctx, background, w, h, left, top) {
left = left || 0;
top = top || 0;
ctx = this.getContextByName(ctx);
if (!ctx) return;
if (typeof background == 'string')
background = core.material.images.images[background];
if (!(background instanceof Image)) return;
// back
ctx.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4);
ctx.drawImage(background, 130, 66, 28, 28, left+2, top+2, w-4, h-4);
// corner
ctx.drawImage(background, 128, 64, 2, 2, 0, 0, 2, 2);
ctx.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2);
ctx.drawImage(background, 128, 94, 2, 2, 0,h-2, 2, 2);
ctx.drawImage(background, 158, 94, 2, 2,w-2,h-2, 2, 2);
ctx.drawImage(background, 128, 64, 2, 2, left, top, 2, 2);
ctx.drawImage(background, 158, 64, 2, 2, left+w-2, top, 2, 2);
ctx.drawImage(background, 128, 94, 2, 2, left, top+h-2, 2, 2);
ctx.drawImage(background, 158, 94, 2, 2, left+w-2, top+h-2, 2, 2);
// border
ctx.drawImage(background, 130, 64, 28, 2, 2, 0,w-4, 2);
ctx.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2);
ctx.drawImage(background, 128, 66, 2, 28, 0, 2, 2,h-4);
ctx.drawImage(background, 158, 66, 2, 28,w-2, 2, 2,h-4);
ctx.drawImage(background, 130, 64, 28, 2, left+2, top, w-4, 2);
ctx.drawImage(background, 130, 94, 28, 2, left+2, top+h-2, w-4, 2);
ctx.drawImage(background, 128, 66, 2, 28, left, top+2, 2,h-4);
ctx.drawImage(background, 158, 66, 2, 28, left+w-2, top+2, 2,h-4);
}
////// 绘制 WindowSkin