一种不规则圆角多边形绘制方法与流程

1.本发明涉及电子屏幕绘制显示技术领域，特别涉及一种不规则圆角多边形绘制方法。


背景技术：

2.在系统开发中，前端同样重要，当前技术下，在移动端开发中，布局系统往往都是以矩形的形式存在的，其中，常见的圆角多边形只是圆角矩形。而圆角矩形在系统中有直接的api支持，api给开发者提供了圆角半径的设置接口，可通过对接口的直接调用，实现界面设计；该方式的实现原理是在四个角画半径为r的圆做切线切割处理(如图3所示)，然而，基于该原理这种方案仅能够满足矩形类界面的渲染；
3.然而在实际的开发工作中往往有用到平滑曲线多边形表达业务需求，例如：图标数据走势及分布、地图形式轨迹的表达、平面多边形的圆角化处理等等，现有的绘制方法无法满足非矩形界面的渲染。


技术实现要素：

4.为解决上述问题，本发明提供了一种不规则圆角多边形绘制方法，通过以多边形各角顶点为核心，计算相邻的切线点，进而绘制贝塞尔曲线，之后遍历多边形所有的顶点，执行相同的操作，获得针对各顶点对应的贝塞尔曲线，封闭整个曲线，最后得到圆角多边形，解决现有技术不能绘制非矩形界面的局限性，实现一切封闭多边形的圆角化处理。
5.本发明提供了一种不规则圆角多边形绘制方法，具体技术方案如下：
6.s1：获取封闭多边形图形在当前图形渲染坐标系中的各顶点坐标，所述封闭多边形图形至少有三个顶点；
7.s2：对每个顶点设置圆角系数；
8.s3：定位其中一个顶点，根据该顶点相邻顶点的坐标计算该顶点两侧的切线点坐标；
9.s4：以当前顶点为控制点，以左切线点和右切线点分别为起点和终点，绘制贝塞尔曲线；
10.s5：重复执行步骤s3-s4，直至定位所有顶点完成步骤s3和s4的操作，将整个曲线封闭，获得圆角多边形。
11.进一步的，所述图形渲染坐标系为二维直角坐标系。
12.进一步的，所述圆角系数满足[0,0.5]。
[0013]
进一步的，所述切线点坐标计算过程如下：
[0014]
s301：基于当前顶点的圆角系数、自身坐标以及该顶点的左相邻点坐标，计算该顶点与所述左切线点的坐标点差值；
[0015]
基于当前顶点的圆角系数、自身坐标以及该顶点的右相邻点坐标，计算该顶点与所述右切线点的坐标点差值；
[0016]
s302：基于当前顶点的坐标以及该顶点分别与所述左切线点和所述右切线点的坐标点差值，获得所述左切线点和所述右切线点的坐标点。
[0017]
进一步的，步骤s2-s4重复执行时，基于当前封闭多边形图形，依次定位顶点进行相应操作。
[0018]
本发明的有益效果如下：
[0019]
1、本发明的方法通过待绘制图形中一顶点以及相邻顶点的坐标，计算并结合圆角系数标识当前顶点的左、右切线点的坐标，根据当前顶点的左、右切线点的坐标和当前顶点的坐标，绘制贝塞尔曲线，通过该操作基于每个顶点分别绘制对应的贝塞尔曲线，并将曲线封闭，完成整个曲线的绘画，以不规则图形的各顶点为核心绘制曲线，实现不规则封闭多边形的圆角化处理，避免了不规则图形各角较大差异导致圆角绘制的局限。
[0020]
2、本发明的方法基于顶点坐标进行相应的操作实现图形绘制，不再依赖在顶点处绘制设定半径参数的圆形进行平滑处理，不仅兼容系统的圆角矩形的效果样式，而且支持多个不同角度顶点存在的不规则封闭图形的圆角绘制，适用于任何封闭的不规则多边形。
附图说明
[0021]
图1是本发明的方法流程示意图；
[0022]
图2是本发明的绘制过程效果演示示意图；
[0023]
图3是现有方式处理过程效果示意图。
具体实施方式
[0024]
在下面的描述中对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0025]
实施例1
[0026]
本发明的实施例1公开了一种不规则圆角多边形绘制方法，如图1所示，具体步骤流程如下：
[0027]
s1：获取封闭多边形图形在当前图形渲染坐标系中的各顶点坐标，所述封闭多边形图形至少有三个顶点；
[0028]
本实施例中，所述图形渲染坐标系为二维直角坐标系。
[0029]
s2：对每个顶点设置圆角系数，所述圆角系数a，满足a大于等于0，小于等于0.5，其中，a越大圆角越大。
[0030]
s3：定位其中一个顶点，根据该顶点相邻顶点的坐标计算该顶点两侧的切线点坐标；
[0031]
所述切线点坐标计算过程如下：
[0032]
s301：基于当前顶点的圆角系数、自身坐标以及该顶点的左相邻点坐标，计算该顶点与所述左切线点的坐标点差值；
[0033]
基于当前顶点的圆角系数、自身坐标以及该顶点的右相邻点坐标，计算该顶点与所述右切线点的坐标点差值；
[0034]
s302：基于当前顶点的坐标以及该顶点分别与所述左切线点和所述右切线点的坐标点差值，获得所述左切线点和所述右切线点的坐标点。
[0035]
s4：以当前顶点为控制点，以左切线点和右切线点分别为起点和终点，绘制贝塞尔曲线；
[0036]
s5：基于当前封闭多边形图形，依次定位顶点，重复执行步骤s3-s4，直至定位所有顶点完成步骤s3和s4的操作，再将整个曲线封闭，最终获得圆角多边形。
[0037]
具体的，本实施例中，以一个封闭多边形图形a进行说明，该封闭多边形图形a，顶点个数为n(n》＝3),顶点坐标分别为：
[0038]
p0＝(x0，y0)，p1＝(x1，y1)，p2＝(x2，y2)，p3＝(x3，y3)，...，pn＝(xn，yn)；
[0039]
该封闭多边形图形a，可由制图软件依次通过直线将p0连接至pn获得，该封闭多边形图形的顶角为直线相交的非圆角的角，角的度数为t，满足0
°
《t《360
°
。
[0040]
结合图2所示，基于上述封闭多边形图形a，绘制过程如下：
[0041]
从第一个点p0(x0，y0)开始，设置圆角系数a；
[0042]
根据pn(xn，yn)、p0(x0，y0)、p1(x1，y1)的坐标点计算出顶点p0两侧的切线点p0_left、p0_right，其中，p0_left表示左切线点，p0_right表示右切线点，具体如下：
[0043]
计算p0_left与p0之间x轴的差值dxl＝a*(x0-xn)，y轴差值为dyl＝a*(y0-yn)；
[0044]
计算p0_right与p0之间x轴的差值dxr＝a*(x1-x0)，y轴差值为dyr＝a*(y1-y0)；
[0045]
由此可获得：
[0046]
p0_left＝(x0-dxl，y0-dyl)，p0_right＝(x0+dxr，y0+dyr)；
[0047]
根据切线点p0_left、p0_right的坐标，以顶点p0为控制点，左切线点p0_left为起点，右切线点p0_right为终点，绘制贝塞尔曲线；
[0048]
根据该封闭多边形图形a的顶点p0-pn，依次计算各个顶点两端的切线起点和终点的左、右切线点，基于上述操作，绘制完上一个顶点的曲线后，将画笔位置移动到下一个顶点的p0_left起点坐标处，依照上述过程继续绘制对应的贝塞尔曲线，绘制完所有顶点对应的贝塞尔曲线后，将整个曲线封闭，完成整个曲线的绘画，得到一个圆角多边形。
[0049]
本发明并不局限于前述的具体实施方式。本发明扩展到任何在本说明书中披露的新特征或任何新的组合，以及披露的任一新的方法或过程的步骤或任何新的组合。