页面数据结构

通过导出或保存，可以获得页面配置的 JSON Schema。

JSON Schema示例

canvasStyle

画布样式对象，包含画布设置的宽高、背景、缩放、自定义样式等信息。

componentData

数组形式，包含当前画布上的组件对象配置列表。

WARNING

存储页面JSON Schema时，考虑传输时的体积和速度，压缩json数据很有必要。

完整示例

{
    "canvasStyle": {
        "width": 1200,
        "height": 800,
        "scale": 100,
        "color": "#000",
        "opacity": 1,
        "backgroundColor": "#fff",
        "fontSize": 14,
        "screenAdapter": "no-adapter",
        "passToParentSwitch": false,
        "diyStyles": {},
        "id": "P_i_25yiKJP23W5qhJzjaqB"
    },
    "componentData": [
        {
            "animations": [],
            "compName": "文本",
            "groupStyle": {},
            "isLock": false,
            "collapseName": "attr",
            "hasEvents": [
                "onBeforeMount",
                "onMounted",
                "onBeforeUnmount",
                "onUnmounted",
                "onMouseClick",
                "timerTrigger",
                "bindRefreshTrigger",
                "onActivated"
            ],
            "events": {},
            "component": "SVGWenBen",
            "label": "文本",
            "icon": "svgwenben",
            "propValue": {
                "text": "文字",
                "hasBackground": true,
                "fillColor": "rgba(79,210,221,1)",
                "dx": "",
                "fontSize": 12,
                "fontFamily": "Arial",
                "fontWeight": "normal",
                "horizontalAlign": "center",
                "strokeColor": "rgba(79,210,221,1)",
                "strokeWidth": 1,
                "fontColor": "rgba(35,95,167,1)",
                "offsetX": 0,
                "rx": 0,
                "ry": 0,
                "fillOpacity": 1,
                "strokeOpacity": 1
            },
            "style": {
                "rotate": 0,
                "opacity": 1,
                "isHide": false,
                "hAffix": "calc",
                "wdSet": "calc",
                "wdReserve": 0,
                "vAffix": "calc",
                "htSet": "calc",
                "htReserve": 0,
                "showDashBorder": true,
                "rotateZoom": false,
                "width": 100,
                "height": 50,
                "top": 88,
                "left": 302
            },
            "id": "Comp__wFgt1hrTLHr29_Jk8DNP"
        },
        {
            "animations": [],
            "compName": "横线",
            "groupStyle": {},
            "isLock": false,
            "collapseName": "attr",
            "hasEvents": [
                "onBeforeMount",
                "onMounted",
                "onBeforeUnmount",
                "onUnmounted"
            ],
            "events": {},
            "component": "SVGHLine",
            "label": "横线",
            "icon": "svghline",
            "propValue": {
                "strokeColor": "rgba(245, 10, 10, 1)",
                "strokeWidth": 1,
                "strokeDasharray": "",
                "animate": false,
                "animateFrom": 0,
                "animateTo": 10,
                "animateDur": 1
            },
            "style": {
                "rotate": 0,
                "opacity": 1,
                "isHide": false,
                "hAffix": "calc",
                "wdSet": "calc",
                "wdReserve": 0,
                "vAffix": "calc",
                "htSet": "calc",
                "htReserve": 0,
                "showDashBorder": true,
                "rotateZoom": false,
                "width": 237,
                "height": 19,
                "top": 156,
                "left": 66
            },
            "id": "Comp_PW4W3x5_sTsMFWXBuanhd"
        }
    ]
}