可视化配置文件

目录：/static/visual/visual.json 4.0+

{
  "visual": {
    "widgets": {
      "adorns": {
        "border": {}, // 边框
        "titlebar": {} // 标题框
      },
      // 自定义组件
      "customs": {}
    },
    // 映射颜色模板与形状模板
    "mapper": {
      "color": {},
      "gradient": {},
      "shape": {}
    }
  }
}

边框

目前有全框线、对称框线、左上框线、右上框线、左下框线、右下框线、半包框线这七种边框分组。若要新增边框则需要放在 border 下这七个中的分组内。

可以是字符串:

  "1": "345px 482px 0 82px"  //图片切点

• 图片切点：四个角根据 border 设置的大小全尺寸自动缩放显示到 border 对应的四个角，可避免放大缩小时导致边框图片失帧。

也可以是对象:

 "1": {
    name: '',          // 边框/图片名称  默认后缀 .png
    title: '',         // 中文名
    type: '',          // 类型 border
    group: '',         // 所属分组
    imageSrc: '',      // 图片路径
    imageStyle: '',    // 图片样式
    borderWidth： ''  // 边框宽配置 与图片切点一致
  }

imageSrc 默认路径为 ./static/adorn/type/group/name

• name：若无，如上 "1" 就是 name。

标题栏

目前有全标题栏、异形标题栏、横向标题栏、纵向标题栏这四种标题栏分组。若要新增标题栏则需要放在 titlebar 下这四个中的分组内。

可以是 number:

• 为 number 时，是 ./static/adorn/titlebar/group下的图片数量。

   "full-titlebar": 2, //全标题栏下有两张图片

可以是 string:

  "1": "./static/adorn/titlebar/full-titllebar/1.png"  //图片路径

也可以是 object:

 "1": {
    name: ''          // 标题栏/图片名称  默认后缀 .png
    title: ''         // 中文名
    type: ''          // 类型 border
    group: ''         // 所属分组
    imageSrc: ''      // 图片路径
    imageStyle: ''    // 图片样式
    borderWidth： ''  // 边框宽配置
  }

imageSrc 默认路径为 ./static/adorn/type/group/name

• name：若无，如上 "1" 就是 name。

映射颜色模板 4.0+

  "mapper": {
    // 颜色模板
    "color": {
      "color1": [
        "#fc5454",
        "#fc7454"
      ],
      "color2": [
        "#d2f5a6",
        "#76f2f2"
      ]
    },
    // 渐变色模板
    "gradient": {
      "gradient1": [
        "#ffebee",
        "#ffcdd2",
        "#ef9a9a"
      ],
       "gradient2": [
        "#fce4ec",
        "#f8bbd0",
        "#f48fb1",
        "#f06292"
      ]
    }
  }