一种响应式图形化的生成方法与系统的制作方法
【技术领域】
[0001]本发明涉及互联网信息前端领域，特别是涉及一种响应式图形化的生成方法及系统。
【背景技术】
[0002]随着信息时代的快速发展，用户的信息量与日倶增。海量信息的可视化围绕着“可读、逻辑可用”的目的传递信息，将枯燥繁琐的数据转为通俗易懂的图形化信息，提高用户体验。
[0003]传统方式编写的页面，针对不同的显示设备，如屏幕尺寸不同的移动手持设备，会出现无法适应屏幕的情况。尤其是对于不同分辨率的屏幕来说，固定宽度的界面，就会出现界面太大而超出屏幕或者界面太小出现大片空白的情况。不能自动响应用户的设备环境，使可视化设计的用户体验较差。
【发明内容】
[0004]有鉴于此，本发明的主要目的在于提供一种响应式图形化的生成方法，可以使绘制的页面内容尺寸适应图形化窗口尺寸。
[0005]为实现上述目的，本发明提供了一种响应式图形化的生成方法，包括:
[0006]从底层接口获取目标图形数据；
[0007]所述目标图形数据包括:各图标竖直方向尺寸与图形化窗口总高度的竖直尺寸比例，各图标水平方向尺寸与图形化窗口总宽度的水平尺寸比例，所述各图标竖直方向位置高度与图形化窗口总高度的竖直位置比例，以及所述各图标水平方向位置宽度与图形化窗口总宽度的水平位置比例；
[0008]确定当前图形化窗口的总高度与总宽度；
[0009]根据所述各图标与图形化窗口的所述竖直尺寸比例，水平尺寸比例，竖直位置比例，水平位置比例以及当前图形化窗口的总高度与总宽度，计算出所述各图标对应的位置坐标与尺寸；
[0010]根据所述各图标对应的位置坐标与尺寸，在所述当前图形化窗口中绘制所述各图标。
[0011]优选地，所述各图标的位置坐标为所述各图标中心点的坐标。
[0012]优选地，使用Canvas元素在所述当前图形化窗口中绘制所述各图标。
[0013]本发明还提供了一种响应式图形化的生成系统，包括:图形数据获取模块，图形化TS 口尺寸确定t吴块，图标尺寸确定t吴块和图标绘制t吴块；
[0014]所述图形数据获取模块用于从底层接口获取目标图形数据，所述目标图形数据包括:各图标竖直方向尺寸与图形化窗口总高度的竖直尺寸比例，各图标水平方向尺寸与图形化窗口总宽度的水平尺寸比例，所述各图标竖直方向位置高度与图形化窗口总高度的竖直位置比例，以及所述各图标水平方向位置宽度与图形化窗口总宽度的水平位置比例；
[0015]所述图形化窗口尺寸确定模块用于确定当前图形化窗口的总高度与总宽度；
[0016]所述图标尺寸确定模块用于根据所述各图标与图形化窗口的所述竖直尺寸比例，水平尺寸比例，竖直位置比例，水平位置比例以及当前图形化窗口的总高度与总宽度，计算出所述各图标对应的位置坐标与尺寸；
[0017]所述图标绘制模块用于根据所述各图标对应的位置坐标与尺寸，在所述当前图形化窗口中绘制所述各图标。
[0018]优选地，所述各图标的位置坐标为所述各图标中心点的坐标。
[0019]优选地，使用Canvas元素在所述当前图形化窗口中绘制所述各图标。
[0020]应用本发明提供的一种响应式图形化的生成方法与系统，从底层接口获取目标图形数据；所述目标图形数据包括:各图标竖直与水平方向尺寸分别与图形化窗口总高度的竖直尺寸和总宽度水平尺寸的比例，以及各图标竖直方向位置高度和水平方向位置宽度分别与图形化窗口总高度的竖直位置和总宽度水平位置的比例，确定当前图形化窗口的总高度与总宽度；根据所述各图标与图形化窗口的所述竖直尺寸比例，水平尺寸比例，竖直位置比例，水平位置比例以及当前图形化窗口的总高度与总宽度，计算出所述各图标对应的位置坐标与尺寸，并在所述当前图形化窗口中绘制所述各图标。各图标尺寸和位置与图形化窗口尺寸比例确定，根据不同的图形化窗口尺寸，各图标均可适应性地绘制，绘制的页面自动响应用户的设备环境，使可视化设计的用户体验较好。
【附图说明】
[0021]为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
[0022]图1为本发明一种响应式图形化的生成方法实施例一的流程图；
[0023]图2为本发明一种响应式图形化的生成系统实施例二的结构示意图。
【具体实施方式】
[0024]下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0025]实施例一:
[0026]本发明提供了一种响应式图形化的生成方法，图1示出了本发明响应式图形化的生成方法实施例一的流程图，包括:
[0027]步骤SlOl:从底层接口获取目标图形数据；
[0028]通过底层Rest Api应用程序编程接口获取目标图形数据，所述目标图形数据包括:各图标竖直方向尺寸与图形化窗口总高度的竖直尺寸比例，各图标水平方向尺寸与图形化窗口总宽度的水平尺寸比例，所述各图标竖直方向位置高度与图形化窗口总高度的竖直位置比例，以及所述各图标水平方向位置宽度与图形化窗口总宽度的水平位置比例；
[0029]步骤S102:确定当前图形化窗口的总高度与总宽度；
[0030]步骤S103:根据所述各图标与图形化窗口的所述竖直尺寸比例，水平尺寸比例，竖直位置比例，水平位置比例以及当前图形化窗口的总高度与总宽度，计算出所述各图标对应的位置坐标与尺寸；
[0031]步骤S104:根据所述各图标对应的位置坐标与尺寸，在所述当前图形化窗口中绘制所述各图标。
[0032]本实施例中需要绘制的各图标的尺寸与位置通过与图形化窗口尺寸的比例来表征，图标位置坐标设置为图标中心点的坐标，定义各图标的中心点为对应的一个节点，首先定义图形化窗口的总高度为winHeight，入口节点netO的初始高度坐标定义为winHeight/20，netO对应的入口图标的高度为winHeight/xp设定后续图标之间的高度差为winHeight/?Ο，以防止图标之间重合，后续的节点图标以netO为基准图标节点，节点netl对应的图标高度为winHeight/x2，因此节点netl的高度坐标为winHeight/20+winHeight/2x1+winHeight/10+winHeight/2x2o这样后续结点的高度取决于前一个图标节点坐标、前一个图标高度和本身的图标高度的和，下面的图标尺寸和位置坐标以此类推；
[0033]定义图形化窗口的总宽度为wWidth，入口节点图标netO的初始宽度坐标定义为wffidth/3, netO对应的入口图标的宽度为wWidth/yi。我们设定后续图标以初始图标为基准中心点，第二节点netl对应的图标宽度为wWidth/y2，因此netl的宽度坐标为wWidth/3+(wffidth/2y1-wffidth/2y2)，各图标在竖直方向已拉开距离，以第一个图标为基准，在水平方向上大图标中心点靠左，小图标中心点靠右，后续的节点图标以此类推生成；
[003