From 317ff5d5911a302b85156023be8e8f66657dbdb4 Mon Sep 17 00:00:00 2001 From: oc Date: Wed, 29 May 2019 21:35:19 +0800 Subject: [PATCH] previewUI --- _server/css/editor.css | 1 + _server/editor_unsorted_3.js | 39 +++++++++++++++++++++++++++--------- editor.html | 5 +++++ libs/ui.js | 28 ++++++++++++++------------ 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/_server/css/editor.css b/_server/css/editor.css index f4a372cf..ac9304be 100644 --- a/_server/css/editor.css +++ b/_server/css/editor.css @@ -503,6 +503,7 @@ table.row td { height: 416px; position: relative; margin-left: 10px; + margin-bottom: 5px; } #selectPoint { diff --git a/_server/editor_unsorted_3.js b/_server/editor_unsorted_3.js index 019d2a94..b97e2905 100644 --- a/_server/editor_unsorted_3.js +++ b/_server/editor_unsorted_3.js @@ -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(); +} + diff --git a/editor.html b/editor.html index 65acd529..911c3424 100644 --- a/editor.html +++ b/editor.html @@ -510,6 +510,11 @@
+
diff --git a/libs/ui.js b/libs/ui.js index 474f13fd..c4b5ecbb 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -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