[发明专利]一种JS绘图控制方法以及系统

说明书

本发明公开了一种JS绘图控制方法以及系统，方法包括：S1、获取子控件和父控件的定位信息，所述定位信息包括：起点坐标、控件宽度、控件高度；S2、根据子控件和父控件各自的起点坐标、控件高度，确定显示竖直滚动条或者隐藏竖直滚动条；S3、根据子控件和父控件各自的起点坐标、控件宽度，确定显示水平滚动条或者隐藏水平滚动条；由于本发明中每个控件都绑定有定位信息，所以可以根据父控件和子控件的定位信息，显示竖直滚动条或者隐藏竖直滚动条/水平滚动条，因此可以在有限区域显示更多内容，基于此，可以把表单设计器、报表设计器、流程设计器从CS端迁移到BS端，减少代码编写，提高开发效率。

技术领域

本发明涉及WEB领域，尤其涉及一种用于Web页面的JS绘图控制方法以及系统。

背景技术

随着HTML5标准的确定，JS绘图技术的成熟，越来越多的应用支持在Web页面上使用JS来绘图。现有屏幕的可视区域大小有限，要展示的内容却越来越多，所以需要一种在有限区域显示更多内容的方法。

现有技术JS绘图技术一般是通过扩大绘图区域的高宽，使图形能全部展示在绘图区域。在复杂场景中，用此种方法会影响整体布局，如父亲控件里面有很多子控件，为了显示全部子控件，需要扩大父亲控件的高宽，这样绘制整个界面产生影响。

发明内容

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种JS绘图控制方法以及系统。

本发明解决其技术问题所采用的技术方案是：构造一种JS绘图控制方法，包括：

S1、获取子控件和父控件的定位信息，所述定位信息包括：起点坐标、控件宽度、控件高度；

S2、根据子控件和父控件各自的起点坐标、控件高度，确定显示竖直滚动条或者隐藏竖直滚动条；

S3、根据子控件和父控件各自的起点坐标、控件宽度，确定显示水平滚动条或者隐藏水平滚动条。

在本发明所述的JS绘图控制方法中，

所述步骤S1之前还包括S0：以视窗的左上角为原点，以视窗宽度方向为X轴，以视窗高度方向为Y轴，建立XY坐标系；

所述起点坐标为控件的左上角在所述XY坐标系中的坐标。

在本发明所述的JS绘图控制方法中，所述步骤S2包括：

S21、计算子控件底边的Y坐标和父控件底边的Y坐标；

S22、如果子控件底边的Y坐标大于父控件的起点坐标的Y坐标，且子控件的起点坐标的Y坐标小于父控件的起点坐标的Y坐标，则父控件显示画出的竖直滚动条；

S23、如果子控件的起点坐标的Y坐标小于父控件底边的Y坐标，且子控件底边的Y坐标大于父控件底边的Y坐标，则父控件显示画出的竖直滚动条；

S24、如果子控件的起点坐标的Y坐标大于父控件的起点坐标的Y坐标，且子控件底边的Y坐标小于父控件底边的Y坐标，则父控件隐藏画出的竖直滚动条。

在本发明所述的JS绘图控制方法中，述步骤S3包括：

S31、计算子控件右边的X坐标和父控件右边的X坐标；

S32、如果子控件右边的X坐标大于父控件的起点坐标的X坐标，且子控件的起点坐标的X坐标小于父控件的起点坐标的X坐标，则父控件显示画出的水平滚动条；

S33、如果子控件的起点坐标的X坐标小于父控件右边的X坐标，且子控件右边的X坐标大于父控件右边的X坐标，则父控件显示画出的水平滚动条；

S34、如果子控件的起点坐标的X坐标大于父控件的起点坐标的X坐标，且子控件右边的X坐标小于父控件右边的X坐标，则父控件隐藏画出的水平滚动条。