添加图册边框组件

在定义图册时,SaCa DataViz内置了一些边框组件可以直接使用,用户也可以自己添加边框。

边框组件实际上是用CSS3的border-image属性实现的,要添加自定义边框,可按以下步骤进行。

  1. 将边框图片放到前台工程(dataviz_web)的/src/assets/border/img/目录下。

  2. 修改/src/assets/border/目录下的simple-border.json(简单边框)或tech-border.json(科技边框)文件,文件内容是一个数组,每一项表示一个边框资源,添加内容类似下面所示:

    {
     "name": "边框11",            // 名称
     "source": "11.png",          // 对应的边框图片,只写名称,不含路径
     "slice": "17 24 18 19 fill",        
     "repeat": "repeat",
     "borderWidth": "17px 24px 18px 19px"
    }
    

其中“slice”和“repeat”分别对应CSS3的border-image-slice和border-image-repeat属性,详细信息可参考http://www.w3school.com.cn/cssref/pr_border-image.asp或网上更多资源。

“borderWidth”指的是设置了border-image样式的DOM元素的边框宽度,一般来说与“slice”一致即可,但要写单位。

results matching ""

    No results matching ""