點選上面這張圖片就可以看到效果~
這是利用 SVG 中 path 繪製的扇形，
與 HTML5 的繪製方式有滿大的差異，
當然如果不想用寫程式的，還想直接看到效果，
可以使用如 illustrator 等向量繪圖軟體來產生 SVG，
接著再使用如 Dreamweaver 等網頁程式編輯軟體開啟 SVG，
也是能夠看到 SVG 的寫法，
而這篇是我撰寫的 SVG 扇形原始模型，
為了瞭解整個扇形的程式運作原理，
之後也方便使用陣列或是程式來控制扇型的區塊，
在此就做個筆記~
使用 path 繪製扇形，
最重要的就是利用三角函數，
由角度取得圓心、起始點、終點三個點的座標，
以及判斷當夾角大於 180 度的時候，
將弧形曲線判斷為大角度的弧線，
如此就能輕鬆的畫出漂亮的扇形~
javascript 的部分
html 的部分
最重要的就是利用三角函數，
由角度取得圓心、起始點、終點三個點的座標，
以及判斷當夾角大於 180 度的時候，
將弧形曲線判斷為大角度的弧線，
如此就能輕鬆的畫出漂亮的扇形~
javascript 的部分
$(function(){
var startAngle=0;
var cx = 100;
var cy = 100;
var r = 100;
var deg1 = 30 + startAngle;
var deg2 = 240 + deg1;
var deg3 = 90 + deg2;
var x0 = cx+r*Math.cos(startAngle*Math.PI/180);
var y0 = cy-r*Math.sin(startAngle*Math.PI/180);
var x1 = cx+r*Math.cos(deg1*Math.PI/180);
var y1 = cy-r*Math.sin(deg1*Math.PI/180);
var x2 = cx+r*Math.cos(deg2*Math.PI/180);
var y2 = cy-r*Math.sin(deg2*Math.PI/180);
var x3 = cx+r*Math.cos(deg3*Math.PI/180);
var y3 = cy-r*Math.sin(deg3*Math.PI/180);
$("#test1").attr("d","M "+cx+","+cy+" L "+x0+","+y0+" A "+r+","+r+" 0 0,0 "+x1+","+y1+" Z");
$("#test2").attr("d","M "+cx+","+cy+" L "+x1+","+y1+" A "+r+","+r+" 0 1,0 "+x2+","+y2+" Z");
$("#test3").attr("d","M "+cx+","+cy+" L "+x2+","+y2+" A "+r+","+r+" 0 0,0 "+x3+","+y3+" Z");
});
html 的部分
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> <path id="test1" style="fill:#fe0; stroke:#fff; stroke-width:5;" /> <path id="test2" style="fill:#0a0; stroke:#fff; stroke-width:5;" /> <path id="test3" style="fill:#e00; stroke:#fff; stroke-width:5;" /> </svg>
沒有留言:
張貼留言