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,s(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图形
选取第⼀⾏数据，填⼊svg模板中得到上⾯的图1五边形，这第⼆⾏数据，填⼊svg模板中，得到图2的五⾓星，svg模板源码如下:
<svg width="300" height="300" xmlns="/2000/svg" version="1.1" xmlns:xlink="/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标签就很容易的⽣成各种多边形图形，如果你有好的创意还可以⽣成更有趣的图案，你也来试试吧！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。