previewUI

_server/css/editor.css

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

_server/editor_unsorted_3.js

@@ -392,21 +392,26 @@ uievent.close = function () {
 }
 uievent.no.onclick = uievent.close;
 
-uievent.previewUI = function (list) {
+uievent.background = document.getElementById('uieventBackground');
-    uievent.isOpen = true;
+uievent.background.onchange = function () {
-    uievent.div.style.display = 'block';
+    uievent.drawPreviewUI();
-    uievent.mode = 'previewUI';
+}
-    uievent.selectPoint.style.display = 'none';
-    uievent.yes.style.display = 'none';
-    uievent.title.innerText = 'UI绘制预览';
 
+uievent.drawPreviewUI = function () {
     core.setAlpha('uievent', 1);
     core.clearMap('uievent');
 
     // 绘制UI
-    core.drawThumbnail(editor.currentFloorId, null, {}, 'uievent');
+    var background = uievent.background.value;
-    if (list instanceof Array) {
+    if (background == 'thumbnail') {
-        list.forEach(function (data) {
+        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();
+}
+
 
 

editor.html

@@ -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>

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, 128, 64,  2,  2, left,  top,  2,  2);
-    ctx.drawImage(background, 158, 64,  2,  2,w-2,  0,  2,  2);
+    ctx.drawImage(background, 158, 64,  2,  2, left+w-2, top,  2,  2);
-    ctx.drawImage(background, 128, 94,  2,  2,  0,h-2,  2,  2);
+    ctx.drawImage(background, 128, 94,  2,  2, left, top+h-2,  2,  2);
-    ctx.drawImage(background, 158, 94,  2,  2,w-2,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, 64, 28,  2, left+2, top, w-4,  2);
-    ctx.drawImage(background, 130, 94, 28,  2,  2,h-2,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,  0,  2,  2,h-4);
+    ctx.drawImage(background, 128, 66,  2, 28, left,  top+2,  2,h-4);
-    ctx.drawImage(background, 158, 66,  2, 28,w-2,  2,  2,h-4);
+    ctx.drawImage(background, 158, 66,  2, 28, left+w-2, top+2,  2,h-4);
 }
 
 ////// 绘制 WindowSkin