多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 字符云组件就是设置字符效果的组件,效果图如图5.31。点击“![](https://img.kancloud.cn/55/0e/550e1fa654b4a55c19c65cfcc1813028_26x30.png)”图标,再点击“字符云”,即可创建字符云,如图5.32; ![](https://img.kancloud.cn/f5/c8/f5c859746f9ed32510d0a57b96836306_878x482.png) ![](https://img.kancloud.cn/df/8b/df8bebd9616ea2178aa3607ef499c0c3_802x50.png) ![](https://img.kancloud.cn/50/3d/503d0b70f0aca495e52569852bd6b9eb_545x342.png) ![](https://img.kancloud.cn/ab/f5/abf5ad5b0a1372786655d2b0afa9f715_800x41.png) ## **一、组件名称设置** ### 选中该字符云组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图5.33。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/ff/ca/ffca751decc1eab827322d0da1125219_867x514.png) ![](https://img.kancloud.cn/0e/10/0e108c5d0ce38a906419263150230279_795x44.png) ## **二、样式设置** ### 1\. 最小字体 ### 选中字符云组件,在操作界面右侧,在“最小字体”设置最小字体,如图5.34; ![](https://img.kancloud.cn/62/5c/625cba6586230c60b96549543d492753_858x485.png) ![](https://img.kancloud.cn/3e/5e/3e5e389444fcc4f6459a655a3ea00d60_799x44.png) ### 2\. 最大字体 ### 选中字符云组件,在操作界面右侧,在“最大字体”设置最大字体,如图5.35; ![](https://img.kancloud.cn/5d/43/5d4367f2535c1d0be29134f63dfbfdeb_856x475.png) ![](https://img.kancloud.cn/b0/35/b0356093cc6f9961082bc8146bd27f6c_795x42.png) ### 3\. 间距 ### 选中该字符云组件,在操作界面右侧的“间距”处可设置文字的间距,如图5.36。 ![](https://img.kancloud.cn/16/68/1668657e5d086330f8d4f4278df13c8a_860x473.png) ![](https://img.kancloud.cn/df/05/df053a5df798738f971f6b1925706142_796x45.png) ### 4\. 旋转 * ### 选中该字符云组件,在操作界面右侧,打开“旋转”按钮,字符设置成旋转状态,如图5.37。 * ### 关闭“旋转”按钮,样式如图5.38; ![](https://img.kancloud.cn/d4/8b/d48be66e0e7dd2f49d581690b6920f3d_853x471.png) ![](https://img.kancloud.cn/b4/ae/b4ae0ebf39a56a628a063b697934ffbc_802x42.png) ![](https://img.kancloud.cn/0a/f0/0af0036082c885d164fc1b63633b771e_988x664.png) ![](https://img.kancloud.cn/50/ef/50efb62d9c6aafc6c660380d1063639b_802x35.png) ## **三、接口设置** ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 ### (1)静态数据,接口地址穿过来的内容要符合以下格式: ~~~ [ { "name": "三星", "value": "1234" }, { "name": "小米", "value": "1234" }, { "name": "华为", "value": "1234" }, { "name": "oppo", "value": "1234" }, { "name": "抖音", "value": "1234" }, { "name": "快手", "value": "1234" }, { "name": "淘宝", "value": "1234" }, { "name": "百度", "value": "1234" }, { "name": "京东", "value": "1234" }, { "name": "天猫", "value": "1234" }, { "name": "字符1", "value": "1234" }, { "name": "字符1", "value": "1234" } ] ~~~ ### (2)动态数据,接口地址穿过来的内容要符合以下格式: ~~~ {"data":[ { "name": "三星", "value": "1234" }, { "name": "小米", "value": "1234" }, { "name": "华为", "value": "1234" }, { "name": "oppo", "value": "1234" }, { "name": "抖音", "value": "1234" }, { "name": "快手", "value": "1234" }, { "name": "淘宝", "value": "1234" }, { "name": "百度", "value": "1234" }, { "name": "京东", "value": "1234" }, { "name": "天猫", "value": "1234" }, { "name": "字符1", "value": "1234" }, { "name": "字符1", "value": "1234" } ]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/43/de/43dea56870fd6ab0e02f4b30abc89d0e_1062x834.png)