一种抗锯齿方法及终端技术

本发明专利技术公开一种抗锯齿方法及终端，包括：采用dom绘制直线；接收对所述直线的旋转指令；根据所述旋转指令旋转所述直线，并通过浏览器调用GPU对所述旋转后的直线进行高性能渲染；本发明专利技术通过浏览器调用GPU对所述旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，而且本发明专利技术所述技术方案，可以支持各种类型的浏览器，适用范围广，普适性高。普适性高。普适性高。

【技术实现步骤摘要】
一种抗锯齿方法及终端


[0001]本专利技术涉及图像处理领域，特别是涉及一种抗锯齿方法及终端。

技术介绍

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

技术实现思路

[0004]本专利技术所要解决的技术问题是：提供一种抗锯齿方法及终端，消除使用dom绘制的直线进行旋转时出现的锯齿现象。
[0005]为了解决上述技术问题，本专利技术采用的一种技术方案为：
[0006]一种抗锯齿方法，包括步骤：
[0007]采用dom绘制直线；
[0008]接收对所述直线的旋转指令；
[0009]根据所述旋转指令旋转所述直线，并通过浏览器调用GPU对所述旋转后的直线进行高性能渲染。
[0010]为了解决上述技术问题，本专利技术采用的另一种技术方案为：
[0011]一种抗锯齿终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0012]采用dom绘制直线；
[0013]接收对所述直线的旋转指令；
[0014]根据所述旋转指令旋转所述直线，并通过浏览器调用GPU对所述旋转后的直线进行高性能渲染。
[0015]本专利技术的有益效果在于：通过浏览器调用GPU对旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，并且上述方法可以支持各种类型的浏览器，适用范围广，普适性高。
附图说明
[0016]图1为本专利技术实施例的一种抗锯齿方法的步骤示意图；
[0017]图2为本专利技术实施例的一种抗锯齿终端的结构示意图；
[0018]图3为本专利技术实施例中采用现有技术对旋转后的直线进行抗锯齿的效果图；
[0019]图4为本专利技术实施例中采用本专利技术所述技术方案对旋转后的直线进行抗锯齿的效果图。
具体实施方式
[0020]为详细说明本专利技术的
技术实现思路
、所实现目的及效果，以下结合实施方式并配合附图予以说明。
[0021]请参照图1，一种抗锯齿方法，包括步骤：
[0022]采用dom绘制直线；
[0023]接收对所述直线的旋转指令；
[0024]根据所述旋转指令旋转所述直线，并通过浏览器调用GPU对所述旋转后的直线进行高性能渲染。
[0025]由上述描述可知，本专利技术的有益效果在于：通过浏览器调用GPU对旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，并且上述方法可以支持各种类型的浏览器，适用范围广，普适性高。
[0026]进一步地，所述通过浏览器调用GPU对所述旋转后的直线进行高性能渲染包括：
[0027]将所述直线的定位方式设置为绝对定位；
[0028]在与所述直线同级的位置添加具有预设大小的文本节点，并设置所述文本节点的定位方式为绝对定位，从而触发浏览器调用GPU对所述旋转后的直线进行高性能渲染。
[0029]由上述描述可知，在采用dom绘制直线时，通过将直线dom设置为绝对定位，并在所述直线dom的同级位置添加具有预设大小的绝对定位的文本节点，可以触发浏览器调用GPU对所述文本节点进行高性能渲染，由于所述直线dom是与所述文本节点同级的绝对定位元素，浏览器也会连带对所述直线dom进行高性能渲染，避免默认的初级渲染，所述方案不需要JavaScript脚本的辅助支持,仅仅只需要css样式与dom结构层面的改动，触发浏览器执行高性能渲染的方式非常巧妙，同时又很简单。
[0030]进一步地，所述文本节点为包含空白字符的文本节点。
[0031]由上述描述可知，通过将在所述直线dom同级位置添加的文本节点设置为空白节点，虽然同级节点的添加改动了所述直线的原dom结构，但对渲染结果没有任何影响，在图像视觉上没有区别。
[0032]进一步地，所述预设大小为具有预设范围的高度以及具有预设范围的宽度；
[0033]所述高度和宽度可自适应设置。
[0034]由上述描述可知，通过为文本节点设置预设范围的宽度和高度，可以满足触发浏览器调用GPU进行高性能渲染的条件，并且所述高度和宽度具有实际值即可，可以根据所述直线的dom结构作适应性的调整，使用灵活性较高。
[0035]进一步地，所述通过浏览器调用GPU对所述旋转后的直线进行高性能渲染包括：
[0036]判断旋转后的直线是否水平或垂直，若否，则通过浏览器调用GPU对所述旋转后的直线进行高性能渲染，若是，则不进行处理。
[0037]由上述描述可知，通过对所述直线旋转变换的角度进行判断，只有旋转后的位置为非水平或垂直时，浏览器才会调用GPU对所述旋转后的直线进行高性能渲染，当旋转后的位置为水平或垂直时，浏览器则采用默认的初级渲染，从而实现了只有在直线边缘出现锯齿现象时，浏览器才会为了消除锯齿现象采用高性能渲染，避免当直线边缘并没有出现锯齿现象时却对直线采用高性能渲染造成资源浪费，提高了浏览器性能。
[0038]请参照图2，一种抗锯齿终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0039]采用dom绘制直线；
[0040]接收对所述直线的旋转指令；
[0041]根据所述旋转指令旋转所述直线，并通过浏览器调用GPU对所述旋转后的直线进行高性能渲染。
[0042]由上述描述可知，本专利技术的有益效果在于：所述抗锯齿终端通过浏览器调用GPU对旋转后的直线进行高性能渲染，避免默认的初级渲染，所述高性能渲染可以对直线边缘进行柔化，增强视觉效果，从而消除使用dom绘制的直线进行旋转时出现的锯齿现象，并且上述方法可以支持各种类型的浏览器，适用范围广，普适性高。
[0043]进一步地，所述通过浏览器调用GPU对所述旋转后的直线进行高性能渲染包括：
[0044]将所述直线的定位方式设置为绝对定位；
[本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种抗锯齿方法，其特征在于，包括步骤：采用dom绘制直线；接收对所述直线的旋转指令；根据所述旋转指令旋转所述直线，并通过浏览器调用GPU对所述旋转后的直线进行高性能渲染。2.根据权利要求1所述的一种抗锯齿方法，其特征在于，所述通过浏览器调用GPU对所述旋转后的直线进行高性能渲染包括：将所述直线的定位方式设置为绝对定位；在与所述直线同级的位置添加具有预设大小的文本节点，并设置所述文本节点的定位方式为绝对定位，从而触发浏览器调用GPU对所述旋转后的直线进行高性能渲染。3.根据权利要求1所述的一种抗锯齿方法，其特征在于，所述文本节点为包含空白字符的文本节点。4.根据权利要求2或3所述的一种抗锯齿方法，其特征在于，所述预设大小为具有预设范围的高度以及具有预设范围的宽度；所述高度和宽度可自适应设置。5.根据权利要求1至3中任一项所述的一种抗锯齿方法，其特征在于，所述通过浏览器调用GPU对所述旋转后的直线进行高性能渲染包括：判断旋转后的直线是否水平或垂直，若否，则通过浏览器调用GPU对所述旋转后的直线进行高性能渲染，若是，则不进行处理。6.一种抗锯齿终端，包括存储器、处理器及存储在存储器上并可...

【专利技术属性】
技术研发人员：刘德建，黄梦飞，郭玉湖，陈宏，
申请(专利权)人：福建天泉教育科技有限公司，
类型：发明
国别省市：