介绍ThemePack的基

目录

目录结构

themePack
├─ designs
│  ├─ bases
│  │  ├─ main1.json
│  │  ├─ main2.json
│  │  ├─ main3.json
│  │  ├─ main4.json
│  │  ├─ main5.json
│  │  ├─ main6.json
│  │  ├─ main7.json
│  │  ├─ main8.json
│  │  ├─ fill_pallet1.json
│  │  ├─ fill_pallet2.json
│  │  ├─ fill_pallet3.json
│  │  ├─ fill_pallet4.json
│  │  ├─ stroke_pallet1.json
│  │  ├─ stroke_pallet2.json
│  │  ├─ stroke_pallet3.json
│  │  ├─ stroke_pallet4.json
│  │  ├─ settings1.json
│  │  ├─ settings2.json
│  │  ├─ settings3.json
│  │  ├─ settings4.json
│  │  ├─ export1.json
│  │  ├─ export2.json
│  │  ├─ export3.json
│  │  ├─ export4.json
│  │  ├─ save1.json
│  │  ├─ save2.json
│  │  ├─ save3.json
│  │  ├─ save4.json
│  │  ├─ load1.json
│  │  ├─ load2.json
│  │  ├─ load3.json
│  │  └─ load4.json
│  ├─ buttons
│  │  ├─ add_ellipse.json
│  │  ├─ add_rectangle.json
│  │  ├─ add_triangle.json
│  │  ├─ tgl_fill_pallet_mode.json
│  │  ├─ tgl_stroke_pallet_mode.json
│  │  ├─ tgl_settings_mode.json
│  │  ├─ tgl_export_mode.json
│  │  ├─ tgl_save_mode.json
│  │  ├─ tgl_load_mode.json
│  │  ├─ duplicate_layer.json
│  │  ├─ raise_layer.json
│  │  ├─ lower_layer.json
│  │  ├─ delete_shape.json
│  │  ├─ bring_to_front.json
│  │  ├─ send_to_back.json
│  │  ├─ move_up_1px.json
│  │  ├─ move_down_1px.json
│  │  ├─ move_right_1px.json
│  │  ├─ move_left_1px.json
│  │  ├─ rotate_left_90.json
│  │  ├─ rotate_right_90.json
│  │  ├─ double_width.json
│  │  ├─ double_height.json
│  │  ├─ double_ratio.json
│  │  ├─ half_width.json
│  │  ├─ half_height.json
│  │  ├─ half_ratio.json
│  │  ├─ zoom_in.json
│  │  ├─ zoom_out.json
│  │  ├─ reset_zoom.json
│  │  ├─ save_project.json
│  │  ├─ open_file.json
│  │  ├─ load_theme.json
│  │  ├─ convert_code.json
│  │  ├─ save_code_as_text_file.json
│  │  └─ save_code_to_clipboard.json
│  └─ others
│     ├─ canvas.json
│     ├─ fill_pickers.json
│     ├─ stroke_pickers.json
│     ├─ theme_path_dialog.json
│     ├─ export_preview.json
│     ├─ export_path_dialogson
│     ├─ save_path_dialog.json
│     └─ load_path_dialog.json
└─ images
   └─ icon

images目录下可能包含针对不同命名空间的多个子目录。


设计文件

正如目录树中所列,ThemePack由许多JSON文件组成。这些JSON文件包含描述屏幕上各个元素的信息,被称为设计文件(Design File)。

以下是一个最简单的设计文件示例:

{
    "description": "Design templates for ThemePack wiki",
    "author": "boo_manKnow",
    
    "containerAnker": "topRight",
    "blockMode": "vertical",
    "blockAnker": "CORNER",
    "layer": 1,

    "elements": {
        "e1": {
            "type": "base",
            "layout": {
                "x_point": 0,
                "y_point": 0,
                "width_point": 4,
                "height_point": 4
            },
            "fillCol": "#FF0000"
        }
    }
}

例如,上述设计文件将使用右上角为轴绘制一个红色正方形。以下是对每个字段的解释:

基准

containerAnkerblockModeblockAnker 是为了实现不依赖于窗口大小的GUI布局而设计的机制。

元素名 选项 作用
containerAnker topLeft / topRight / bottomRight / bottomLeft / center 容器内对象的位置是相对于 containerAnker 的位置来确定的。
blockMode vertical / horizontal / both blockMode 用来决定尺度级别,有三个选项。
blockAnker CORNER / CENTER blockAnker 决定对象的基点是左上角还是中心。

参考:实现GUI

绘制顺序 / 绘制时机

绘制顺序通过以下三种机制决定:

elements

layer