CN109032742A - 一种画布清晰度兼容方法与装置 - Google Patents

Abstract

本发明提供了一种画布清晰度兼容方法与装置，涉及清晰度兼容技术领域。通过获取一设备预设定的画布容器的宽高与设备像素比，然后创建画布节点，并且，依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵，再依据所述画布节点获取画布背景对象，最后依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。本发明提供的画布清晰度兼容方法与装置，具有即使对于设备像素比大于1的设备，也能够实现清晰显示的效果。

Description

一种画布清晰度兼容方法与装置

技术领域

本发明涉及清晰度兼容技术领域，具体而言，涉及一种画布清晰度兼容方法与装置。

背景技术

随着互联网技术的发展，前端作为一个分支，在最近几年也得到蓬勃的发展。

其中，Canvas(画布)标签作为前端重要的一环，可达到让用户在不使用图片的情况下实现网页的图形设计。但是，对于一些设备像素比大于1的设备，直接采用画布作画时，会出现画布显示不清晰的问题。

有鉴于此，如何解决上述问题，是本领域技术人员关注的重点。

发明内容

有鉴于此，本发明的目的在于提供一种画布清晰度兼容方法、装置及电路，以解决使用单探头进行超声波测距存在盲区的问题。

为了实现上述目的，本发明实施例采用的技术方案如下：

一方面，本发明实施例提出一种一种画布清晰度兼容方法，所述画布清晰度兼容方法包括：

获取一设备预设定的画布容器的宽高与设备像素比；

创建画布节点，并依据所述画布容器的宽高确定所述画布的样式宽高，及依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高；

依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵；

依据所述画布节点获取画布背景对象；

依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。

另一方面，本发明实施例还提供了一种画布清晰度兼容装置，所述画布清晰度兼容装置包括：

数据获取单元，用于获取一设备预设定的画布容器的宽高与设备像素比；

画布节点创建单元，用于创建画布节点，并依据所述画布容器的宽高确定所述画布的样式宽高，及依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高；

转换矩阵获取单元，用于依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵；

背景对象获取单元，用于依据所述画布节点获取画布背景对象；

优化单元，用于依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。

相对现有技术，本发明具有以下有益效果：

本发明提供了一种画布清晰度兼容方法与装置，通过获取一设备预设定的画布容器的宽高与设备像素比，然后创建画布节点，并且，依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵，再依据所述画布节点获取画布背景对象，最后依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。由于本发明提供的画布清晰兼容度方法与装置能够通过画布背景对象与转换矩阵对画布进行优化，从而达到使画布更加清晰的效果，即使对于设备像素比大于1的设备，也能够实现清晰显示。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例提供的服务器的模块示意图。

图2示出了本发明实施例提供的画布清晰度兼容方法的流程图。

图3示出了本发明实施例提供的画布清晰度兼容装置的模块示意图。

图标：10-服务器；12-存储器；13-存储控制器；14-处理器；100-画布清晰度兼容装置；110-数据获取单元；120-容器创建单元；130-容器宽高设定单元；140-画布节点创建单元；150-转换矩阵获取单元；160-背景对象获取单元；170-优化单元。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，还需要说明的是，除非另有明确的规定和限定，术语“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。下面结合附图，对本发明的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

如图1所示，是本发明提供的服务器10的功能模块示意图。该服务器10包括画布清晰度兼容装置100、存储器12、存储控制器13以及处理器14。

所述存储器12、存储控制器13以及处理器14各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述画布清晰度兼容装置100包括至少一个可以软件或固件(firmware)的形式存储于所述存储器12中或固化在所述服务器10的操作系统(operating system，OS)中的软件功能模块。所述处理器14用于执行存储器12中存储的可执行模块，例如所述画布清晰度兼容装置100包括的软件功能模块或计算机程序。

其中，存储器12可以是，但不限于，随机存取存储器12(Random Access Memory，RAM)，只读存储器12(Read Only Memory，ROM)，可编程只读存储器12(Programmable Read-Only Memory，PROM)，可擦除只读存储器12(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器12(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器12用于存储程序，所述处理器14在接收到执行指令后，执行所述程序，前述本发明实施例任一实施例揭示的流过程定义的服务器10所执行的方法可以应用于处理器14中，或者由处理器14实现。

处理器14可能是一种集成电路芯片，具有信号的处理能力。上述的处理器14可以是通用处理器14，包括中央处理器14(Central Processing Unit，简称CPU)、网络处理器14(Network Processor，简称NP)等；还可以是数字信号处理器14(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器14可以是微处理器14或者该处理器14也可以是任何常规的处理器14等。

请参阅图2，是本发明较佳实施例提供的应用于图1所示的画布清晰度兼容方法的流程图。下面将对图2所示的具体流程进行详细阐述。

步骤S101，获取一设备预设定的画布容器的宽高与设备像素比。

对于设备像素比大于1的设备，直接用画布作画会带来清晰度的问题，因此，为了解决画布清晰度兼容问题，在本实施例中，采用画布背景对象的矩阵转换解决。

其中，画布背景对象由画布节点创建，因此，在本实施例中，需要先获取画布节点，而对于画布节点的获取，需依据画布容器进行获取。

在本实施例中，在服务器10中导入相关软件后，服务器10能够自动获取画布容器的宽高。

同时，服务器10还能够获取设备的设备像素比，设备像素比为一定值，且设备像素比通过服务器10从公共接口获取。

步骤S102，创建一样式为绝对定位的第一容器，并将所述第一容器套设于所述画布容器外。

我为了防止本实施例提供的画布干扰其他画布，在本实施例中，还需创建一样式为绝对定位的第一容器，并将所述第一容器套设于所述画布容器外。其中，绝对容器为防止与其它画布之间相互干扰的容器。

步骤S103，将所述第一容器的宽高设定为所述画布容器的宽高。

步骤S104，创建一样式为相对定位的第二容器，定义所述第二容器溢出时为隐藏，并将所述第二容器套设于所述第一容器外。

由于在实际的应用中，样式为绝对定位的第一容器并不占用空间，根据信息流的特性，会使样式为绝对定位的第一容器“飘起”，使得样式为绝对定位的第一容器无法正常使用。有鉴于此，为了解决该问题，服务器10还会创建一样式为相对定位的第二容器，定义所述第二容器溢出时为隐藏，并将所述第二容器套设于所述第一容器外。由于样式为相对定位的第二容器占用空间，将其套设于第一容器外，具有固定第一容器的作用，使得第一容器能够正常使用。

步骤S105，将所述第二容器的宽高设定为所述画布容器的宽高。

需要说明的是，在本实施例中，第一容器与第二容器均包括div容器，当然的，在其他的一些实施例中，第一容器与第二容器也可为其他样式容器，本实施例对此并不做任何限定。

步骤S106，创建画布节点，并依据所述画布容器的宽高确定所述画布的样式宽高，及依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高。

在获取了画布容器的宽高后，服务器10能够依据所述画布容器的宽高确定所述画布的样式宽高，同时依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高。

步骤S107，依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵。

在本实施例中，转换矩阵表示为transform(devicePixelRatio，0，0，devicePixelRatio，0，0)，其中，transform表示转换矩阵，而devicePixelRatio表示设备像素比。

因此，在确定了设备像素比之后，并且，由于设置矩阵需要预先设定画布的样式宽高和实际宽高，使得在指定的宽高的区域设定画布，依次据所述画布的样式宽高、画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵。

步骤S108，依据所述画布节点获取画布背景对象。

在获取了转换矩阵后，由于画布优化的方式为ctx.transform(devicePixelRatio，0，0，devicePixelRatio，0，0)，其中ctx表示画布背景对象，画布背景对象通过代码ctx＝canvas.getContext('2d')进行获取，其中，canvas表示画布节点，而getContext('2d')为公共方法，通过该公共方法能够依据画布节点获取画布背景对象。

步骤S109，依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。

在本实施例中，在获取了画布背景对象与转换矩阵后，能够依据画布背景对象与转换矩阵对所述画布进行优化，以使画布清晰。

第二实施例

请参阅图3，本发明较佳实施例提供的图1所示的画布清晰度兼容装置100的功能单元示意图。需要说明的是，本实施例所提供的画布清晰度兼容装置100，其基本原理及产生的技术效果和上述实施例相同，为简要描述，本发明实施例部分未提及之处，可参考上述的实施例中相应内容。画布清晰度兼容装置100包括：

数据获取单元110，用于获取一设备预设定的画布容器的宽高与设备像素比。

可以理解地，通过数据获取单元110可执行步骤S101。

容器创建单元120，用于创建一样式为绝对定位的第一容器，并将所述第一容器套设于所述画布容器外。

可以理解地，通过容器创建单元120可执行步骤S102。

容器宽高设定单元130，用于将所述第一容器的宽高设定为所述画布容器的宽高。

可以理解地，通过容器宽高设定单元130可执行步骤S103。

容器创建单元120，还用于创建一样式为相对定位的第二容器，定义所述第二容器溢出时为隐藏，并将所述第二容器套设于所述第一容器外。

可以理解地，通过容器创建单元120执行步骤S104。

容器宽高设定单元130，还用于将所述第一容器的宽高设定为所述画布容器的宽高。

可以理解地，通过容器宽高设定单元130执行步骤S105。

画布节点创建单元140，用于创建画布节点，并依据所述画布容器的宽高确定所述画布的样式宽高，及依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高。

可以理解地，通过画布节点创建单元140执行步骤S106。

转换矩阵获取单元150，用于依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵。

可以理解地，通过转换矩阵获取单元150可执行步骤S107。

背景对象获取单元160，用于依据所述画布节点获取画布背景对象。

可以理解地，通过背景对象获取单元160可执行步骤S108。

优化单元170，用于依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。

可以理解地，通过优化单元170可执行步骤S109。

综上所述，本发明提供了一种画布清晰度兼容方法与装置，通过获取一设备预设定的画布容器的宽高与设备像素比，然后创建画布节点，并且，依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵，再依据所述画布节点获取画布背景对象，最后依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。由于本发明提供的画布清晰兼容度方法与装置能够通过画布背景对象与转换矩阵对画布进行优化，从而达到使画布更加清晰的效果，即使对于设备像素比大于1的设备，也能够实现清晰显示。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

Claims (8)

1.一种画布清晰度兼容方法，其特征在于，所述画布清晰度兼容方法包括：

获取一设备预设定的画布容器的宽高与设备像素比；

创建画布节点，并依据所述画布容器的宽高确定所述画布的样式宽高，及依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高；

依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵；

依据所述画布节点获取画布背景对象；

依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。

2.如权利要求1所述的画布清晰度兼容方法，其特征在于，在所述创建画布节点的步骤之前，所述画布清晰度兼容方法还包括：

创建一样式为绝对定位的第一容器，并将所述第一容器套设于所述画布容器外；

将所述第一容器的宽高设定为所述画布容器的宽高。

3.如权利要求2所述的画布清晰度兼容方法，其特征在于，在所述创建画布节点的步骤之前，所述画布清晰度兼容方法还包括：

创建一样式为相对定位的第二容器，定义所述第二容器溢出时为隐藏，并将所述第二容器套设于所述第一容器外；

将所述第二容器的宽高设定为所述画布容器的宽高。

4.如权利要求3所述的画布清晰度兼容方法，其特征在于，所述第一容器与所述第二容器均包括div容器。

5.一种画布清晰度兼容装置，其特征在于，所述画布清晰度兼容装置包括：

数据获取单元，用于获取一设备预设定的画布容器的宽高与设备像素比；

画布节点创建单元，用于创建画布节点，并依据所述画布容器的宽高确定所述画布的样式宽高，及依据所述画布的样式宽高与所述设备像素比的乘积获取所述画布的实际宽高；

转换矩阵获取单元，用于依据所述画布的样式宽高、所述画布的实际宽高、设备像素比以及预存储的转换矩阵的公式求得所述设备的转换矩阵；

背景对象获取单元，用于依据所述画布节点获取画布背景对象；

优化单元，用于依据所述画布背景对象与所述转换矩阵对所述画布进行优化，以使画布清晰。

6.如权利要求5所述的画布清晰度兼容装置，其特征在于，所述画布清晰度兼容装置还包括：

容器创建单元，用于创建一样式为绝对定位的第一容器，并将所述第一容器套设于所述画布容器外；

容器宽高设定单元，用于将所述第一容器的宽高设定为所述画布容器的宽高。

7.如权利要求6所述的画布清晰度兼容装置，其特征在于，所述容器创建单元还用于创建一样式为相对定位的第二容器，定义所述第二容器溢出时为隐藏，并将所述第二容器套设于所述第一容器外；

所述容器宽高设定单元，还用于将所述第二容器的宽高设定为所述画布容器的宽高。

8.如权利要求7所述的画布清晰度兼容装置，其特征在于，所述第一容器与所述第二容器均包括div容器。