介绍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"
}
}
}
例如,上述设计文件将使用右上角为轴绘制一个红色正方形。以下是对每个字段的解释:
containerAnker、blockMode、blockAnker 是为了实现不依赖于窗口大小的GUI布局而设计的机制。
| 元素名 | 选项 | 作用 |
|---|---|---|
| containerAnker | topLeft / topRight / bottomRight / bottomLeft / center | 容器内对象的位置是相对于 containerAnker 的位置来确定的。 |
| blockMode | vertical / horizontal / both | blockMode 用来决定尺度级别,有三个选项。 |
| blockAnker | CORNER / CENTER | blockAnker 决定对象的基点是左上角还是中心。 |
参考:实现GUI
绘制顺序通过以下三种机制决定: