CN111176647B - 一种构建表盘对象的方法及系统 - Google Patents

Abstract

本发明公开了一种构建表盘对象的方法及系统，该方法包括：根据预设的关联原则更新预设指针控件的值，预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性；根据指针元素CSS属性及伪元素，对指针控件进行颜色渲染，得到渲染后的指针控件颜色；根据表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各指针之间的逻辑变化；根据各指针之间的逻辑变化、指针控件及渲染后的指针控件颜色，构建目标表盘对象。本发明通过增加新的控件元素、属性及伪元素，根据预设事件属性对各控件值进行更新，构建目标表盘对象，实现可扩展的复杂控件支持，且具有接口简单，性能好，方便扩展，安全性好等优点。

Description

一种构建表盘对象的方法及系统

技术领域

本发明涉及计算机信息处理技术领域，具体涉及一种构建表盘对象的方法及系统。

背景技术

目前，超文本标记语言(Hypertext Marked Language,HTML)页面主要用于文字和图片混排的文档内容，以及用于网页的布局排版和渲染的层叠样式表(Cascading StyleSheets,CSS)相关规范，其中，主要是基于矩形区域进行的，比如用来控制其宽度和高度的属性(width和height)及用于控制HTML元素布局的属性等。随着HTML5及CSS3技术的发展，很多运行在PC、智能手机上的应用(App)，开始使用Web技术来为用户呈现内容，并作为人机交互的界面，但是，将网页前端技术用于客户端应用的开发时，基于矩形块的CSS样式表，需要多个标签元素，并且每个标签元素又对应多个CSS属性，增加了系统内存的开销，甚至画面会出现停顿和抖动的现象，无法简单有效地为各种复杂的控件提供有效支持，并且执行效率低，占用内存大。

发明内容

有鉴于此，本发明实施例提供了一种构建表盘对象的方法及系统，以解决现有技术无法为各种复杂的控件提供有效支持，并且执行效率低，占用内存大的技术问题。

为达到上述目的，本发明提供如下技术方案：

第一方面，本发明实施例提供一种构建表盘对象的方法，包括如下步骤：根据预设的关联原则更新预设指针控件的值，所述预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性；根据所述指针元素CSS属性及伪元素，对所述指针控件进行颜色渲染，得到渲染后的指针控件颜色；根据所述表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各所述指针之间的逻辑变化；根据各所述指针之间的逻辑变化、指针控件及渲染后的指针控件颜色，构建目标表盘对象。

在一实施例中，当未设置所述指针元素CSS属性的初始值时，将指针元素属性值定义为相应的指针元素CSS属性值；根据指针控件值及指针元素CSS属性值，实现对指针控件值的更新。

在一实施例中，监听指针控件值的响应变化，当指针控件值发生变化时获取响应请求数据；根据所述响应请求数据对应的指针控件值、当前指针的各指针控件值及表盘元素的预设事件属性对应的响应函数，得到响应结果；根据所述响应结果，对各指针控件值进行更新，确定各所述指针之间的逻辑变化。

在一实施例中，根据各所述指针之间的逻辑变化及指针控件，对指针控件值进行识别与解析，得到对应的解析控件值；获取预设渲染节点的成员变量；根据预设函数，将各所述解析控件值配置到各所述成员变量中，得到当前成员变量；根据各所述当前成员变量及预设的相应函数，对指针控件进行布局及渲染，得到目标表盘对象。

在一实施例中，将属性名称及标签名称保存至相应文件；根据指针控件属性名称及标签名称生成对应的哈希值；根据所述哈希值，获取各预设类的成员函数；根据各指针控件对应的所述成员函数对各指针控件值进行解析，得到对应的解析控件值。

在一实施例中，获取表盘元素的逻辑坐标，根据表盘元素属性值、预设缩放比例及所述表盘元素的逻辑坐标，将表盘元素的逻辑坐标变换为设备坐标，确定画布尺寸及旋转中心点坐标；根据预设旋转方向判别规则，确定指针旋转方向；根据所述指针旋转方向及各指针元素CSS属性值，确定指针角度及指针端点坐标；根据所述指针角度及指针端点坐标，确定指针控件渐变颜色取值；根据预设绘图函数、所述表盘元素的中心点坐标、所述指针角度及所述指针端点坐标绘制指针，对指针控件进行布局及渲染，得到所述目标表盘对象。

在一实施例中，获取所述指针元素CSS属性中的初始旋转角度值及终止旋转角度值；当终止旋转角度值大于初始旋转角度值时，确定顺时针方向为指针旋转方向；当终止旋转角度值小于初始旋转角度值时，确定逆时针方向为指针旋转方向。

在一实施例中，根据所述指针元素CSS属性值中的最小量程属性值、最大量程属性值及所述初始旋转角度值与所述终止旋转角度值的差值，确定指针的每个旋转角度对应的量程值；根据获取的所述指针元素CSS属性中的指针实际值及预设方法，确定指针当前值；根据所述指针当前值、最小量程属性值、指针旋转方向及每个旋转角度对应的量程值，确定当前指针的角度；根据获取的指针针眼坐标及所述旋转中心点坐标，得到指针针眼相对于旋转中心点的偏移量，确定指针针尾坐标；获取指针元素属性中的指针量程区域宽度值及高度值中的最小值，根据所述最小值及预设缩放比例对所述指针针尾坐标进行缩放，确定指针端点坐标。

在一实施例中，如果所述指针实际值小于所述最小量程属性值，则将所述最小量程属性值确定为指针当前值；如果所述指针实际值大于所述最大量程属性值，则将所述最大量程属性值确定为指针当前值。

在一实施例中，根据所述指针元素CSS属性值中的旋转角度值，确定指针控件渐变角度范围；根据所述指针当前值、所述最小量程属性值、所述指针旋转方向、每个旋转角度对应的量程值及指针控件渐变角度范围，确定指针控件渐变颜色取值。

第二方面，本发明实施例提供一种构建表盘对象的系统，包括，更新模块，用于根据预设的关联原则更新预设指针控件值，所述预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性；指针控件颜色渲染模块，用于根据所述指针元素CSS属性及伪元素，对所述指针控件颜色进行渲染，得到渲染后的指针控件颜色；逻辑变化确定模块，用于根据所述表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各所述指针之间的逻辑变化；目标表盘对象构建模块，用于根据各所述指针之间的逻辑变化及指针控件，构建目标表盘对象。

第三方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储计算机指令，所述计算机指令被处理器执行时实现本发明实施例第一方面的构建表盘对象的方法。以使至少一个处理器执行本发明实施例第一方面的多设备的自适应控制方法。

第四方面，本发明实施例提供一种存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行本发明实施例第一方面的构建表盘对象的方法。

本发明技术方案，具有如下优点：

1.本发明提供的构建表盘对象的方法及系统，通过增加新的控件元素及相应属性，根据预设事件属性对各控件值进行更新，确定各指针之间的逻辑变化关系，然后构建目标表盘对象，实现可扩展的复杂控件支持，并且可直接内嵌到HTML页面中，和其他HTML元素及CSS属性完全兼容，且具有接口简单，性能好，方便扩展，安全性好等优点。

2.本发明提供的构建表盘对象的方法及系统，通过对各指针控件的识别与解析，实现对各元素的布局与渲染，简化了指针控件的定义和应用，降低了页面的内存占用，提高了交互性能和用户体验，避免了使用大量div元素来组成指针图形，从而降低了页面的内存占用，同时避免了在指针值变化时的大量重新布局的计算，提高了系统的性能；将指针的内部处理交由用户代理实现，故而可获得更好的性能以及交互体验；通过引入新的CSS属性，可让HTML文档作者定义指针控件的渲染属性，一方面可重用CSS带来的便利，另一方面带给前端开发者更多的灵活性，简化了前端开发者开发脚本的工作量，降低了前端开发者的学习难度。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的构建表盘对象的方法的具体示例的流程图；

图2为本发明实施例提供的构建表盘对象的方法的更新预设指针控件的值的流程图；

图3为本发明实施例提供的构建表盘对象的方法的确定各指针之间的逻辑变化的流程图；

图4为本发明实施例提供的构建表盘对象的方法的构建目标表盘对象的流程图；

图5为本发明实施例提供的构建表盘对象的方法的对指针控件值进行识别与解析的流程图；

图6为本发明实施例提供的构建表盘对象的方法的对指针控件进行布局及渲染的流程图；

图7为本发明实施例提供的构建表盘对象的方法的确定指针旋转方向的流程图；

图8为本发明实施例提供的构建表盘对象的系统的示意图；

图9为本发明实施例提供的电子设备一个具体示例的组成图。

具体实施方式

下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，还可以是两个元件内部的连通，可以是无线连接，也可以是有线连接。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

此外，下面所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

实施例1

本发明实施例提供一种构建表盘对象的方法，应用于各种复杂的表盘及指针控件实现的场景，如图1所示，该方法包括如下步骤：

步骤S1：根据预设的关联原则更新预设指针控件的值，预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性。

本发明实施例中，首先定义两个新的元素，表盘元素himeter和指针元素hihand，其中表盘元素定义了一个表盘可以包含一个或者多个指针，指针元素定义了一根指针的基本形态及相对的行为。himeter元素支持如下属性：width和height属性，这两个属性表示该himeter元素的固有尺寸，用于定义himeter元素所使用的渲染画布大小，当HTML文档未定义这两个属性时，用户代理分别使用200和150作为默认值。当其内部的hihand元素属性值发生变化时，可以不用重新布局，而直接渲染hihand元素。hihand元素元素支持如下属性，min属性：用于定义对该指针所对应量程的最小值；max属性：用于定义对该指针所对应量程的最大值；value属性：用于定义对该指针所对应的当前值；width和height属性：这两个属性表示该hihand元素的固有尺寸，用于定义hihand元素所使用的渲染画布大小，也可以理解为在整个量程范围内，指针扫过区域的宽和高；low属性：根据业务实际需要，将仪表量程分成三段，此属性指定了低段和中段的分割值；high属性：根据业务实际需要，将仪表量程分成三段，此属性指定了中段和高段的分割值；optimum属性：根据业务实际需要，指定仪表值的优选点。比如汽车的耗油量是越低越好，极限速度是越高越好，而经济时速则太高或者太低都不好，居中最好，该值既是标记在量程范围内，何处为优，何处为劣，以便使用不同的表现方式。

在实际应用中，各种仪表中一个表盘包含多个指针的情形非常常见，此时只需要用一个himeter包裹器将多个hihand元素包裹在一起，如下所示：

根据上面的描述，我们可知上述的HTML片段，定义了一个表盘，其中包含了两根指针，分别为：名称为speed的速度表，表的量程最小值是0，最大值是160，当前值是100，指针扫过长为260，宽为260的面积；还有一个名称为temp的温度表，表的量程最小值是-25，最大值是70，当前值是15，指针扫过长为200，宽为200的面积；当以上指针控件被整合到表单(form)中时，当点submit提交按钮时，用户代理可直接整合用户的当前可选项，并自动提交给后台服务器，而不需要额外的Javascript脚本处理。

本发明实施例中，因为各仪表盘的使用场合不同，互相之间都存在着一定的差异。作为一个标准控件，既要满足80％以上的通用功能，也要允许终端用户有一定的发挥空间，因此通过比较和抽象，为hihand元素实现了以下属性，为最终用户提供了一定的灵活性。-hi-hand-type：该属性定义了指针的类型；-hi-min：该属性定义了指针所对应量程的最小值，其与hihand元素中的min属性相关联，设置该属性的目的，是为适应在同一仪表中显示不同量程的数据；-hi-max：该属性定义了指针所对应量程的最大值，其与hihand元素中的max属性相关联；-hi-value：该属性定义了指针的当前值，其与hihand元素中的value属性相关联；-hi-hand-starting-angle：该属性定义了指针在最小量程时候的偏转角度；-hi-hand-end-angle：该属性定义了指针在最大量程时候的偏转角度；-hi-hand-center-y：该属性定义了指针旋转中心的相对y坐标值；-hi-hand-center-x：该属性定义了指针旋转中心的相对x坐标值；-hi-hand-center：该属性为-hi-hand-center-x和-hi-hand-center-y的简写；-hi-annulus-inner-radius：该属性定义了弧形条带的内径，默认值是固有高度的25％；-hi-annulus-outer-radius：该属性定义了弧形条带的外径，默认值是固有高度的50％；-hi-annulus-radii：该属性为-hi-annulus-inner-radius和-hi-annulus-outer-radius的简写；-hi-hand-fill-style：该属性指定了弧形条带的填充方法。

需要说明的是，本发明实施例中的各元素、元素属性及CSS属性都是根据实际系统需求进行设定本，在实际应用中，还可以包含其他属性或取值，本发明实施例并不以此为限。

步骤S2：根据所述指针元素CSS属性及伪元素，对所述指针控件进行颜色渲染，得到渲染后的指针控件颜色。

本发明实施例中，还引进了三个伪元素，用来指定在不同值范围的时候，背景颜色，颜色渐变等CSS属性。-hi-hand-optimum-value：该属性定义了当前值从业务意义上，处于优选值时，渲染需要的CSS属性；-hi-hand-suboptimum-value：该属性定义了当前值从业务意义上，处于最差值范围时，渲染需要的CSS属性；-hi-hand-even-less-good-value：该属性定义了当前值从业务意义上，处于次于优选值范围时，渲染需要的CSS属性。

步骤S3：根据表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各指针之间的逻辑变化。

本发明实施例中，在同一个表盘存在多个指针中，这些指针互相之间存在着逻辑关系，因此对指针控件值的变化定义几个事件属性，为最终用户提供一个实现指针之间逻辑的入口，通过这些预设事件属性对当前指针的各指针控件值进行更新，确定各指针之间的逻辑变化。

步骤S4：根据各指针之间的逻辑变化及指针控件，构建目标表盘对象。

本发明实施例中，根据各指针之间的逻辑变化及指针控件，实现各元素，构建目标表盘对象。需要说明的是，在实际应用中，构件的目标表盘对象是可以根据实际需要进行改变的，本发明实施例并不以此为限。

本发明提供的构建表盘对象的方法，通过增加新的控件元素及相应属性，根据预设事件属性对各控件值进行更新，确定各指针之间的逻辑变化关系，然后构建目标表盘对象，实现可扩展的复杂控件支持，并且可直接内嵌到HTML页面中，和其他HTML元素及CSS属性完全兼容，且具有接口简单，性能好，方便扩展，安全性好等优点。

在一具体实施例中，如图2所示，执行步骤S1的过程可以具体包括如下步骤：

步骤S11：当未设置指针元素CSS属性的初始值时，将指针元素属性值定义为相应的指针元素CSS属性值。

本发明实施例中，根据CSS属性优先原则，关联CSS属性和hihand中的某些属性，以-hi-value为例具体说明：当未设置CSS中的-hi-value属性，仅设置了HTML中的value属性时，改变value值，同时改变-hi-value的值，指针发生变化；当未设置CSS中的hi-value属性，仅设置了HTML中的value属性时，通过相关函数添加并改变-hi-value值，同时改变value值，指针发生变化，但此后改变value值，不能改变-hi-value值，指针不能发生变化。

步骤S12：根据指针控件值及指针元素CSS属性值，实现对指针控件值的更新。

本发明实施例中，根据指针控件值及指针元素CSS属性值，实现对指针控件值的更新，当同时设置了CSS中的-hi-value属性和HTML中的value时，改变-hi-value值，同时改变value值，指针发生变化，但改变value值，不能改变-hi-value值，指针不能发生变化。所以用户在使用该控件的时候，应该设置并改变CSS中的属性值，而HTML中的属性值，只是作为初始值使用。需要说明的是，本发明实施例中，仅仅以-hi-value为例进行说明，其他有关联的CSS属性的优先性与此属性一致，在实际应用中，也可以根据实际需要设定优先原则，本发明并不以此为限。

在实际应用中，为上述设置的指针添加CSS属性，如下所示：

/>

在一具体实施例中，如图3所示，执行步骤S3的过程可以具体包括如下步骤：

步骤S31：监听指针控件值的响应变化，当指针控件值发生变化时获取响应请求数据。

本发明实施例中，通过onchange事件属性监听指针控件值的响应变化，当指针控件值(value或者hi-value)发生变化时，用户代理触发此事件，脚本可以监听此事件，完成一些动态调整工作，比如水表，个位数指针发生变化时，其余各指针也要发生变化。需要说明的是，监听指针控件值的onchange事件属性仅仅是举例进行说明，也可以通过其他事件属性进行监听，本发明并不以此为限。

步骤S32：根据响应请求数据对应的指针控件值、当前指针的各指针控件值及表盘元素的预设事件属性对应的响应函数，得到响应结果。

本发明实施例中，根据响应请求数据对应的指针控件值、当前指针的各指针控件值及表盘元素的预设事件属性对应的响应函数，得到响应结果，其中当指针开始旋转时触发预设事件属性onanimationstart，在某些开关量中，逻辑关系只和边界值有关，在动画变化中，减少不必要的逻辑判断，当指针停止旋转时触发onanimationend事件属性，得到响应结果，提高运行性能。需要说明的是，本发明中当指针开始旋转及停止旋转时触发的预设事件属性仅仅举例进行说明，在实际应用中也可以选择其他事件属性，本发明并不以此为限。

步骤S33：根据响应结果，对各指针控件值进行更新，确定各指针之间的逻辑变化。

本发明实施例中，根据响应结果，对各指针控件值进行更新，确定各指针之间的逻辑变化，举例进行说明一个指针的变化，导致另外一个指针值的变化：

在一具体实施例中，如图4所示，执行步骤S4的过程可以具体包括如下步骤：

步骤S41：根据各指针之间的逻辑变化及指针控件，对指针控件值进行识别与解析，得到对应的解析控件值。

本发明实施例中，根据各指针之间的逻辑变化及指针控件，进行himeter和hihand元素的识别与相应属性的解析，得到对应的解析控件值。

步骤S42：获取预设渲染节点的成员变量。

步骤S43：根据预设函数，将各解析控件值配置到各成员变量中，得到当前成员变量。

本发明实施例中，获取预设渲染节点的成员变量后，根据预设函数，将各解析控件值配置到各成员变量中，得到当前成员变量，需要说明的是，本发明中的预设函数是由各解析控件值决定的，本发明并不以此为限。

步骤S44：根据各当前成员变量及预设的相应函数，对指针控件进行布局及渲染，得到目标表盘对象。

本发明实施例中，根据各当前成员变量及预设的相应函数，对指针控件进行布局及渲染，其中根据属性取值类型的不同，以及明确的含义，分别根据当前成员变量，在预设的相应函数完成，目标表盘对象的构建。

在一具体实施例中，如图5所示，执行步骤S41的过程可以具体包括如下步骤：

步骤S411：将属性名称及标签名称添加到对应文件。

本发明实施例中，将新增加的himeter和hihand以及两个元素对应的属性名称，添加到属性名称文件HTMLAttributeNames.in和标签名称文件HTMLTagNames.in中。

步骤S412：根据指针控件属性名称及标签名称生成对应的哈希值。

本发明实施例中，在编译的过程中，将会根据属性名称及标签名称，自动为各个元素和相应属性，形成对应的哈西值，并赋予唯一固定的ID。

步骤S413：根据哈希值，获取各预设类的成员函数。

本发明实施例中，分别根据himeter和hihand的两个新类以完成在表单中的数据传递，根据各哈希值获取相应的上述各预设类的成员函数。

步骤S414：根据各指针控件对应的成员函数对各指针控件值进行解析，得到对应的解析控件值。

本发明实施例中，根据属性取值类型的不同，以及明确的含义，在文件中，按照各个属性对应的ID，分别编写各个属性的解析代码，并最终转化成所定义的类型，得到对应的解析控件值。

在一具体实施例中，如图6所示，在一具体实施例中，执行步骤S44的过程可以具体包括如下步骤：

步骤S441：获取表盘元素的逻辑坐标，根据表盘元素属性值、预设缩放比例及表盘元素的逻辑坐标，将表盘元素的逻辑坐标变换为设备坐标，确定画布尺寸及旋转中心点坐标。

本发明实施例中，为了使表盘对象能够适应更多的系统，首先获得用户代理的默认缩放比例，将himeter元素的逻辑坐标变换为设备坐标，通过himeter的width和hight属性，以及缩放比例，设备坐标，最终确定画布尺寸及位置，并确定其中心点坐标。需要说明的是，默认缩放比例是根据系统需要进行设置的，本发明并不以此为限。

步骤S442：根据预设旋转方向判别规则，确定指针旋转方向。

本发明实施例中，旋转指针控件的构建中，首先需要根据预设旋转方向判别规则，确定指针旋转方向，其中预设旋转方向判别规则是预先设定的，在实际应用中可以根据需要进行变化，本发明并不以此为限。

步骤S443：根据指针旋转方向及各指针元素CSS属性值，确定指针角度及指针端点坐标。

本发明实施例中，根据指针旋转方向及各指针元素CSS属性值，确定指针角度及指针端点坐标，为后续更加准确的绘制目标指针元素对象奠定基础，增加目标对象的适应性。

步骤S444：根据所述指针角度及指针端点坐标，确定指针控件渐变颜色取值。

步骤S445：根据预设绘图函数、表盘元素的中心点坐标、指针角度及指针端点坐标绘制指针，对指针控件进行布局及渲染，得到目标表盘对象。

在一具体实施例中，如图7所示，在一具体实施例中，执行步骤S442的过程可以具体包括如下步骤：

步骤S4421：获取指针元素CSS属性中的初始旋转角度值及终止旋转角度值。

本发明实施例中，在画布的坐标系中，取垂直向上为角度0，顺时针为正，逆时针为负，在CSS属性-hi-hand-starting-angle、-hi-hand-end-angle取值时，遵循一个原则：其值是与角度0之间的绝对角度。这意味着，如果指针转二圈达到终止角度，则终止角度与初始角度之差的绝对值一定大于720度。

步骤S4422：当终止旋转角度值大于初始旋转角度值时，确定顺时针方向为指针旋转方向。

步骤S4423：当终止旋转角度值小于初始旋转角度值时，确定逆时针方向为指针旋转方向。

在一具体实施例中，执行步骤S443的过程可以具体包括如下步骤：

步骤S4431：根据指针元素CSS属性值中的最小量程属性值、最大量程属性值及初始旋转角度值与终止旋转角度值的差值，确定指针的每个旋转角度对应的量程值。

本发明实施例中，根据指针元素CSS属性值中的最小量程属性值、最大量程属性值及初始旋转角度值与终止旋转角度值的差值，确定指针的每个旋转角度对应的量程值，确定了每个旋转角度对应的量程值后，就可以完成旋转指针的每个旋转角度的绘制。

步骤S4432：根据获取的指针元素CSS属性中的指针实际值及预设方法，确定指针当前值。

本发明实施例中，根据获取的指针元素CSS属性中的指针实际值及预设方法，确定指针当前值，完成当前指针的绘制。

步骤S4433：根据指针当前值、最小量程属性值、指针旋转方向及每个旋转角度对应的量程值，确定当前指针的角度。

本发明实施例中，根据当前值(并非总是等于-hi-value)、-hi-min、旋转方向、每度对应的量程值，最终计算指针所对应的角度。

步骤S4434：根据获取的指针针眼坐标及旋转中心点坐标，得到指针针眼相对于旋转中心点的偏移量，确定指针针尾坐标。

本发明实施例中，根据属性-hi-needle-anchor-x、-hi-needle-anchor-x，以及旋转中心坐标，确定指针在水平位置时指针尾的坐标。

步骤S4435：获取指针元素属性中的指针量程区域宽度值及高度值中的最小值，根据最小值及预设缩放比例对指针针尾坐标进行缩放，确定指针端点坐标。

本发明实施例中，根据width、hight，取其中小值，并缩小适当比例，确定指针在水平位置时，指针端点的坐标。调用GUI相关绘图函数接口，绘制水平指针，并旋转至当前值对应角度。

在一具体实施例中，执行步骤S4432的过程可以具体包括如下步骤：

步骤S44321：如果指针实际值小于最小量程属性值，则将最小量程属性值确定为指针当前值。

本发明实施例中，判断当前值-hi-value是否在量程内，当-hi-value小于-hi-min，则设置当前值等于-hi-min。

步骤S44322：如果指针实际值大于最大量程属性值，则将最大量程属性值确定为指针当前值。

在一具体实施例中，执行步骤S444的过程可以具体包括如下步骤：

步骤S4441：根据所述指针元素CSS属性值中的旋转角度值，确定指针控件渐变角度范围。

本发明实施例中，根据-hi-hand-starting-angle、-hi-hand-end-angle计算弧形渐变的角度范围。

步骤S4442：根据所述指针当前值、所述最小量程属性值、所述指针旋转方向、每个旋转角度对应的量程值及指针控件渐变角度范围，确定指针控件渐变颜色取值。

本发明实施例中，根据当前值(并非总是等于-hi-value)、-hi-min、旋转方向、每度对应的量程值，最终计算当前弧形需要绘制的角度范围；根据当前绘制的角度、弧形渐变的角度范围、前一个渐变色和下一个渐变色计算出当前角度的颜色，即确定指针控件渐变颜色取值；从0度开以，以0.5度为步进，以弧形渐变的角度范围和当前弧形需要绘制的范围为界，调用GUI相关函数接口，绘制渐变。

本发明实施例中的构建表盘对象的方法，通过对各指针控件的识别与解析，实现对各元素的布局与渲染，简化了指针控件的定义和应用，降低了页面的内存占用，提高了交互性能和用户体验，避免了使用大量div元素来组成指针图形，从而降低了页面的内存占用，同时避免了在指针值变化时的大量重新布局的计算，提高了系统的性能；将指针的内部处理交由用户代理实现，故而可获得更好的性能以及交互体验；通过引入新的CSS属性，可让HTML文档作者定义指针控件的渲染属性，一方面可重用CSS带来的便利，另一方面带给前端开发者更多的灵活性，简化了前端开发者开发脚本的工作量，降低了前端开发者的学习难度。

实施例2

本发明实施例提供一种构建表盘对象的系统，如图8所示，包括：

更新模块1，用于根据预设的关联原则更新预设指针控件值，所述预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性；此模块执行实施例1中的步骤S1所描述的方法，在此不再赘述。

指针控件颜色渲染模块2，用于根据所述指针元素CSS属性及伪元素，对所述指针控件颜色进行渲染，得到渲染后的指针控件颜色；此模块执行实施例1中的步骤S2所描述的方法，在此不再赘述。

逻辑变化确定模块3，用于根据表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各指针之间的逻辑变化；此模块执行实施例1中的步骤S3所描述的方法，在此不再赘述。

目标表盘对象构建模块4，用于根据各指针之间的逻辑变化及指针控件，构建目标表盘对象；此模块执行实施例1中的步骤S4所描述的方法，在此不再赘述。

本发明提供的构建表盘对象的系统，通过增加新的控件元素及相应属性，根据预设事件属性对各控件值进行更新，确定各指针之间的逻辑变化关系，然后构建目标表盘对象，实现可扩展的复杂控件支持；通过对各指针控件的识别与解析，实现对各元素的布局与渲染，简化了指针控件的定义和应用，降低了页面的内存占用，提高了交互性能和用户体验，避免了使用大量div元素来组成指针图形，从而降低了页面的内存占用，同时避免了在指针值变化时的大量重新布局的计算，提高了系统的性能；将指针的内部处理交由用户代理实现，故而可获得更好的性能以及交互体验；通过引入新的CSS属性，可让HTML文档作者定义指针控件的渲染属性，一方面可重用CSS带来的便利，另一方面带给前端开发者更多的灵活性，简化了前端开发者开发脚本的工作量，降低了前端开发者的学习难度。

实施例3

本发明实施例提供一种电子设备，如图9所示，包括：至少一个处理器401，例如CPU(Central Processing Unit，中央处理器)，至少一个通信接口403，存储器404，至少一个通信总线402。其中，通信总线402用于实现这些组件之间的连接通信。其中，通信接口403可以包括显示屏(Display)、键盘(Keyboard)，可选通信接口403还可以包括标准的有线接口、无线接口。存储器404可以是高速RAM存储器(Ramdom Access Memory，易挥发性随机存取存储器)，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器404可选的还可以是至少一个位于远离前述处理器401的存储装置。其中处理器401可以执行实施例1的构建表盘对象的方法。存储器404中存储一组程序代码，且处理器401调用存储器404中存储的程序代码，以用于执行实施例1的构建表盘对象的方法。

其中，通信总线402可以是外设部件互连标准(peripheral componentinterconnect，简称PCI)总线或扩展工业标准结构(extended industry standardarchitecture，简称EISA)总线等。通信总线402可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一条线表示，但并不表示仅有一根总线或一种类型的总线。

其中，存储器404可以包括易失性存储器(英文：volatile memory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)，硬盘(英文：hard diskdrive，缩写：HDD)或固降硬盘(英文：solid-state drive，缩写：SSD)；存储器404还可以包括上述种类的存储器的组合。

其中，处理器401可以是中央处理器(英文：central processing unit，缩写：CPU)，网络处理器(英文：network processor，缩写：NP)或者CPU和NP的组合。

其中，处理器401还可以进一步包括硬件芯片。上述硬件芯片可以是专用集成电路(英文：application-specific integrated circuit，缩写：ASIC)，可编程逻辑器件(英文：programmable logic device，缩写：PLD)或其组合。上述PLD可以是复杂可编程逻辑器件(英文：complex programmable logic device，缩写：CPLD)，现场可编程逻辑门阵列(英文：field-programmable gate array，缩写：FPGA)，通用阵列逻辑(英文：generic arraylogic,缩写：GAL)或其任意组合。

可选地，存储器404还用于存储程序指令。处理器401可以调用程序指令，实现如本申请执行实施例1中的构建表盘对象的方法。

本发明实施例还提供一种电子可读存储介质，电子可读存储介质上存储有电子可执行指令，该电子可执行指令可执行实施例1的构建表盘对象的方法。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random AccessMemory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固降硬盘(Solid-State Drive，SSD)等；存储介质还可以包括上述种类的存储器的组合。

显然，上述实施例仅仅是为清楚地说明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引申出的显而易见的变化或变动仍处于本发明创造的保护范围之中。

Claims (12)

1.一种构建表盘对象的方法，其特征在于，包括，

根据预设的关联原则更新预设指针控件的值，所述预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性；

根据所述指针元素CSS属性及伪元素，对所述指针控件进行颜色渲染，得到渲染后的指针控件颜色；

根据所述表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各所述指针之间的逻辑变化，包括：

监听指针控件值的响应变化，当指针控件值发生变化时获取响应请求数据，

根据所述响应请求数据对应的指针控件值、当前指针的各指针控件值及表盘元素的预设事件属性对应的响应函数，得到响应结果，

根据所述响应结果，对各指针控件值进行更新，确定各所述指针之间的逻辑变化；

根据各所述指针之间的逻辑变化、指针控件及渲染后的指针控件颜色，构建目标表盘对象。

2.根据权利要求1所述的构建表盘对象的方法，其特征在于，所述根据预设的关联原则更新预设指针控件值的步骤，包括：

当未设置所述指针元素CSS属性的初始值时，将指针元素属性值定义为相应的指针元素CSS属性值；

根据指针控件值及指针元素CSS属性值，实现对指针控件值的更新。

3.根据权利要求1所述的构建表盘对象的方法，其特征在于，所述根据各所述指针之间的逻辑变化及指针控件，构建目标表盘对象的步骤，包括：

根据各所述指针之间的逻辑变化及指针控件，对指针控件值进行识别与解析，得到对应的解析控件值；

获取预设渲染节点的成员变量；

根据预设函数，将各所述解析控件值配置到各所述成员变量中，得到当前成员变量；

根据各所述当前成员变量及预设的相应函数，对指针控件进行布局及渲染，得到目标表盘对象。

4.根据权利要求3所述的构建表盘对象的方法，其特征在于，所述根据各所述指针之间的逻辑变化及指针控件，对指针控件值进行识别与解析，得到对应的解析控件值的步骤，包括：

将属性名称标签名称保存至相应文件；

根据指针控件属性名称及标签名称生成对应的哈希值；

根据所述哈希值，获取各预设类的成员函数；

根据各指针控件对应的所述成员函数对各指针控件值进行解析，得到对应的解析控件值。

5.根据权利要求3所述的构建表盘对象的方法，其特征在于，所述根据各所述当前成员变量及预设的相应函数，对指针控件进行布局及渲染，得到目标表盘对象的步骤，包括：

获取表盘元素的逻辑坐标，根据表盘元素属性值、预设缩放比例及所述表盘元素的逻辑坐标，将表盘元素的逻辑坐标变换为设备坐标，确定画布尺寸及旋转中心点坐标；

根据预设旋转方向判别规则，确定指针旋转方向；

根据所述指针旋转方向及各指针元素CSS属性值，确定指针角度及指针端点坐标；

根据所述指针角度及指针端点坐标，确定指针控件渐变颜色取值；

根据预设绘图函数、所述表盘元素的中心点坐标、所述指针角度、所述指针端点坐标及指针控件渐变颜色取值绘制指针，对指针控件进行布局及渲染，得到所述目标表盘对象。

6.根据权利要求5所述的构建表盘对象的方法，其特征在于，所述根据预设旋转方向判别规则，确定指针旋转方向的步骤，包括：

获取所述指针元素CSS属性中的初始旋转角度值及终止旋转角度值；

当终止旋转角度值大于初始旋转角度值时，确定顺时针方向为指针旋转方向；

当终止旋转角度值小于初始旋转角度值时，确定逆时针方向为指针旋转方向。

7.根据权利要求6所述的构建表盘对象的方法，其特征在于，所述根据所述指针旋转方向各指针元素CSS属性值，确定指针角度及指针端点坐标的步骤，包括：

根据所述指针元素CSS属性值中的最小量程属性值、最大量程属性值及所述初始旋转角度值与所述终止旋转角度值的差值，确定指针的每个旋转角度对应的量程值；

根据获取的所述指针元素CSS属性中的指针实际值及预设方法，确定指针当前值；

根据所述指针当前值、最小量程属性值、指针旋转方向及每个旋转角度对应的量程值，确定当前指针的角度；

根据获取的指针针眼坐标及所述旋转中心点坐标，得到指针针眼相对于旋转中心点的偏移量，确定指针针尾坐标；

获取指针元素属性中的指针量程区域宽度值及高度值中的最小值，根据所述最小值及预设缩放比例对所述指针针尾坐标进行缩放，确定指针端点坐标。

8.根据权利要求7所述的构建表盘对象的方法，其特征在于，所述根据获取的所述指针元素CSS属性中的指针实际值及预设方法，确定指针当前值的步骤，包括：

如果所述指针实际值小于所述最小量程属性值，则将所述最小量程属性值确定为指针当前值；

如果所述指针实际值大于所述最大量程属性值，则将所述最大量程属性值确定为指针当前值。

9.根据权利要求7所述的构建表盘对象的方法，其特征在于，所述根据所述指针角度及指针端点坐标，确定指针控件渐变颜色取值的步骤，包括：

根据所述指针元素CSS属性值中的旋转角度值，确定指针控件渐变角度范围；

根据所述指针当前值、所述最小量程属性值、所述指针旋转方向、每个旋转角度对应的量程值及指针控件渐变角度范围，确定指针控件渐变颜色取值。

10.一种构建表盘对象的系统，其特征在于，包括，

更新模块，用于根据预设的关联原则更新预设指针控件值，所述预设指针控件至少包括：表盘元素、表盘元素属性、指针元素、指针元素属性及指针元素CSS属性；

指针控件颜色渲染模块，用于根据所述指针元素CSS属性及伪元素，对所述指针控件颜色进行渲染，得到渲染后的指针控件颜色；

逻辑变化确定模块，用于根据所述表盘元素的预设事件属性对当前指针的各指针控件值进行更新，确定各所述指针之间的逻辑变化，包括：

监听指针控件值的响应变化，当指针控件值发生变化时获取响应请求数据，

根据所述响应请求数据对应的指针控件值、当前指针的各指针控件值及表盘元素的预设事件属性对应的响应函数，得到响应结果，

根据所述响应结果，对各指针控件值进行更新，确定各所述指针之间的逻辑变化；

目标表盘对象构建模块，用于根据各所述指针之间的逻辑变化及指针控件，构建目标表盘对象。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储计算机指令，所述计算机指令被处理器执行时实现如权利要求1-9中任一项所述的构建表盘对象的方法。

12.一种电子设备，其特征在于，包括：

存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行如权利要求1-9中任一项所述的构建表盘对象的方法。

Images