Svg五角星、太阳花、多边形的绘制

我们在学习平面几何中，学到了多边形的概念，有多少条边就有多少个顶点。本篇我们介绍一下如何用svg来绘制规则的多边形，比如三角形、五角星和任意多边形。在此，我们用到polygon标签，<polygon> 标签用来创建含有不少于三个边的图形。

多边形的绘制最关键的是各个顶点的确定，确定各个顶点后只要将顶点之间连线就可以得到多边形，当然，顶点间的连线顺序不同，得到的图形也不同，如下面的5顶点的图形：

第一张图形，只要计算出指定圆的边上的顶点，顺序连线就可以得到，而第二张图形在第一张图形的基础上还需要确定各顶点的连线顺序。

我们使用python来计算多边形的各个顶点以及拼接成svg中<polygon>标签需要的数据格式，并打印出来，源码如下：

import math


#顶点都在圆上等分的多角形
def circle_point(num, x=0,y=0,r=1.0, anglepy=0):
    step = 2*math.pi/num
    start = anglepy/360.0 *2*math.pi

    points = []
    for i in range(num):
        an1 = step*i+start
        tmpx,tmpy=math.cos(an1), -math.sin(an1) #由于直角坐标和svg画布坐标的y轴相反，所以y坐标取负号
        # print("%d,(%.2f,%.2f)"%(i,tmpx,tmpy))
        px = tmpx * r + x
        py = tmpy * r + y
        points.append((px,py))

    restr = ""
    for point in points:
        restr += "%.2f,%.2f "%(point[0],point[1])
    print("第一种:", restr)
    return points


#等分多角形，num为顶点数，x,y是圆心坐标，r为圆的半径, anglepy为起始点的角度偏移位置
def starN(num, x=0,y=0,r=1.0, anglepy=0):
    point0s = circle_point(num, x, y, r, anglepy) #按顶点数在圆上计算出各个点坐标
    step = (num-3)//2 #不同的顶点数连线跳过的点数不一样

    list1 = pointskip(num,step) #计算连线顺序

    restr = ""
    point1s=[]
    for i in list1:
        point1s.append(point0s[i])
        restr += "%.2f,%.2f " % (point0s[i][0], point0s[i][1])
    print("第二种:", restr)
    return point1s


def pointskip(n,k):
    # list0 = range(n)
    list0 = [i for i in range(n)]
    total_list = list0*n

    list1=[]
    i=0
    while i<n*n:
        id = total_list[i]
        if id in list1:
            i+=1
            continue
        list1.append(id)
        i+=(k+1)

    return list1


if __name__ == "__main__":
    starN(36,150,150,150,0)

这里示例中封装了一个函数starN用于生成多边形<polygon>标签需要的数据格式，参数的含义：num为顶点数，x,y是圆心坐标，r为圆的半径, anglepy为起始点的角度偏移位置。

上面代码填入的num=5为5边形，生成是数据如下：

选取第一行数据，填入svg模板中得到上面的图1五边形，这第二行数据，填入svg模板中，得到图2的五角星，svg模板源码如下:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="300.00,150.00 28.65,61.83 196.35,292.66 196.35,7.34 28.65,238.17 " stroke="red"  stroke-width="1" fill="yellow" fill-rule="evenodd"/>
</svg>

八边形的数据为

300.00,150.00 43.93,43.93 150.00,300.00 256.07,43.93 0.00,150.00 256.07,256.07 150.00,0.00 43.93,256.07

替换上面svg模板的polygon中的points，得到的图形如下：

Num=16得到16角星的数据

300.00,150.00 11.42,92.60 256.07,256.07 92.60,11.42 150.00,300.00 207.40,11.42 43.93,256.07 288.58,92.60 0.00,150.00 288.58,207.40 43.93,43.93 207.40,288.58 150.00,0.00 92.60,288.58 256.07,43.93 11.42,207.40

生成图形为：

太阳花取36边形，得到的数据：

300.00,150.00 2.28,123.95 290.95,201.30 20.10,75.00 264.91,246.42 53.58,35.09 225.00,279.90 98.70,9.05 176.05,297.72 150.00,0.00 123.95,297.72 201.30,9.05 75.00,279.90 246.42,35.09 35.09,246.42 279.90,75.00 9.05,201.30 297.72,123.95 0.00,150.00 297.72,176.05 9.05,98.70 279.90,225.00 35.09,53.58 246.42,264.91 75.00,20.10 201.30,290.95 123.95,2.28 150.00,300.00 176.05,2.28 98.70,290.95 225.00,20.10 53.58,264.91 264.91,53.58 20.10,225.00 290.95,98.70 2.28,176.05

生成图形为：

怎么样？是不是很简单，只有计算出图形的顶点，通过polygon标签就很容易的生成各种多边形图形，如果你有好的创意还可以生成更有趣的图案，你也来试试吧！