svgのpathの応用

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 yrx ryは楕円のx半径とy半径を表し、2つは同じように円を描き、最後の2つのパラメータx yは終点座標を表しています.次の3つのパラメータは複雑で、ここで詳しく説明します:図を見てみましょう:図の中の2つの点Arc startとArc endは開始点と終了点で、もし私たちがすでに知っているとしたら、この2つの点と半径を通じて2つの楕円、4つの弧を得ることができて、それではどのようにその弧を使うことを確定しますか?開始点と終了点の間に線が接続され、線の左半分のsweep-flagの値は0で、右側は1ですが、large-arc-flagが1の場合は大弧、0は小弧を表し、この2つのパラメータの4つの値はそれぞれ4つの弧を取り出すことができます.Large-arc-flag(約定名は大弧、以下同様)=0は図中のBとCの2本の黒い小弧をとることを表し、sweep-flag(約定名は鏡像、以下同様に呼ぶ)=0はBの中のあの小弧を取ることを表し、1は図Cの中のあの弧を取ることを表し、(大弧、鏡像)の4種類の値:(0,0)、(0,1)、(1,0)、(1,1)図中のB,C,D,Eにそれぞれ対応する.x-axis-rotationは、図Fのようにx軸の回転角度を表す
はい、Aコマンドのパラメータを説明した後、pathラベルで扇形を描く原理を話し始めました.
更に図を見てみると、扇形図は円の一部であり、図中の扇形図を描くには3つのステップに分けられる:#1:円心(400300)から直線を弧の起点位置まで描く#2:弧の起点位置から弧を終点位置まで描く#3:閉じた経路の最初の線はM Lコマンドを描くのが実現できるが、私たちはまず起点の座標x,yを要求する.2番目の弧を描くときは終点座標を求め、最後に3番目の線をZコマンドで直接閉じるといいです.だからここで私达は1つの座標を求める関数を书いて、またすべての度数がすべて弧の制に回転しなければならないことに注意して、更に1つの弧の制の関数を书いて、どのように弧の起点の左のx、yを求めますか?x座標は円心のcx座標+図示の線分aであり、線分a=r*sin(ang)、rは半径、angは角度、角度は私たち自身が与えたもので、終点座標は同じである.
ここに書くときはd属性のコマンドを配列で保存し、最後にスペースで統一設定につなぎます.
注意:
扇形図を描くとき、終点と起点の間の角度が180°未満のとき、large-arc-flagは0を取り、180°以上のときは1を取るので、三元演算子で「?:」;
また、Arc startとArc endの2つの点が重なると、svgは曲線を描くことができません.点を通る弧が無数にあるので

    
    
    
    
    
    
        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(' '));//        ，   
        }