12. 编辑器界面定制

编辑器UI界面¶

VRP编辑器UI界面中可进行对字体、背景、Logo与各个组件的颜色、大小、透明度及渐变等样式进行修改。

一、整体JS代码框架¶

程序界面整体采用MVC架构：

程序界面入口:/GUI/index.html文件
视图层文件:/GUI/editor/window/*.js
控制器文件：/GUI/controller/*.js

具体呈像如下图:

二、UI组件库¶

程序的UI组件库采用zebkit.js库，源码放置在/GUI/thirdparty/zebkit/中。同时，程序也对zebkit组件库进行了封装，为/GUI/common/VrpUIComponent.js文件，此文件中包括对基础的UI组件（按钮、输入框、图片容器、文本、折叠栏、多选框、列表等UI组件）的参数及函数进行了初始化定义。

如下按钮组件代码参数及函数说明：

原生按钮

/**
         * @event fired
         * @param {zebkit.ui.Button} src a button that has been pressed
         *
         */
        pkg.Button = Class(pkg.EvStatePan, pkg.DrawFocusMarker, pkg.FireEventRepeatedly, [
            function(t) {
                this.$super();
                if (arguments.length > 0 && t !== null) {
                    t = pkg.$component(t, this);
                    this.add(t);
                    this.setFocusAnchorComponent(t);
                }
            },
            function $clazz() {
                this.Label = Class(pkg.Label, []);
                this.ViewPan = Class(pkg.ViewPan, [
                    function(v) {
                        this.$super();
                        this.setView(v);
                    },
                    function $prototype() {
                        this.setState = function(id) {
                            if (this.view !== null && this.view.activate !== undefined) {
                                this.activate(id);
                            }
                        };
                    }
                ]);
                this.ImageLabel = Class(pkg.ImageLabel, []);
            },
            function $prototype() {
                /**
                 * Indicates the component can have focus
                 * @attribute canHaveFocus
                 * @type {Boolean}
                 * @default true
                 */
                this.canHaveFocus = true;
                this.catchInput = true;
            }
        ]).events("fired");

封装按钮：

//Button
//text参数设置按钮的初始文本|bd设置按钮边框是否为0，默认值为fasle|border参数设置边框的颜色|background设置按钮的背景颜色
    createButton(text, bd = false, border = Theme.EditorUIStyle.borderColor, background = Theme.EditorUIStyle.btnBackground) {
        //zebkit.ui.Button语句调用zebkit.js的按钮组件
        const button = new zebkit.ui.Button(text).setBackground("rgba(0,0,0,0.0)");
        if(bd){
            button.setBackground(background).setBorder(new zebkit.draw.Border(border, 1, 0));
            button.pointerEntered = function () { this.setBackground(Theme.EditorUIStyle.backgroundThree).setBorder(new zebkit.draw.Border(Theme.EditorUIStyle.SelectWireFrame, 1, 0));}
            button.pointerExited = function () { this.setBackground(background).setBorder(new zebkit.draw.Border(border, 1, 0));}
        }else{
            if(border != Theme.EditorUIStyle.borderColor){
                button.setBorder(new zebkit.draw.Border(border, 1, 0));
            }
            if(background != Theme.EditorUIStyle.btnBackground){
                button.setBackground(background);
            }
        }
        return button;
    }

三、字体、背景、Logo与各个组件对应解决方案¶

Theme.js（位置为/data/GUI/Theme.js）文件通过读取各个主题的Json文件为程序配置主体风格。各个主题的Json文件包括字体变量配置文件、UI组件配置文件，位置分别位于/data/GUI/thirdparty/json/..、/data/GUI/thirdparty/zebkit/rs/themes/..中。

1.字体|背景 Theme.js文件中读取字体颜色和大小数据到Theme.EditorUIStyle对象中，通过该对象读取数据下各个颜色控制变量来实现对界面字体的大小及颜色进行配置。如图所示：