CN112837277A - 基于地理数据的碾压遍数工艺的渲染方法、存储介质和电子装置 - Google Patents

Abstract

本发明公开一种基于地理数据的碾压遍数工艺的渲染方法、存储介质和电子装置，其中渲染方法包括在HTML5网页的初始画布上叠加绘制图层，建立碾压遍数与像素色值的对应关系；获取压路机的地理定位数据；如果符合预设条件，则在工作画布上绘制压路机经过的区域；在工作画布上遍历压路机经过的区域的像素点，获取每个像素点的色值，进而得到每个像素点对应的碾压遍数；将每个像素点对应的碾压遍数以对应的色值渲染到展示画布上。本发明只需要对每个像素点进行处理，就可以获取到对应像素点位置的碾压遍数，而对Canvas画布的应用，对数据量的处理能力也有了很大提升，提供给用户精准、连贯的碾压遍数工艺的展示画面，增强了用户体验。

Description

基于地理数据的碾压遍数工艺的渲染方法、存储介质和电子 装置

技术领域

本发明涉及图像处理技术领域，特别是基于地理数据的碾压遍数工艺的渲染方法、存储介质和电子装置。

背景技术

目前对于压路机碾压遍数工艺的表现形式无非于文字的描述以及基本的网页格子表现。无法对实际压路机碾压遍数工艺能够精准、连贯的表现出来，而且对于大数据量的处理传统的表现方式就显得有点力不从心，页面卡顿。

对于识别压路机碾压遍数的方法，如申请号为201910645216.6的中国专利申请“一种自动识别压路机碾压遍数的方法和装置”，通过对压路机的位置坐标进行识别，计算得到该压路机碾压所在道路的遍数。其解决的是碾压遍数的自动识别，对于如何方便的展示表现没有提出更好的解决办法。

发明内容

为了克服现有技术中的上述问题，本发明提供一种基于地理数据的碾压遍数工艺的渲染方法、存储介质和电子装置，解决了传统的压路机碾压遍数工艺的表现形式不够精准连贯以及对大数据处理低下的问题。

本发明第一方面，提供一种基于地理数据的碾压遍数工艺的渲染方法，包括以下步骤，

在HTML5网页的初始画布上叠加绘制图层，建立碾压遍数与像素色值的对应关系；

获取压路机的地理定位数据；

如果两次地理定位数据之间的距离符合预设条件，则在工作画布上绘制压路机经过的区域；

在所述工作画布上遍历所述压路机经过的区域的像素点，获取每个像素点的色值，根据所述碾压遍数与像素色值的对应关系，得到每个像素点对应的碾压遍数；

将每个像素点对应的碾压遍数以对应的色值渲染到展示画布上。

通过采用HTML5的Canvas(画布)技术可以精准获取到网页页面上不同透明度与像素点色值对应的关系，通过Canvas技术将每一次压路机碾压过的区域面积转换成像素点，所以只需要对每个像素点进行处理，就可以获取到对应像素点位置的遍数。

进一步的，所述在HTML5网页的初始画布上叠加绘制图层，建立碾压遍数与像素色值的对应关系具体为，在初始画布上依次叠加绘制固定宽度为1个像素、长度为从1个像素开始每次自增值为1、累计N次的N个矩形，N的范围为从1到碾压遍数的最大值；遍历初始画布上的所有像素点，获得所有像素点的色值和透明度值，建立对应遍数与像素色值的对应关系并存储，清除初始画布的内容。碾压遍数越多，对应矩形的像素点颜色越深。

更进一步的，N个矩形的填充颜色为rgb(255，0,0，0.05)。由于Canvas的数据属性包括RGBA值，所以遍历循环的像素点每4次即为对应的遍数值。

进一步的，所述预设条件为压路机两次地理定位数据的距离大于0.2米且小于20米。

进一步的，所述压路机经过的区域为以压路机的宽度为宽、以压路机两次地理定位数据之间的距离为长的区域。

进一步的，所述展示画布的大小与所述工作画布相同。在工作画布上画出各压路机压过的区域，但不对用户显示，需要将工作画布的各个位置的像素点对应的碾压遍数以不同的色值绘制到展示画布上，用户即可以直观的看到。

进一步的，所述压路机的地理定位数据按照时间顺序升序排列和存储。

本发明第二方面，提供一种计算机可读的存储介质，所述计算机可读的存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一技术方案中所述的方法。

本发明第三方面，提供一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一技术方案中所述的方法。

采用HTML5的Canvas技术可以精准获取到页面上不同透明度与像素点色值对应的关系，通过Canvas技术将每一次压路机碾压过的区域面积转换成像素点，所以只需要对每个像素点进行处理，就可以获取到对应像素点位置的碾压遍数，而且Canvas画布是一个整体的画布图层，对数据量的处理能力也有了很大提升，最终提供给用户的是精准、连贯的碾压遍数工艺的展示画面，这种展示更加直观，增强了用户体验。

附图说明

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

图1为本发明实施例基于地理数据的碾压遍数工艺的渲染方法流程图；

图2为图1实施例中像素色值与碾压遍数关系生成示意图；

图3为压路机碾压工作区域示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

参见图1，为本发明一个实施例的碾压遍数工艺渲染方法，主要采用了HTML5技术及其Canvas技术。其中HTML5是HTML(HyperTextMarkupLanguage，超文本标记语言)最新的修订版本，2014年10月由W3C(万维网联盟)完成标准制定，目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS(层叠样式表)和JavaScript在内的一套技术组合，具有原生视音频支持、原生动画自持、本地数据库和socket网络套接字等新特性。

Canvas(画布)是HTML5中新增的一个重要元素，专门用来绘制图像，在网页上放置一个Canvas元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。HTML5的Canvas使用脚本(通常是JavaScript)在网页上绘制图像，在传统的标准分辨率显示设备(简称标准显示设备)上前端Canvas搭配JavaScript语言编写绘图代码涉及的每个像素与显示设备的最小显示单元一一对应，最终渲染输出的图像在此显示设备上可获得相对最清晰的效果。

本实施例提供的碾压遍数工艺的渲染方法主要包括：

S1、在HTML5网页的初始画布上叠加绘制图层，建立碾压遍数与像素色值的对应关系。

具体的，在初始画布上使用Canvas对象的绘制填充器fillRect(x,y,w,h)依次叠加绘制固定宽度为1个像素、长度为从1个像素开始每次自增值为1、累计N次的N个矩形，N的范围为从1到碾压遍数的最大值，例如100；通过Canvas对象的像素提取器getImageData(x,y,w,h)，遍历初始画布上的所有像素点，获得所有像素点的色值和透明度值，碾压遍数越多，则对应矩形的像素点颜色越深，如图2所示。fillRect(x,y,w,h)和getImageData(x,y,w,h)中的x和y分别为像素点的横坐标和纵坐标，w和h分别表示矩形的长和宽。

作为优选的实施方式，N个矩形的填充颜色为rgb(255，0,0，0.05)，这里的rgb值仅为举例说明用，填充颜色为不同深度的灰色，实际还可以是其他颜色。由于Canvas的数据属性包括RGBA值，所以遍历循环的像素点每4次即为对应的遍数值。

建立对应遍数N与像素色值的对应关系并存放到寄存器中，清除初始画布的内容。

S2、获取压路机的地理定位数据。

压路机的定位数据以坐标(x,y)表示，因为压路机沿直线行走碾压路面，故其定位位置只在x轴或y轴上有变化。

具体的，通过HTML5的websocket功能建立起与后台服务器的消息连接机制，当后台有压路机设备的定位数据产生时，及时推送到浏览器前端页面，页面及时将定位数据保存到JavaScript数组中。需要说明的是，定位数据需要具有一定的特征性，也就是定位数据必须是按照时间维度排序升序排列。

S3、如果两次地理定位数据之间的距离符合预设条件，则在工作画布上绘制压路机经过的区域。

作为优选的实施例，预设条件可选的为压路机两次地理定位数据的距离大于0.2米且小于20米。需要说明的是，预设条件可根据碾压路段的长度和压路机的大小调整，上述数值仅为举例说明用，不用于限制本发明。

具体的，压路机经过的区域为以压路机的宽度为宽、以压路机两次地理定位数据之间的距离为长的区域。在工作画布上用Canvas对象的绘制填充器fillRect(x,y,w,h)来绘制上述压路机经过的区域，参见图3。

S4、在工作画布上遍历压路机经过的区域的像素点，获取每个像素点的色值，根据碾压遍数与像素色值的对应关系，得到每个像素点对应的碾压遍数。

具体的，采用Canvas的像素提取器getImageData(x,y,w,h)获取到碾压工作区域中各个像素点的信息，根据碾压遍数与像素色值的对应关系，得到相应区域碾压的遍数。

S5、将每个像素点对应的碾压遍数以对应的色值渲染到展示画布上。

具体的，采用Canvas的像素提取器getImageData(x,y,w,h)，在与工作画布上的像素点相同位置的展示画布上绘制对应的色值。因此展示画布的大小需与工作画布相同。

本发明通过Canvas技术将每一次压路机碾压过的区域面积转换成像素点，所以只需要对每个像素点进行处理，就可以获取到对应像素点位置的碾压遍数，而且Canvas画布是一个整体的画布图层，对数据量的处理能力也有了很大提升，最终提供给用户的是精准、连贯的碾压遍数工艺的展示画面，这种展示更加直观，增强了用户体验。

本发明还提供一种计算机可读的存储介质，所述计算机可读的存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一技术方案中所述的方法。

本发明还提供一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一技术方案中所述的方法。

本发明方案所公开的技术手段不仅限于上述实施方式所公开的技术手段，还包括由以上技术特征任意组合所组成的技术方案。

Claims (9)

1.基于地理数据的碾压遍数工艺的渲染方法，其特征在于，包括

在HTML网页5的初始画布上叠加绘制图层，建立碾压遍数与像素色值的对应关系；

获取压路机的地理定位数据；

如果两次地理定位数据之间的距离符合预设条件，则在工作画布上绘制压路机经过的区域；

在所述工作画布上遍历所述压路机经过的区域的像素点，获取每个像素点的色值，根据所述碾压遍数与像素色值的对应关系，得到每个像素点对应的碾压遍数；

将每个像素点对应的碾压遍数以对应的色值渲染到展示画布上。

2.根据权利要求1所述的基于地理数据的碾压遍数工艺的渲染方法，其特征在于，所述在HTML5网页的初始画布上叠加绘制图层，建立碾压遍数与像素色值的对应关系具体为，在初始画布上依次叠加绘制固定宽度为1个像素、长度为从1个像素开始每次自增值为1、累计N次的N个矩形，N的范围为从1到碾压遍数的最大值；遍历初始画布上的所有像素点，获得所有像素点的色值和透明度值，建立对应遍数与像素色值的对应关系并存储，清除初始画布的内容。

3.根据权利要求2所述的基于地理数据的碾压遍数工艺的渲染方法，其特征在于，N个矩形的填充颜色为rgb(255，0,0，0.05)。

4.根据权利要求1所述的基于地理数据的碾压遍数工艺的渲染方法，其特征在于，所述预设条件为两次地理定位数据的距离大于0.2米且小于20米。

5.根据权利要求1所述的基于地理数据的碾压遍数工艺的渲染方法，其特征在于，所述压路机经过的区域为以压路机的宽度为宽、以压路机两次地理定位数据之间的距离为长的区域。

6.根据权利要求1所述的基于地理数据的碾压遍数工艺的渲染方法，其特征在于，所述展示画布的大小与所述工作画布相同。

7.根据权利要求1所述的基于地理数据的碾压遍数工艺的渲染方法，其特征在于，所述压路机的地理定位数据按照时间顺序升序排列和存储。

8.一种计算机可读的存储介质，其特征在于，所述计算机可读的存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行所述权利要求1至7任一项中所述的方法。

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述权利要求1至7任一项中所述的方法。

Images