一种抗锯齿方法及终端与流程

1.本发明涉及图像处理领域，特别是涉及一种抗锯齿方法及终端。


背景技术：

2.在基于css3的web前端开发中，一般采用dom(document object model,文档对象模型)中设置style属性键值对“transform:rotate(xxdeg)”的方法绘制直线，当直线旋转到非水平或垂直的位置，直线边缘会产生严重的锯齿现象。
3.目前采用在transform属性中加入translatez(0)来消除锯齿现象，例如-webkit-transform:rotate(5deg)translatez(0)，但这种方案往往在某些主流浏览器，例如常见的谷歌浏览器中并不奏效，特别是在该直线dom元素不是直接附加transform属性，而是作为基于某个主dom元素的附属绝对定位dom元素的情况下锯齿现象尤为明显，在主dom元素旋转之后,附属的直线dom元素几乎百分之百会出现边缘锯齿现象。


技术实现要素：

4.本发明所要解决的技术问题是：提供一种抗锯齿方法及终端，消除使用dom绘制的直线进行旋转时出现的锯齿现象。
5.为了解决上述技术问题，本发明采用的一种技术方案为：
6.一种抗锯齿方法，包括步骤：
7.采用dom绘制直线；
8.接收对所述直线的旋转指令；
9.根据所述旋转指令旋转所述直线，并通过浏览器调用gpu对所述旋转后的直线进行高性能渲染。
10.为了解决上述技术问题，本发明采用的另一种技术方案为：
11.一种抗锯齿终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
12.采用dom绘制直线；
13.接收对所述直线的旋转指令；
14.根据所述旋转指令旋转所述直线，并通过浏览器调用gpu对所述旋转后的直线进行高性能渲染。
15.本发明的有益效果在于：通过浏览器调用gpu对旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，并且上述方法可以支持各种类型的浏览器，适用范围广，普适性高。
附图说明
16.图1为本发明实施例的一种抗锯齿方法的步骤示意图；
17.图2为本发明实施例的一种抗锯齿终端的结构示意图；
18.图3为本发明实施例中采用现有技术对旋转后的直线进行抗锯齿的效果图；
19.图4为本发明实施例中采用本发明所述技术方案对旋转后的直线进行抗锯齿的效果图。
具体实施方式
20.为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
21.请参照图1，一种抗锯齿方法，包括步骤：
22.采用dom绘制直线；
23.接收对所述直线的旋转指令；
24.根据所述旋转指令旋转所述直线，并通过浏览器调用gpu对所述旋转后的直线进行高性能渲染。
25.由上述描述可知，本发明的有益效果在于：通过浏览器调用gpu对旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，并且上述方法可以支持各种类型的浏览器，适用范围广，普适性高。
26.进一步地，所述通过浏览器调用gpu对所述旋转后的直线进行高性能渲染包括：
27.将所述直线的定位方式设置为绝对定位；
28.在与所述直线同级的位置添加具有预设大小的文本节点，并设置所述文本节点的定位方式为绝对定位，从而触发浏览器调用gpu对所述旋转后的直线进行高性能渲染。
29.由上述描述可知，在采用dom绘制直线时，通过将直线dom设置为绝对定位，并在所述直线dom的同级位置添加具有预设大小的绝对定位的文本节点，可以触发浏览器调用gpu对所述文本节点进行高性能渲染，由于所述直线dom是与所述文本节点同级的绝对定位元素，浏览器也会连带对所述直线dom进行高性能渲染，避免默认的初级渲染，所述方案不需要javascript脚本的辅助支持,仅仅只需要css样式与dom结构层面的改动，触发浏览器执行高性能渲染的方式非常巧妙，同时又很简单。
30.进一步地，所述文本节点为包含空白字符的文本节点。
31.由上述描述可知，通过将在所述直线dom同级位置添加的文本节点设置为空白节点，虽然同级节点的添加改动了所述直线的原dom结构，但对渲染结果没有任何影响，在图像视觉上没有区别。
32.进一步地，所述预设大小为具有预设范围的高度以及具有预设范围的宽度；
33.所述高度和宽度可自适应设置。
34.由上述描述可知，通过为文本节点设置预设范围的宽度和高度，可以满足触发浏览器调用gpu进行高性能渲染的条件，并且所述高度和宽度具有实际值即可，可以根据所述直线的dom结构作适应性的调整，使用灵活性较高。
35.进一步地，所述通过浏览器调用gpu对所述旋转后的直线进行高性能渲染包括：
36.判断旋转后的直线是否水平或垂直，若否，则通过浏览器调用gpu对所述旋转后的直线进行高性能渲染，若是，则不进行处理。
37.由上述描述可知，通过对所述直线旋转变换的角度进行判断，只有旋转后的位置为非水平或垂直时，浏览器才会调用gpu对所述旋转后的直线进行高性能渲染，当旋转后的位置为水平或垂直时，浏览器则采用默认的初级渲染，从而实现了只有在直线边缘出现锯齿现象时，浏览器才会为了消除锯齿现象采用高性能渲染，避免当直线边缘并没有出现锯齿现象时却对直线采用高性能渲染造成资源浪费，提高了浏览器性能。
38.请参照图2，一种抗锯齿终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
39.采用dom绘制直线；
40.接收对所述直线的旋转指令；
41.根据所述旋转指令旋转所述直线，并通过浏览器调用gpu对所述旋转后的直线进行高性能渲染。
42.由上述描述可知，本发明的有益效果在于：所述抗锯齿终端通过浏览器调用gpu对旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，并且上述方法可以支持各种类型的浏览器，适用范围广，普适性高。
43.进一步地，所述通过浏览器调用gpu对所述旋转后的直线进行高性能渲染包括：
44.将所述直线的定位方式设置为绝对定位；
45.在与所述直线同级的位置添加具有预设大小的文本节点，并设置所述文本节点的定位方式为绝对定位，从而触发浏览器调用gpu对所述旋转后的直线进行高性能渲染。
46.由上述描述可知，所述抗锯齿终端在采用dom绘制直线时，通过将直线dom设置为绝对定位，并在所述直线dom的同级位置添加具有预设大小的绝对定位的文本节点，可以触发浏览器调用gpu对所述文本节点进行高性能渲染，由于所述直线dom是与所述文本节点同级的绝对定位元素，浏览器也会连带对所述直线dom进行高性能渲染，避免默认的初级渲染，所述方案不需要javascript脚本的辅助支持,仅仅只需要css样式与dom结构层面的改动，触发浏览器执行高性能渲染的方式非常巧妙，同时又很简单。
47.进一步地，所述文本节点为包含空白字符的文本节点。
48.由上述描述可知，所述抗锯齿终端通过将所述直线dom同级位置添加的文本节点设置为空白节点，虽然同级节点的添加改动了所述直线的原dom结构，但对渲染结果没有任何影响，在图像视觉上没有区别。
49.进一步地，所述预设大小为具有预设范围的高度以及具有预设范围的宽度；
50.所述高度和宽度可自适应设置。
51.由上述描述可知，所述抗锯齿终端通过为文本节点设置预设范围的宽度和高度，可以满足触发浏览器调用gpu进行高性能渲染的条件，并且所述高度和宽度具有实际值即可，可以根据所述直线的dom结构作适应性的调整，使用灵活性较高。
52.进一步地，所述通过浏览器调用gpu对所述旋转后的直线进行高性能渲染包括：
53.判断旋转后的直线是否水平或垂直，若否，则通过浏览器调用gpu对所述旋转后的直线进行高性能渲染，若是，则不进行处理。
54.由上述描述可知，所述抗锯齿终端通过对所述直线旋转变换的角度进行判断，只有旋转后的位置为非水平或垂直时，浏览器才会调用gpu对所述旋转后的直线进行高性能
渲染，当旋转后的位置为水平或垂直时，浏览器则采用默认的初级渲染，从而实现了只有在直线边缘出现锯齿现象时，浏览器才会为了消除锯齿现象采用高性能渲染，避免当直线边缘并没有出现锯齿现象时却对直线采用高性能渲染造成资源浪费，提高了浏览器性能。
55.本发明上述抗锯齿的方法及终端可以应用于任何场景中的dom直线旋转绘制，具有通用性，以下通过具体实施方式进行说明：
56.本发明的实施例一为：
57.请参照图1，一种抗锯齿方法，包括步骤：
58.采用dom绘制直线；
59.接收对所述直线的旋转指令；
60.具体地，利用css3 transform:rotate(xxdeg)绘制各种角度的直线，其中“deg”表示单位度，“xx”为正数表示顺时针旋转，负数表示逆时针旋转；
61.根据所述旋转指令旋转所述直线，判断旋转后的直线是否水平或垂直，若否，则通过浏览器调用gpu对所述旋转后的直线进行高性能渲染，若是，则不进行处理；
62.具体地，其中“xx”为0、
±
90或
±
180则表示所述旋转后的直线处于水平或垂直位置，浏览器只执行默认的初级渲染；“xx”为除0、
±
90和
±
180之外的其它数值，则表示所述旋转后的直线处于非水平或者垂直的位置，浏览器调用gpu执行高性能渲染；
63.其中，浏览器的类型没有限制，可以为市面上任意一种，安装所述浏览器的终端显卡同样可以为所有市面上常规见到的显卡种类，并且对要渲染的网页类型没有要求，所有的网页类型均适用，使用场景的普适度很高。
64.本发明的实施例二为：
65.请参照图3-图4，在实施例一的基础上，对所述transform:rotate(xxdeg)中“xx”的值为-135，并且所述直线的dom元素不是直接附加transform属性，而是作为基于某个主dom元素的附属绝对定位dom元素；
66.现有技术通过在transform属性中加入translatez(0)来试图消除锯齿现象，最终结果如图3所示，可见下边缘锯齿化现象非常明显，所以采用在transform属性中加入translatez(0)在当该直线dom元素是基于某个主dom元素的附属绝对定位dom元素时并没有起到消除锯齿的作用；
67.本实施例对所述通过浏览器调用gpu对所述旋转后的直线进行高性能渲染进一步限定，包括：
68.将所述直线的定位方式设置为绝对定位；
69.具体地，所述设置为绝对定位的方式为相对于父级的绝对定位，即将position属性设置为absolute；
70.在与所述直线同级的位置添加具有预设大小的文本节点，并设置所述文本节点的定位方式为绝对定位，从而触发浏览器调用gpu对所述旋转后的直线进行高性能渲染；
71.具体地，同级节点指的是同属于某个父节点的直属兄弟dom节点，添加同级元素即是添加目标dom元素的兄弟dom元素，其中同级元素的定位必须是相对于父级的绝对定位元素，即style＝“position:absolute”；
72.本实施例的工作原理为：浏览器在渲染具有实际大小的绝对定位的文本节点时会调用gpu进行高性能渲染，与此同时，与所述文本节点同级的绝对定位元素也会连带使用高
性能渲染，通过在目标直线同级的位置添加所述文本节点，可以触发浏览器对所述文本节点和目标直线共同执行高性能渲染；
73.优选地，所述文本节点为包含空白字符的文本节点；
74.虽然同级节点的添加改动了所述直线的原dom结构，但空白节点的引入对渲染结果没有任何影响，在图像视觉上没有区别，渲染结果如图4所示，可见所述直线的下边缘锯齿已消失，直线变得光滑，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象；
75.将图3和图4进行对比可得，本实施例相比现有技术起到了明显的抗锯齿效果。
76.本发明的实施例三为：
77.在实施例二的基础上，所述预设大小为具有预设范围的高度以及具有预设范围的宽度；
78.所述高度和宽度可自适应设置；
79.具体地，本实施例中所述文本节点设置为1px宽与1px高；
80.在另一种可选的实施方式中，所述文本节点可以设置为100px宽与100px高；
81.其中，所述文本节点的宽度和高度只要具备实际性的高度和宽度就可以达到触发浏览器执行高性能渲染的目的，所述宽度和高度的具体值可以根据所述直线的dom结构和应用场景进行适应性的调整。
82.本发明的实施例四为：
83.一种抗锯齿终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述实施例一至实施例三中任一项所述抗锯齿方法。
84.综上所述，本发明提供的一种抗锯齿方法及终端，在采用dom绘制直线时，对直线旋转后的位置进行判断，当直线旋转到非水平和非垂直的位置时，触发浏览器调用gpu对旋转后的直线执行高性能渲染，因为高性能渲染具有对直线边缘的柔化效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，同时又避免了浏览器对处于水平或者垂直位置的直线进行高性能渲染，节约了浏览器的性能资源；并且触发浏览器执行高性能渲染的方式非常巧妙，具体包括通过将直线dom元素设置为绝对定位，并在所述直线dom元素的同级位置添加具有实际大小的绝对定位的文本节点，可以触发浏览器调用gpu对所述文本节点进行高性能渲染，由于所述直线dom元素是与所述文本节点同级的绝对定位元素，浏览器也会连带对所述直线dom元素进行高性能渲染，所述触发方式只涉及css样式与dom结构层面的改动，不需要javascript脚本的辅助支持，操作简单，而且所述文本节点为空白节点，进一步削弱了对直线原dom结构的影响，渲染结果在图像视觉上没有任何区别。
85.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。