CN115965702A - 一种矢量图形渲染方法、装置及电子设备 - Google Patents

一种矢量图形渲染方法、装置及电子设备 Download PDF

Info

Publication number
CN115965702A
CN115965702A CN202211575193.4A CN202211575193A CN115965702A CN 115965702 A CN115965702 A CN 115965702A CN 202211575193 A CN202211575193 A CN 202211575193A CN 115965702 A CN115965702 A CN 115965702A
Authority
CN
China
Prior art keywords
rendering
vector graphics
color
pixel
determining
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211575193.4A
Other languages
English (en)
Inventor
雷学成
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Hikvision Digital Technology Co Ltd
Original Assignee
Hangzhou Hikvision Digital Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Hikvision Digital Technology Co Ltd filed Critical Hangzhou Hikvision Digital Technology Co Ltd
Priority to CN202211575193.4A priority Critical patent/CN115965702A/zh
Publication of CN115965702A publication Critical patent/CN115965702A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • Image Generation (AREA)

Abstract

本申请公开了一种矢量图形渲染方法、装置及电子设备,涉及图像处理技术领域,可用于以低复杂度的方式实现矢量图形在任意指定方向上的渐变色渲染。该方法包括:根据矢量图形的渲染方向,确定与渲染方向垂直的起始线;渲染方向用于指示矢量图形的渐变色变化方向;根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离;对于矢量图形中的各个像素,根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色;其中,矢量图形在起始线上的像素的颜色为渲染起始色。

Description

一种矢量图形渲染方法、装置及电子设备
技术领域
本申请涉及图形处理技术领域,尤其涉及一种矢量图形渲染方法、装置及电子设备。
背景技术
随着近年来计算机技术的发展,地理信息系统(geographic informationsystem,GIS)在城市规划、地下管线管理、市政设施、房地产和交通管理等领域具有越来越重要的应用价值,而基于Internet技术的网络地理信息系统(WebGIS)则是GIS技术发展的新趋势之一。
目前,WebGIS在对地图中的矢量图形进行渐变色渲染的方案为:在对矢量图形三角剖分过程中,添加若干以填充中心为圆心圆的辅助线,剖分出更复杂的镶嵌三角形,并根据三角形顶点距离填充中心点的距离来计算剖分出来的三角形顶点的颜色值;进而根据各个三角形顶点的颜色值,来实现对该矢量图形的渐变色渲染。
上述渐变色渲染方案由于需要添加若干以填充中心为圆心圆的辅助线,导致复杂度较高。并且,上述渐变色渲染方案还不能根据用户的需要实现任意指定方向上的渐变色渲染。
发明内容
本申请实施例提供一种矢量图形渲染方法、装置及电子设备,可以用于以低复杂度的方式实现矢量图形在任意指定方向上的渐变色渲染。
第一方面,提供一种矢量图形渲染方法,该方法包括:根据矢量图形的渲染方向,确定与渲染方向垂直的起始线;渲染方向用于指示矢量图形的渐变色变化方向;根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离;对于矢量图形中的各个像素,根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色;其中,矢量图形在起始线上的像素的颜色为渲染起始色。
本申请实施例所提供的技术方案至少带来以下有益效果:对于任意渲染方向(也即渐变色变化方向),均可以定位出与该渲染方向垂直的起始线。进而,基于该起始线,定位出矢量图形的各个像素从起始线开始沿渲染方向的颜色渐变情况,使得矢量图形的渲染方向也与像素的颜色的渐变方向一致,实现矢量图形在任意指定方向上的渐变色渲染。另外,相比于相关的渐变色渲染方案需要添加若干以填充中心为圆心圆的辅助线,本申请实施例提供的技术方案仅需要添加一个辅助线(也即上述起始线),因此本申请实施例提供的技术方案的复杂度较低,有利于节约渲染过程中耗费的计算资源。
在一些实施例中,上述根据矢量图形的渲染方向,确定与渲染方向垂直的起始线,包括:确定渲染方向对应的渲染角度,渲染角度为矢量图形所在的二维坐标系中的第一坐标轴的正方向沿第一方向与渲染方向之间的夹角的角度;将矢量图形在二维坐标系中围绕矢量图形的形心沿第二方向旋转渲染角度;其中,第一方向与第二方向相反,第一方向为顺时针方向或逆时针方向;在二维坐标系中确定旋转后的矢量图形的最小外接矩形;其中,最小外接矩形的第一边与二维坐标系中的第一坐标轴平行;最小外接矩形的第二边与二维坐标系中的第二坐标轴平行,最小外接矩形的第二边在第一坐标轴上的坐标值小于或等于旋转后的矢量图形中任一像素在第一坐标轴上的坐标值;第二坐标轴与第一坐标轴相互垂直;将最小外接矩形的第二边在二维坐标系中围绕矢量图形的形心沿第一方向旋转渲染角度;将旋转后的第二边作为起始线。
应理解,以第一坐标轴为水平方向且第二坐标轴为竖直方向为例,矢量图形在屏幕上显示时,屏幕的各个像素一般在水平方向和/或竖直方向均匀排列,因此在渲染方向倾斜(例如相对于竖直方向或水平方向倾斜)的情况下,从规则排列的屏幕像素中确定出与倾斜的渲染方向垂直的起始线计算难度较高,运算量较大。因此可以考虑将渲染方向沿第二方向旋转为水平方向或者竖直方向后,通过构建最小外接矩形得到竖直方向或水平方向的起始线,再将竖直方向或水平方向的起始线沿与第二方向相反的第一方向旋转,进而确定出起始线。基于此,可以减少确定起始线时的运算量,提高渲染效率。
在一些实施例中,上述根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离,包括:以最小外接矩形的第一边的长度作为最大渲染距离。
类似地,仍以第一坐标轴为水平方向且第二坐标轴为竖直方向为例,矢量图形在屏幕上显示时,屏幕的各个像素一般在水平方向和/或竖直方向均匀排列,在渲染方向倾斜(例如相对于竖直方向或水平方向倾斜)的情况下,计算矢量图形在倾斜的渲染方向上的最大渲染距离的难度较高,运算量较大。因此可以考虑将渲染方向沿第二方向旋转为水平方向或者竖直方向后,再确定最大渲染距离。基于此,可以减少确定最大渲染距离时的运算量,提高渲染效率。
在一些实施例中,上述根据矢量图形的渲染方向,确定与渲染方向垂直的起始线,包括:确定矢量图形在渲染方向上的起始点和终止点;将经过起始点且与渲染方向垂直的线确定为起始线。基于此,可以在不旋转矢量图形的情况下,确定矢量图形的起始线。
在一些实施例中,上述根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离,包括:将经过终止点且与渲染方向垂直的线确定为终止线;将起始线与终止线之间的距离确定为最大渲染距离。基于此,可以在不旋转矢量图形的情况下,确定矢量图形在渲染方向上的最大渲染距离。
在一些实施例中,上述确定矢量图形在渲染方向上的起始点和终止点,包括:经过矢量图形的形心作垂直于渲染方向的第一直线;第一直线将矢量图像分割为第一区域和第二区域,第一区域为矢量图形中从第一直线沿渲染方向的正方向覆盖的区域,第二区域为矢量图形中从第一直线沿渲染方向的负方向覆盖的区域;将第一区域中与第一直线的垂直距离最大的像素确定为终止点;将第二区域中与第一直线的垂直距离最大的像素确定为起始点。
基于此,可以选出矢量地图中最靠近渲染方向的正方向的终止点,和矢量图形中最靠近渲染方向的负方向的起始点。
在一些实施例中,上述根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色,包括:确定像素到起始线的垂直距离与最大渲染距离的比值;根据比值,从渲染起始色到渲染终止色的渐变色中确定出像素的颜色。
基于此,可以使得顶点的颜色随着垂直距离与最大渲染距离的比值的变化而均匀渐变,实现渐变色的平滑处理。
第二方面,提供一种矢量图形渲染装置,包括:预处理模块和像素渲染模块;上述预处理模块,用于根据矢量图形的渲染方向,确定与渲染方向垂直的起始线;渲染方向用于指示矢量图形的渐变色变化方向;根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离;上述像素渲染模块,用于对于矢量图形中的各个像素,根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色;其中,矢量图形在起始线上的像素的颜色为渲染起始色。
在一些实施例中,上述预处理模块,具体用于确定渲染方向对应的渲染角度,渲染角度为矢量图形所在的二维坐标系中的第一坐标轴的正方向沿第一方向与渲染方向之间的夹角的角度;将矢量图形在二维坐标系中围绕矢量图形的形心沿第二方向旋转渲染角度;其中,第一方向与第二方向相反,第一方向为顺时针方向或逆时针方向;在二维坐标系中确定旋转后的矢量图形的最小外接矩形;其中,最小外接矩形的第一边与二维坐标系中的第一坐标轴平行;最小外接矩形的第二边与二维坐标系中的第二坐标轴平行,最小外接矩形的第二边在第一坐标轴上的坐标值小于或等于旋转后的矢量图形中任一像素在第一坐标轴上的坐标值;第二坐标轴与第一坐标轴相互垂直;将最小外接矩形的第二边在二维坐标系中围绕矢量图形的形心沿第一方向旋转渲染角度;将旋转后的第二边作为起始线。
在一些实施例中,上述预处理模块,具体用于以最小外接矩形的第一边的长度作为最大渲染距离。
在一些实施例中,上述预处理模块,具体用于确定矢量图形在渲染方向上的起始点和终止点;将经过起始点且与渲染方向垂直的线确定为起始线。
在一些实施例中,上述预处理模块,具体用于将经过终止点且与渲染方向垂直的线确定为终止线;将起始线与终止线之间的距离确定为最大渲染距离。
在一些实施例中,上述预处理模块,具体用于经过矢量图形的形心作垂直于渲染方向的第一直线;第一直线将矢量图像分割为第一区域和第二区域,第一区域为矢量图形中从第一直线沿渲染方向的正方向覆盖的区域,第二区域为矢量图形中从第一直线沿渲染方向的负方向覆盖的区域;将第一区域中与第一直线的垂直距离最大的像素确定为终止点;将第二区域中与第一直线的垂直距离最大的像素确定为起始点。
在一些实施例中,上述像素渲染模块,具体用于确定像素到起始线的垂直距离与最大渲染距离的比值;根据比值,从渲染起始色到渲染终止色的渐变色中确定出像素的颜色。
第三方面,本申请提供一种电子设备,包括:存储器和处理器;存储器和处理器耦合;存储器用于存储计算机程序代码,计算机程序代码包括计算机指令;其中,当处理器执行计算机指令时,使得电子设备执行如第一方面及其任一种可能的实现方式中提供的方法。
第四方面,本申请提供一种计算机可读存储介质,所述计算机可读存储介质包括计算机指令,当所述计算机指令在计算机上运行时,使得计算机执行第一方面以及可能的实现方式中提供的方法。
第五方面,本申请提供一种包含计算机指令的计算机程序产品,当该计算机指令在计算机上运行时,使得计算机执行上述第一方面以及可能的实现方式中提供的方法。
需要说明的是,上述计算机指令可以全部或者部分存储在计算机可读存储介质上。其中,计算机可读存储介质可以与控制器的处理器封装在一起的,也可以与控制器的处理器单独封装,本申请对此不作限定。
本申请中第二方面到第五方面及其各种实现方式的具体描述,可以参考第一方面及其可能的实现方式中的详细描述。第二方面到第五方面及其各种实现方式的有益效果,可以参考第一方面及其各种实现方式的有益效果分析,此处不再赘述。
附图说明
图1为根据一些实施例的一种矢量图形渲染方法的流程示意图一;
图2为根据一些实施例的一种矢量图形渲染方法的流程示意图二;
图3为根据一些实施例的一种图像渲染的过程示意图一;
图4为根据一些实施例的一种图像渲染的过程示意图二;
图5为根据一些实施例的一种图像渲染的过程示意图三;
图6为根据一些实施例的一种图像渲染的过程示意图四;
图7为根据一些实施例的一种矢量图形渲染方法的流程示意图三;
图8为根据一些实施例的一种图像渲染的过程示意图五;
图9为根据一些实施例的一种图像渲染的过程示意图六;
图10为根据一些实施例的一种图像渲染的过程示意图七;
图11为根据一些实施例的一种图像渲染的过程示意图八;
图12为根据一些实施例的一种矢量图形渲染方法的流程示意图四;
图13为根据一些实施例的一种矢量图形渲染方法的流程示意图五;
图14为根据一些实施例的一种图像光栅化的过程示意图;
图15为根据一些实施例的一种计算机设备的结构示意图;
图16为根据一些实施例的一种图像渲染管理界面的示意图一;
图17为根据一些实施例的一种图像渲染管理界面的示意图二;
图18为根据一些实施例的一种图像渲染管理界面的示意图三;
图19为根据一些实施例的一种图像渲染管理界面的示意图四;
图20为根据一些实施例的一种矢量图形渲染装置的结构示意图;
图21为根据一些实施例的一种电子设备的结构示意图。
具体实施方式
下面将结合本申请中的附图,对本申请中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
需要说明的是,在本申请中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本申请的描述中,除非另有说明,“多个”的含义是两个或两个以上。
如背景技术所述,相关技术中,矢量图形的渐变色渲染方案由于需要添加若干以填充中心为圆心圆的辅助线,导致复杂度较高。并且,上述渐变色渲染方案不能根据用户的需要实现任意指定方向上的渐变色渲染。
对此,本申请提供一种矢量图形渲染方法,该方法包括:根据矢量图形的渲染方向,确定与渲染方向垂直的起始线;渲染方向用于指示矢量图形的渐变色变化方向;根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离;对于矢量图形中的各个像素,根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色;其中,矢量图形在起始线上的像素的颜色为渲染起始色。
可以看出,本申请实施例提供的矢量图形渲染方法的核心思路在于:对于任意渲染方向(也即渐变色变化方向),均可以定位出与该渲染方向垂直的起始线。进而,基于该起始线,定位出矢量图形的各个像素从起始线开始沿渲染方向的颜色渐变情况,使得矢量图形的渲染方向也与像素的颜色的渐变方向一致,实现矢量图形在任意指定方向上的渐变色渲染。另外,相比于相关的渐变色渲染方案需要添加若干以填充中心为圆心圆的辅助线,本申请实施例提供的技术方案仅需要添加一个辅助线(也即上述起始线),因此本申请实施例提供的技术方案的复杂度较低,有利于节约渲染过程中耗费的计算资源。
本申请实施例提供的矢量图形渲染方法的执行主体可以是任意具有数据处理功能的设备。例如,矢量图形渲染方法的执行主体可以是矢量图形渲染装置。又例如,执行主体可以为服务器。又例如,执行主体可以是具有图像处理功能的GPU(Graphics ProcessingUnit,图像处理单元)等;又例如,执行主体可以是手机、平板电脑、桌面型、膝上型、手持计算机、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer,UMPC)、上网本,以及蜂窝电话、个人数字助理(personal digital assistant,PDA)、增强现实(augmented reality,AR)\虚拟现实(virtual reality,VR)设备等。可选地,该执行主体可以具有拍摄功能,以便实时获取矢量图形。可选地,该执行主体也可以具备存储功能,以便存储待处理的图像或存储图像渲染后的结果。可选地,该执行主体还可以连接互联网,以便实现云渲染。本申请对执行主体的具体形态不作特殊限制。
本申请实施例提供的矢量图形渲染方法,可以应用于不同的图像渲染场景。例如,可以用于地理信息系统,对地图上各个区域进行图像渲染以便于用户观看。此外,本申请实施例提供的矢量图形渲染方法还可以用于其他的计算机图形处理场景,例如其他的建模渲染场景等,本申请对矢量图形渲染方法的应用场景不作具体限制。
为便于理解,以下结合附图对本申请提供的矢量图形渲染方法作具体介绍。
图1为本申请实施例提出的一种矢量图形渲染方法的示意图。为便于说明,下文中以计算机设备执行该矢量图形渲染方法为例进行说明。如图1所示,该方法包括以下步骤S101至步骤S103:
S101、根据矢量图形的渲染方向,确定与渲染方向垂直的起始线。
其中,渲染方向用于指示矢量图形的渐变色变化方向。
在一些实施例中,渲染方向可以是预先设置的;或者,渲染方向也可以是由用户指定的。例如,用户可以在计算机设备上输入渲染方向设置操作,从而计算机设备接收到该渲染方向设置操作,并响应于该操作,确定渲染方向。渲染方向设置操作的具体实现示例可以参考后文中对于图16-图19的说明,在此不予赘述。
在一些实施例中,参照图2,上述步骤S101可以具体实现为以下步骤S1011a至步骤S1014a:
S1011a、确定渲染方向对应的渲染角度。
其中,渲染角度为矢量图形所在的二维坐标系中的第一坐标轴的正方向沿第一方向与渲染方向之间的夹角的角度。
在一些示例中,第一坐标轴为图像坐标系中的x轴方向或图像坐标系中的y轴方向。其中,x轴方向为图像坐标系中的水平方向,y轴方向为图像坐标系中的竖直方向。
在一些示例中,第一坐标轴的正方向可以为图像坐标系中的x轴正方向,也可以为图像坐标系中的x轴负方向,也可以为图像坐标系中的y轴正方向,还可以为图像坐标系中的y轴负方向,对此不作具体限制。
示例性的,参照图3,矢量图形200所在的二维坐标系中的第一坐标轴为x轴,第一方向为逆时针方向为例。若渲染方向与箭头201的方向一致,x轴的正方向沿着第一方向(这里指的是逆时针方向)旋转60°后与渲染方向重合,则渲染方向对应的渲染角度为60°。
S1012a、将矢量图形在二维坐标系中围绕矢量图形的形心沿第二方向旋转渲染角度。
其中,第一方向为顺时针方向或逆时针方向,且第一方向与第二方式相反。可选地,第一方向为顺时针方式,第二方向为逆时针方向;或者,第一方向为逆时针方向,第二方向为顺时针方向。
示例性的,仍以图3所示的矢量图形200为例,若第一方向为逆时针方向,渲染角度为60°,则将上述图3中的矢量图形200围绕形心202沿第二方向旋转60°后,如图4所示,得到旋转后的矢量图形203。
S1013a、在二维坐标系中确定旋转后的矢量图形的最小外接矩形。
其中,最小外接矩形的第一边与二维坐标系中的第一坐标轴平行;最小外接矩形的第二边与二维坐标系中的第二坐标轴平行,最小外接矩形的第二边在第一坐标轴上的坐标值小于或等于旋转后的矢量图形中任一像素在第一坐标轴上的坐标值;第二坐标轴与第一坐标轴相互垂直。
示例性的,仍参照图3,矢量图形200所在的二维坐标系中的第二坐标轴为y轴,y轴与x轴互相垂直。图4中示出了图3的矢量图形200旋转60°后的矢量图形203在该二维坐标系中的位置。则参照图5,确定旋转后的矢量图形203的最小外接矩形204。可以看出,最小外接矩形204的第一边2041与x轴平行,最小外接矩形204的第二边2042与y轴平行,且第二边2042在第一坐标轴上的坐标值小于或等于旋转后的矢量图形203中任一像素在x轴上的坐标值。
S1014a、将最小外接矩形的第二边在二维坐标系中围绕矢量图形的形心沿第一方向旋转渲染角度,将旋转后的第二边作为起始线。
示例性的,仍以第一方向为顺时针方向,第二方向为逆时针方向,渲染角度为60°为例,将图5所示的最小外接矩形204的第二边2042在二维坐标系中围绕旋转后的矢量图形的形心202沿逆时针方向旋转60°后,参照图6,得到将旋转后的第二边205,将旋转后的第二边205作为起始线。
需要说明的是,上述图3到图6所示的实施例仅为示例,用于方便本领域的技术人员理解本方案,例如,在图像渲染时,还可以以逆时针方向为第一方向,以顺时针方向为第二方向,本申请对图2所示的方法的实现方式不作具体限制。
应理解,以第一坐标轴为水平方向且第二坐标轴为竖直方向为例,矢量图形在屏幕上显示时,屏幕的各个像素一般在水平方向和/或竖直方向均匀排列,因此在渲染方向倾斜(例如相对于竖直方向或水平方向倾斜)的情况下,从规则排列的屏幕像素中确定出与倾斜的渲染方向垂直的起始线计算难度较高,运算量较大。因此可以考虑将渲染方向沿第二方向旋转为水平方向或者竖直方向后,通过构建最小外接矩形得到竖直方向或水平方向的起始线,再将竖直方向或水平方向的起始线沿与第二方向相反的第一方向旋转,进而确定出起始线。基于此,可以减少确定起始线时的运算量,提高渲染效率。
在另一些实施例中,参照图7,上述步骤S101具体实现为以下步骤S1011b至步骤S1014b:
S1011b、确定矢量图形在渲染方向上的起始点和终止点。
在一些示例中,步骤S1011b具体实现为:经过矢量图形的形心作垂直于渲染方向的第一直线;第一直线将矢量图像分割为第一区域和第二区域,第一区域为矢量图形中从第一直线沿渲染方向的正方向覆盖的区域,第二区域为矢量图形中从第一直线沿渲染方向的负方向覆盖的区域;将第一区域中与第一直线的垂直距离最大的像素确定为终止点;将第二区域中与第一直线的垂直距离最大的像素确定为起始点。
可选地,起始点为一个或多个。可选地,终止点为一个或多个。
示例性的,下面以图8所示的矢量图形200为例,对起始点和终止点的确定方法作进一步说明。参照图8,矢量图形200的渲染方向与箭头201的方向一致。过矢量图形200的形心202作垂直于箭头201的第一直线207。可以看出,第一直线207将矢量图形200分为两个区域,将其中箭头201正方向(箭头所指的方向)对应的区域作为第一区域,将其中箭头201负方向对应的区域作为第二区域。计算第一区域中各个点距离第一直线207的垂直距离,以第一区域中距离第一直线207的垂直距离最大的点作为终止点209。计算第二区域中各个点距离第一直线207的垂直距离,以第二区域中距离第一直线207的垂直距离最大的点作为起始点208。
S1012b、将经过起始点且与渲染方向垂直的直线确定为起始线。
示例性的,仍以图7所示的矢量图形200为例,参照图9,过起始点208作垂直于箭头201的第三直线211,将第三直线211作为起始线。
基于此,可以在不旋转矢量图形的情况下,确定矢量图形的起始线。
S102、根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离。
其中,矢量图形中任意两个像素沿渲染方向的距离小于或等于最大渲染距离。这样,可以使得矢量图形中的像素到渲染起始线的距离总小于或等于最大渲染距离。
在一些实施例中,在图2-图6所示的实施例的基础上,步骤S102可以具体实现为:以最小外接矩形的第一边的长度作为最大渲染距离。示例性的,仍参照图5,以最小外接矩形204的第一边2041的边长为最大渲染距离。
应理解,仍以第一坐标轴为水平方向且第二坐标轴为竖直方向为例,矢量图形在屏幕上显示时,屏幕的各个像素一般在水平方向和/或竖直方向均匀排列,在渲染方向倾斜(例如相对于竖直方向或水平方向倾斜)的情况下,计算矢量图形在倾斜的渲染方向上的最大渲染距离的难度较高,运算量较大。因此可以考虑将渲染方向沿第二方向旋转为水平方向或者竖直方向后,再确定最大渲染距离。基于此,可以减少确定最大渲染距离时的运算量,提高渲染效率。
在一些实施例中,在图7-图9所示的实施例的基础上,步骤S102可以具体实现为:将经过终止点且与渲染方向垂直的线确定为终止线;将起始线与终止线之间的距离确定为最大渲染距离。示例性的,仍以图7所示的矢量图形200为例,参照图10,过终止点209作垂直于箭头201的第二直线210,将第二直线210作为终止线。
基于此,可以在不旋转矢量图形的情况下,确定矢量图形的最大渲染距离。
S103、对于矢量图形中的各个像素,根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色。
其中,矢量图形在起始线上的像素的颜色为渲染起始色。
在一些实施例中,渲染起始色和渲染终止色可以是默认设置的,也可以是用户设置的。例如,用户可以在计算机设备上输入渐变色设置操作,从而计算机设备接收到该渐变色设置操作,并响应于该操作,确定渲染起始色和渲染终止色。本申请对渲染起始色和渲染终止色的设置方式不作具体限制。
为便于理解,图11中还示出了一种垂直距离的确定方式。参照图11,矢量图形200上存在多个像素,以像素212为例,过像素212向起始线213作垂线,得到像素212到起始线213的垂直距离214。
在一些实施例中,如图12所示,上述根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色可以具体实现为以下步骤S1031至步骤S1032:
S1031、确定像素到起始线的垂直距离与最大渲染距离的比值。
应理解,由于矢量图形中任意两个像素沿渲染方向的距离总小于或等于最大渲染距离,因此像素到起始线的垂直距离总小于或等于最大渲染距离,垂直距离与最大渲染距离的比值为0到1之间的数值。
S1032、根据垂直距离与最大渲染距离的比值,从渲染起始色到渲染终止色的渐变色中确定出像素的颜色。
应理解,若像素位于起始线上时,垂直距离为0,因此垂直距离与最大渲染距离的比值为0,因此起始线上的像素的颜色为渲染起始色。像素距离起始线越远,垂直距离与最大渲染距离的比值越大,像素的颜色越靠近渲染终止色。若像素的垂直距离与最大渲染距离相同,则垂直距离与最大渲染距离的比值为1,则该像素的颜色为渲染终止色。基于此,可以使得像素的颜色随着垂直距离与最大渲染距离的比值的变化而均匀渐变,实现渐变色的平滑处理。
在一些实施例中,上述像素的颜色满足以下关系:
C=f(δ,A,B,)
其中,C为像素的颜色,δ为像素的垂直距离与最大渲染距离的比值,A为预设的渲染起始色,B为预设的渲染终止色,f为像素的颜色与垂直距离与最大渲染距离的比值的映射关系。
作为一个具体的示例,像素的渲染颜色C通过插值计算从渲染起始色到渲染终止色的渐变色中确定的。例如,像素的垂直距离与最大渲染距离的比值与像素的颜色线性相关,上述像素的渲染颜色可以满足以下关系:
C=A+(B-A)*δ
基于此,可以使得像素的渲染颜色C与像素的垂直距离与最大渲染距离的比值δ线性相关,通过这种线性运算,实现对像素的渲染颜色的插值计算,进而使得矢量图形中的各个像素随着与渲染起始点距离的变化而均匀渐变,提高渲染的平滑度。
在一些实施例中,矢量图形中的各个像素为矢量图形中的各个顶点对应的像素,此时,步骤S103具体实现为以下步骤:对矢量图形进行三角剖分,得到矢量图形进行三角剖分后的各个顶点的坐标;对于矢量图形中的各个顶点对应的像素,根据顶点对应的像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定顶点对应的像素的颜色;根据各个顶点的坐标以及各个顶点对应的像素的颜色,对矢量图形进行从渲染起始色到渲染终止色的渐变色渲染。
在一些示例中,三角剖分也叫三角化或者分格化,是在图形领域重要的技术,用于将复杂的多边形剖分成多个三角形,以便进一步绘制和计算。示例性的,对矢量图形进行三角剖分,得到矢量图形进行三角剖分后的各个顶点的坐标可以具体实现为:基于earcut算法,对矢量图形对应的多边形的各个顶点进行三角剖分,使得该多边形转换成一组三角形集合,且三角形集合中所有三角形的顶点均为原多边形的顶点。需要说明的是,上述三角剖分的算法仅为示例,本申请对三角剖分的具体算法不作限制。
在一些示例中,如图13所示,上述根据各个顶点的坐标以及各个顶点对应的像素的颜色,对矢量图形进行从渲染起始色到渲染终止色的渐变色渲染,可以具体实现为以下步骤S1041至步骤S1042:
S1041、根据各个顶点的坐标以及各个顶点对应的像素的颜色,对矢量图形进行光栅化处理,得到矢量图形的各个片元。
其中,光栅化就是将几何数据变为二维图像的过程,该二维图像上每个点都包含了颜色、深度和纹理数据,将该点和相关信息叫做一个片元。
作为一个具体的示例,步骤S1041可以具体实现为:根据三角剖分后得到的矢量图形的各个顶点的坐标确定每个三角形的边界;对每个三角形进行三角形遍历,筛选出位于三角形内的所有像素,进而实现光栅化。例如,如图14所示,将三角形500进行光栅化后的图像如图14中的图像501所示。进一步地,对矢量图形光栅化后还进一步执行一些反走样技术处理,例如进行反锯齿操作,以使得对矢量图形三角剖分后各个三角形边界上的像素点进一步采样处理,进而确定边界上的像素点需要混合的颜色,以提高颜色过渡的平滑度。本申请对矢量图形光栅化后的反走样技术处理的具体内容不作限制。
S1042、对矢量图形的各个片元进行着色处理,生成渲染后的图像。
应理解,步骤S1041可以获得矢量图形进行三角剖分后的各个三角形内的所有像素的数据。因此步骤S1042可以具体实现为:对于矢量图形三角剖分后形成的每个三角形,根据三角形顶点的坐标以及每个顶点对应的像素的颜色,确定该三角形内的像素对应的插值函数,进而根据该插值函数,确定该三角形内各个像素点对应的颜色,进而对矢量图形进行着色处理,生成渲染后的图像。进一步地,为提高渲染效果,还可以在根据插值函数确定该三角形内各个像素点对应的颜色后,结合光照阴影、透明度等信息对各个像素的颜色进行混色,确定每个像素最终的颜色,进而对矢量图形进行着色处理,生成渲染后的图像。
应理解,图1所提供的技术方案至少带来以下有益效果:对于任意渲染方向,均可以定位出与该渲染方向垂直的起始线。进而,基于该起始线,定位出矢量图形的各个顶点从起始线开始沿渲染方向的颜色渐变情况。从而根据各个顶点的坐标和颜色对矢量图形进行渲染,使得矢量图形的渲染方向也与顶点颜色渲染方向一致,实现图像在指定方向上的图像渲染。并且,相比于相关的渐变色渲染方案需要添加若干以填充中心为圆心圆的辅助线,本申请实施例提供的技术方案仅需要添加一个辅助线(也即上述起始线),因此本申请实施例提供的技术方案的复杂度较低,有利于节约渲染过程中耗费的计算资源。
在一些实施例中,矢量图形的渲染方向根据用户预设的渲染角度确定。渲染角度已在上述步骤S101中作详细说明,这里不再赘述。
示例性的,如图15所示,计算机设备600包括显示装置601和处理装置602。处理装置602用于执行本申请所示的矢量图形渲染方法,显示装置601用于显示渲染后的图像。
在一些示例中,在进行图像渲染时,如图16所示,用户可以通过显示装置601中的图像渲染管理界面603设置渲染参数。计算机设备检测到用户点击图像渲染管理界面603上的“渲染参数设置”控件604,显示第一渲染参数设置界面6051。参照图16,第一渲染参数设置界面6051包括渲染角度滑动条606,检测到用户拖动渲染角度滑动条606上的目标角度控件607到指定位置并点击“确认”按钮,根据目标角度控件607对应的角度设置渲染方向。其中,目标角度控件607位于渲染角度滑动条606的最左端时,渲染角度为0°,目标角度控件607位于渲染角度滑动条606的二分之一处时,渲染角度为180°。应理解,图16所示的第一渲染参数设置界面6051仅为示例,渲染角度的设置图标除了以渲染角度滑动条606的形式显示外,还可以是其他图标或文字形式,本申请对此不作限制。例如,如图17所示,第二渲染参数设置界面6052包括渲染角度输入框608,检测到用户在渲染角度输入框608输入渲染角度的具体数值并点击“确认”按钮,将渲染方向设置为输入的渲染角度对应的渲染方向。
在另一些实施例中,矢量图形的渲染方向根据用户预设的方向起点坐标和方向终点坐标确定。示例性的,如图18所示,计算机设备检测到用户点击图像渲染管理界面603上的“渲染参数设置”控件604,显示第三渲染参数设置界面6053。第三渲染参数设置界面6053包括“渲染方向起始点设置”控件609,检测到用于点击“渲染方向起始点设置”控件609,关闭第三渲染参数设置界面6053,显示图像渲染管理界面603。图像渲染管理界面603上显示第一提示信息“请设置渲染方向的起点”610,检测到用户点击图像渲染管理界面603中的图像区域611,将用户点击的点对应的坐标作为方向起点的坐标,并显示第二提示信息“请设置渲染方向的终点”612。检测到用户再次点击图像渲染管理界面603中的图像区域611,将用户再次点击的点对应的坐标作为方向终点的坐标。将方向起点指向方向终点的方向设置为渲染方向。
在又一些实施例中,矢量图形的渲染方向根据用户绘制的线条确定。示例性的,如图19所示,计算机设备检测到用户点击图像渲染管理界面603上的“渲染参数设置”控件604,显示第四渲染参数设置界面6054。第四渲染参数设置界面6054包括“渲染方向设置”控件613。检测到用户点击“渲染方向设置”控件613,弹出渲染方向绘画框614。检测到用户在渲染方向绘画框614中绘制的线条,将用户绘制的线条拟合为矢量直线,以拟合后的矢量直线的方向作为渲染方向。
可以看出,上述主要从方法的角度对本申请实施例提供的方案进行了介绍。为了实现上述功能,本申请实施例提供了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到,结合本文中所公开的实施例描述的各示例的模块及算法步骤,本申请实施例能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。
如图20所示,本申请实施例提供了一种矢量图形渲染装置,用于执行本申请实施例所提供的矢量图形渲染方法。该矢量图形渲染装置300包括:预处理模块301以及像素渲染模块302。
其中,预处理模块301,用于根据矢量图形的渲染方向,确定与渲染方向垂直的起始线;渲染方向用于指示矢量图形的渐变色变化方向;根据渲染方向以及矢量图形,确定矢量图形在渲染方向上的最大渲染距离;
像素渲染模块302,用于对于矢量图形中的各个像素,根据像素到起始线的垂直距离、最大渲染距离、渲染起始色以及渲染终止色,确定像素的颜色;其中,矢量图形在起始线上的像素的颜色为渲染起始色。
在一些实施例中,上述预处理模块301,具体用于确定渲染方向对应的渲染角度,渲染角度为矢量图形所在的二维坐标系中的第一坐标轴的正方向沿第一方向与渲染方向之间的夹角的角度;将矢量图形在二维坐标系中围绕矢量图形的形心沿第二方向旋转渲染角度;其中,第一方向与第二方向相反,第一方向为顺时针方向或逆时针方向;在二维坐标系中确定旋转后的矢量图形的最小外接矩形;其中,最小外接矩形的第一边与二维坐标系中的第一坐标轴平行;最小外接矩形的第二边与二维坐标系中的第二坐标轴平行,最小外接矩形的第二边在第一坐标轴上的坐标值小于或等于旋转后的矢量图形中任一像素在第一坐标轴上的坐标值;第二坐标轴与第一坐标轴相互垂直;将最小外接矩形的第二边在二维坐标系中围绕矢量图形的形心沿第一方向旋转渲染角度;将旋转后的第二边作为起始线。
在一些实施例中,上述预处理模块301,具体用于以最小外接矩形的第一边的长度作为最大渲染距离。
在一些实施例中,上述预处理模块301,具体用于确定矢量图形在渲染方向上的起始点和终止点;将经过起始点且与渲染方向垂直的线确定为起始线。
在一些实施例中,上述预处理模块301,具体用于将经过终止点且与渲染方向垂直的线确定为终止线;将起始线与终止线之间的距离确定为最大渲染距离。
在一些实施例中,上述预处理模块301,具体用于经过矢量图形的形心作垂直于渲染方向的第一直线;第一直线将矢量图像分割为第一区域和第二区域,第一区域为矢量图形中从第一直线沿渲染方向的正方向覆盖的区域,第二区域为矢量图形中从第一直线沿渲染方向的负方向覆盖的区域;将第一区域中与第一直线的垂直距离最大的像素确定为终止点;将第二区域中与第一直线的垂直距离最大的像素确定为起始点。
在一些实施例中,上述像素渲染模块302,具体用于确定像素到起始线的垂直距离与最大渲染距离的比值;根据比值,从渲染起始色到渲染终止色的渐变色中确定出像素的颜色。
需要说明的是,图20中对模块的划分是示意性的,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。例如,还可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。
在采用硬件的形式实现上述集成的模块的功能的情况下,本申请实施例提供了上述实施例中所涉及的矢量图形渲染装置的另一种可能的结构示意图。如图21所示,该矢量图形渲染装置300包括:处理器402,总线404。可选的,该矢量图形渲染装置还可以包括存储器401;可选地,该矢量图形渲染装置还可以包括通信接口403。
处理器402,可以是实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。该处理器402可以是中央处理器,通用处理器,数字信号处理器,专用集成电路,现场可编程门阵列或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。处理器402也可以是实现计算功能的组合,例如包含一个或多个微处理器组合,DSP和微处理器的组合等。
通信接口403,用于与其他设备通过通信网络连接。该通信网络可以是以太网,无线接入网,无线局域网(wireless local area networks,WLAN)等。
存储器401,可以是只读存储器(read-only memory,ROM)或可存储静态信息和指令的其他类型的静态存储设备,随机存取存储器(random access memory,RAM)或者可存储信息和指令的其他类型的动态存储设备,也可以是电可擦可编程只读存储器(electrically erasable programmable read-only memory,EEPROM)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。
作为一种可能的实现方式,存储器401可以独立于处理器402存在,存储器401可以通过总线404与处理器402相连接,用于存储指令或者程序代码。处理器402调用并执行存储器401中存储的指令或程序代码时,能够实现本申请实施例提供的矢量图形渲染方法。
另一种可能的实现方式中,存储器401也可以和处理器402集成在一起。
总线404,可以是扩展工业标准结构(extended industry standardarchitecture,EISA)总线等。总线404可以分为地址总线、数据总线、控制总线等。为便于表示,图21中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将矢量图形渲染装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。
本申请实施例还提供了一种计算机可读存储介质。上述方法实施例中的全部或者部分流程可以由计算机指令来指示相关的硬件完成,该程序可存储于上述计算机可读存储介质中,该程序在执行时,可包括如上述各方法实施例的流程。计算机可读存储介质可以是前述任一实施例的内存。上述计算机可读存储介质也可以是上述基于矢量图形渲染装置的外部存储设备,例如上述矢量图形渲染装置上配备的插接式硬盘,智能存储卡(smartmedia card,SMC),安全数字(secure digital,SD)卡,闪存卡(flash card)等。进一步地,上述计算机可读存储介质还可以既包括上述矢量图形渲染装置的内部存储单元也包括外部存储设备。上述计算机可读存储介质用于存储上述计算机程序以及上述矢量图形渲染装置所需的其他程序和数据。上述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。
本申请实施例还提供一种计算机程序产品,该计算机产品包含计算机程序,当该计算机程序产品在计算机(例如电子设备或矢量图形渲染装置)上运行时,使得该计算机执行上述实施例中所提供的任一项矢量图形渲染方法。
尽管在此结合各实施例对本申请进行了描述,然而,在实施所要求保护的本申请过程中,本领域技术人员通过查看附图、公开内容、以及所附权利要求书,可理解并实现公开实施例的其他变化。在权利要求中,“包括”(Comprising)一词不排除其他组成部分或步骤,“一”或“一个”不排除多个的情况。单个处理器或其他单元可以实现权利要求中列举的若干项功能。相互不同的从属权利要求中记载了某些措施,但这并不表示这些措施不能组合起来产生良好的效果。
尽管结合具体特征及其实施例对本申请进行了描述,显而易见的,在不脱离本申请的精神和范围的情况下,可对其进行各种修改和组合。相应地,本说明书和附图仅仅是所附权利要求所界定的本申请的示例性说明,且视为已覆盖本申请范围内的任意和所有修改、变化、组合或等同物。显然,本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样,倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内,则本申请也意图包含这些改动和变型在内。
以上,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何在本申请揭露的技术范围内的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应该以权利要求的保护范围为准。

Claims (10)

1.一种矢量图形渲染方法,其特征在于,所述方法包括:
根据矢量图形的渲染方向,确定与所述渲染方向垂直的起始线;所述渲染方向用于指示所述矢量图形的渐变色变化方向;
根据所述渲染方向以及所述矢量图形,确定所述矢量图形在所述渲染方向上的最大渲染距离;
对于所述矢量图形中的各个像素,根据所述像素到所述起始线的垂直距离、所述最大渲染距离、渲染起始色以及渲染终止色,确定所述像素的颜色;其中,所述矢量图形在所述起始线上的像素的颜色为渲染起始色。
2.根据权利要求1所述的方法,其特征在于,所述根据矢量图形的渲染方向,确定与所述渲染方向垂直的起始线,包括:
确定所述渲染方向对应的渲染角度,所述渲染角度为所述矢量图形所在的二维坐标系中的第一坐标轴的正方向沿第一方向与所述渲染方向之间的夹角的角度;
将所述矢量图形在所述二维坐标系中围绕所述矢量图形的形心沿第二方向旋转所述渲染角度;其中,所述第一方向与所述第二方向相反,所述第一方向为顺时针方向或逆时针方向;
在所述二维坐标系中确定旋转后的矢量图形的最小外接矩形;其中,所述最小外接矩形的第一边与所述二维坐标系中的第一坐标轴平行;所述最小外接矩形的第二边与所述二维坐标系中的第二坐标轴平行,所述最小外接矩形的第二边在所述第一坐标轴上的坐标值小于或等于所述旋转后的矢量图形中任一像素在所述第一坐标轴上的坐标值;所述第二坐标轴与所述第一坐标轴相互垂直;
将所述最小外接矩形的第二边在所述二维坐标系中围绕所述矢量图形的形心沿第一方向旋转所述渲染角度;将旋转后的第二边作为所述起始线。
3.根据权利要求2所述的方法,其特征在于,所述根据所述渲染方向以及所述矢量图形,确定所述矢量图形在所述渲染方向上的最大渲染距离,包括:
以所述最小外接矩形的第一边的长度作为所述最大渲染距离。
4.根据权利要求1所述的方法,其特征在于,所述根据矢量图形的渲染方向,确定与所述渲染方向垂直的起始线,包括:
确定所述矢量图形在所述渲染方向上的起始点和终止点;
将经过所述起始点且与所述渲染方向垂直的线确定为起始线。
5.根据权利要求4所述的方法,其特征在于,所述根据所述渲染方向以及所述矢量图形,确定所述矢量图形在所述渲染方向上的最大渲染距离,包括:
将经过所述终止点且与所述渲染方向垂直的线确定为终止线;
将所述起始线与所述终止线之间的距离确定为最大渲染距离。
6.根据权利要求5所述的方法,其特征在于,所述确定所述矢量图形在所述渲染方向上的起始点和终止点,包括:
经过所述矢量图形的形心作垂直于所述渲染方向的第一直线;所述第一直线将所述矢量图像分割为第一区域和第二区域,所述第一区域为所述矢量图形中从所述第一直线沿所述渲染方向的正方向覆盖的区域,所述第二区域为所述矢量图形中从所述第一直线沿所述渲染方向的负方向覆盖的区域;
将所述第一区域中与所述第一直线的垂直距离最大的像素确定为终止点;
将所述第二区域中与所述第一直线的垂直距离最大的像素确定为起始点。
7.根据权利要求1至6任一项所述的方法,其特征在于,所述根据所述像素到所述起始线的垂直距离、所述最大渲染距离、渲染起始色以及渲染终止色,确定所述像素的颜色,包括:
确定所述像素到所述起始线的垂直距离与所述最大渲染距离的比值;
根据所述比值,从所述渲染起始色到所述渲染终止色的渐变色中确定出所述像素的颜色。
8.一种矢量图形渲染装置,其特征在于,包括:
预处理模块,用于根据矢量图形的渲染方向,确定与所述渲染方向垂直的起始线;所述渲染方向用于指示所述矢量图形的渐变色变化方向;根据所述渲染方向以及所述矢量图形,确定所述矢量图形在所述渲染方向上的最大渲染距离;
像素渲染模块,用于对于所述矢量图形中的各个像素,根据所述像素到所述起始线的垂直距离、所述最大渲染距离、渲染起始色以及渲染终止色,确定所述像素的颜色;其中,所述矢量图形在所述起始线上的像素的颜色为渲染起始色。
9.根据权利要求8所述的装置,其特征在于,
所述预处理模块,具体用于确定所述渲染方向对应的渲染角度,所述渲染角度为所述矢量图形所在的二维坐标系中的第一坐标轴的正方向沿第一方向与所述渲染方向之间的夹角的角度;将所述矢量图形在所述二维坐标系中围绕所述矢量图形的形心沿第二方向旋转所述渲染角度;其中,所述第一方向与所述第二方向相反,所述第一方向为顺时针方向或逆时针方向;在所述二维坐标系中确定旋转后的矢量图形的最小外接矩形;其中,所述最小外接矩形的第一边与所述二维坐标系中的第一坐标轴平行;所述最小外接矩形的第二边与所述二维坐标系中的第二坐标轴平行,所述最小外接矩形的第二边在所述第一坐标轴上的坐标值小于或等于所述旋转后的矢量图形中任一像素在所述第一坐标轴上的坐标值;所述第二坐标轴与所述第一坐标轴相互垂直;将所述最小外接矩形的第二边在所述二维坐标系中围绕所述矢量图形的形心沿第一方向旋转所述渲染角度;将旋转后的第二边作为所述起始线;
所述预处理模块,具体用于以所述最小外接矩形的第一边的长度作为所述最大渲染距离;
所述预处理模块,具体用于确定所述矢量图形在所述渲染方向上的起始点和终止点;将经过所述起始点且与所述渲染方向垂直的线确定为起始线;
所述预处理模块,具体用于将经过所述终止点且与所述渲染方向垂直的线确定为终止线;将所述起始线与所述终止线之间的距离确定为最大渲染距离;
所述预处理模块,具体用于经过所述矢量图形的形心作垂直于所述渲染方向的第一直线;所述第一直线将所述矢量图像分割为第一区域和第二区域,所述第一区域为所述矢量图形中从所述第一直线沿所述渲染方向的正方向覆盖的区域,所述第二区域为所述矢量图形中从所述第一直线沿所述渲染方向的负方向覆盖的区域;将所述第一区域中与所述第一直线的垂直距离最大的像素确定为终止点;将所述第二区域中与所述第一直线的垂直距离最大的像素确定为起始点;
所述像素渲染模块,具体用于确定所述像素到所述起始线的垂直距离与所述最大渲染距离的比值;根据所述比值,从所述渲染起始色到所述渲染终止色的渐变色中确定出所述像素的颜色。
10.一种电子设备,其特征在于,包括:
存储器和处理器;所述存储器和所述处理器耦合;所述存储器用于存储计算机程序代码,所述计算机程序代码包括计算机指令;
其中,当所述处理器执行所述计算机指令时,使得所述矢量图形渲染装置执行如权利要求1至7任一项所述的矢量图形渲染方法。
CN202211575193.4A 2022-12-08 2022-12-08 一种矢量图形渲染方法、装置及电子设备 Pending CN115965702A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211575193.4A CN115965702A (zh) 2022-12-08 2022-12-08 一种矢量图形渲染方法、装置及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211575193.4A CN115965702A (zh) 2022-12-08 2022-12-08 一种矢量图形渲染方法、装置及电子设备

Publications (1)

Publication Number Publication Date
CN115965702A true CN115965702A (zh) 2023-04-14

Family

ID=87362676

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211575193.4A Pending CN115965702A (zh) 2022-12-08 2022-12-08 一种矢量图形渲染方法、装置及电子设备

Country Status (1)

Country Link
CN (1) CN115965702A (zh)

Similar Documents

Publication Publication Date Title
US20230053462A1 (en) Image rendering method and apparatus, device, medium, and computer program product
US9202303B2 (en) System and method for compositing path color in path rendering
TWI592902B (zh) 來自片段著色器程式之樣本遮罩的控制
CN101116111B (zh) 使用3d光栅化算法的2d/3d线条渲染
US8441497B1 (en) Interpolation of vertex attributes in a graphics processor
US8624899B2 (en) Arc spline GPU rasterization for cubic Bezier drawing
US9275493B2 (en) Rendering vector maps in a geographic information system
US9495767B2 (en) Indexed uniform styles for stroke rendering
WO2014025483A1 (en) Gpu-accelerated path rendering
US10593096B2 (en) Graphics processing employing cube map texturing
US9530241B2 (en) Clipping of graphics primitives
CN115147579B (zh) 一种扩展图块边界的分块渲染模式图形处理方法及系统
US20120287135A1 (en) Method and device for rendering areas bounded by curves using a gpu
US8743135B2 (en) Graphics processing systems
US8477148B2 (en) Graphics processing systems
GB2531427A (en) Graphics processing systems
CN111260750B (zh) openFL绘制矢量图形的处理方法、装置及电子设备
CN111091620B (zh) 基于图形学的地图动态路网处理方法及系统、计算机设备
US8040357B1 (en) Quotient remainder coverage system and method
CN114742931A (zh) 渲染图像的方法、装置、电子设备及存储介质
CN110502305B (zh) 一种动态界面的实现方法、装置及相关设备
CN109427084B (zh) 一种地图显示方法、装置、终端及存储介质
CN115984418A (zh) 一种地图渲染方法、装置、电子设备及存储介质
CN109658495B (zh) 环境光遮蔽效果的渲染方法、装置及电子设备
CN115965702A (zh) 一种矢量图形渲染方法、装置及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination