1

扇形图

用svg的path标签可以画出任何你想画的图像
这里有一篇详细的指南,有兴趣的可以看下:svg的path
这里再引用一位博主写的不错的文章:SVG之path

path标签的d属性的命令有

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx ry 表示椭圆的x半径和y半径,两个一样画出来的就是圆,最后两个的参数x y表示的是终点坐标,接下来的三个参数比较复杂,这里开始详细讲解:
我们来看一张图:articlex.png
图中的两个点Arc start 和Arc end是起始点和终止点,假设我们已经知道,通过这两个点和半径可以得出两个椭圆,四条弧,那该怎样确定用那条弧呢?在起始点和终止点之间连一条线,在线的左半部分sweep-flag的值为0,在右边为1,而当large-arc-flag为1时表示取的是大弧,为0就表示取小弧,这两个参数的四种取值就可以分别取出这四条弧。large-arc-flag(约定名称叫大弧,下文也这么叫)=0就表示取图中B和C的两条加黑的小弧,而sweep-flag(约定名称叫镜像,下文也这么叫)=0表示取B中的那条小弧,等于1表示取图C中的那条,(大弧,镜像)的四种取值:(0,0)、(0,1)、(1,0)、(1,1)就分别对应图中的B、C、D、E。x-axis-rotation表示的就是x轴的旋转角度,如图F

好,A命令的参数讲完之后我们开始讲用path标签画扇形的原理:

再来看张图:
扇形图原理
扇形图是圆的一部分,要画出图中的扇形图分三步:
#1:从圆心(400,300)画一条直线到弧的起点位置
#2:从弧的起点位置画一条弧到终点位置
#3:闭合路径
第一条线比较好画M L命令可以实现,但是我们首先要求出起点的坐标x,y。画第二条弧的时候还要求出终点坐标,最后第三条线用Z命令直接闭合就可以了。
所以这里我们要写一个求坐标的函数,还要注意所有的度数都得转成弧度制,再写一个转弧度制的函数,怎么求弧的起点左边x、y?x坐标就是圆心的cx坐标+图示的线段a,而线段a=r*sin(ang),r表示半径,ang表示角度,角度是我们自己给的,终点坐标同理。

这里写的时候用一个数组存d属性的命令,最后用空格拼接在统一设置。

注意:

在画扇形图的时候,当终点和起点之间的角度小于180°的时候,large-arc-flag取0,大于180°的时候取1,所以我们可以用三元运算符实现 ‘?:’;

还有就是Arc start和Arc end两个点如果重合,svg将画不出任何曲线。因为经过一个点的弧有无数条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #oSvg{
            background: rgba(187, 187, 187, 0.2);
        }
    </style>
    <script>
        window.onload=function(){
            let oP1=document.getElementById('p1');//获取path对象
            let cx=300,cy=300,r=200;//圆心坐标、半径
            let ang1=120,ang2=420;//角度
            
            function d2a(n){//角度转弧度
                return n*Math.PI/180;
            }
            function pointe(ang){//求坐标函数
                return {
                    x:cx+r*Math.sin(d2a(ang)),
                    y:cy-r*Math.cos(d2a(ang))
                }
            }
            let arr=[];//存d属性的参数
            //#1
            let {x:x1,y:y1}=pointe(ang1);//求出弧的起点坐标,线的终止点,命名x1,y1
            arr.push(`M ${cx} ${cy} L ${x1} ${y1}`);//画出从圆心到弧的线,但是这里还没画,只是添加到数组里了,最后的时候在一起画
            //#2
            let {x:x2,y:y2}=pointe(ang2);//求出弧的终止点,命名x2,y2
            arr.push(`A ${r} ${r} 0 ${ang2-ang1>=180?1:0} 1 ${x2} ${y2}`);//画出第二条弧,这里也还没开始画,只是加到数组里了
            //#3
            arr.push('Z')//闭合
            oP1.setAttribute('d',arr.join(' '));//拼接数组里的字符,开始画
        }
    </script>
</head>
<body>
    <svg width='800' height='600' id="oSvg">
        <path id="p1" style="stroke: rgb(255, 136, 0); stroke-width:5;fill:none"></path>
    </svg>
</body>
</html>

逸轩
8 声望1 粉丝

我也想成为大佬啊