Lenka.Guo 发表于 2021-4-2 16:06:29

如何在报表中实现圆角效果

在报表设计的过程的当中,我们常常需要一些扁平化的元素让报表设计更加美观和良好的用户体验,比如圆角设计等,那在报表中要如何实现圆角效果:报表中能够展示圆角效果的有两个控件:
1. 是容器:容器控件是其他项的容器,可以在容器内放置其他控件。容器控件不与具体的数据相关联,其主要作用是当相邻组件增长导致组件分开时保持组件之间的关系。具体可参考学习指南:https://demo.grapecity.com.cn/activereportsjs/docs/ReportAuthorGuide/Report-Controls/Container
2. 形状:用于显示一个控件的边界,或者高亮显示报表中特定区域的数据。支持的形状有矩形、圆角矩形和椭圆。图形不与具体的数据关联。




在ActiveReportsJS中我们可以在报表设计中采用叠加图形或者容器控件来实现圆角的渲染。
以图形控件未示例:
1. 添加图形控件到设计界面中



2. 设置图形的图形样式属性为圆角矩形,并设置圆角半径,可根据实际需要设置具体的角度


如下是设置完圆角的效果,可以为不同角设置不同的圆角半径



3. 设置完成后,可在图形上面叠加其他相关的数据控件,如文本框,表格等,将图形作为新的边界。





页: [1]
查看完整版本: 如何在报表中实现圆角效果