SVG JavaScript"pie wedge"生成器

Question

我正在努力创造一个"馅饼楔".而且我很擅长.自从我接受trig之后,这是一段很长的时间.我看了很多例子,并在JS中使用了这个代码生成器:

var startPointX = 200;
var startPointY = 200;
var startAngle = 180;
var endAngle = 210;
var x1 = startPointX + 180*Math.cos(Math.PI*startAngle/180); 
var y1 = startPointY + 180*Math.sin(Math.PI*startAngle/180); 

var x2 = startPointX + 180*Math.cos(Math.PI*endAngle/180);
var y2 = startPointY + 180*Math.sin(Math.PI*endAngle/180);
console.log("M200,200 L" + x1 + "," + y1 + " A180,180 0 0,1 " + x2 + "," + y2 + " z");

它很棒!

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="red" stroke="none" stroke-width="0" />
</svg>

但是,我需要做的是改变生成的"楔形"的半径.我似乎无法弄清楚哪些参数对应,或者我将如何修改我的方程以进行补偿.取代所有的"180"给了我一些奇怪的结果.

Answer 1

弧中的前两个值(在A之后)是弧的起始坐标,因此应该等于x1,y1.尝试:

var startPointX = 200;
var startPointY = 200;
var startAngle = 180;
var endAngle = 210;
var radius = 100;

var x1 = startPointX + radius * Math.cos(Math.PI * startAngle/180); 
var y1 = startPointY + radius * Math.sin(Math.PI * startAngle/180);     
var x2 = startPointX + radius * Math.cos(Math.PI * endAngle/180);
var y2 = startPointY + radius * Math.sin(Math.PI * endAngle/180);

console.log("M200,200 L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0,1 " + x2 + "," + y2 + " z");

Answer 2

我使用了已接受答案的修改版本,因为楔子变形了不同的尺寸.我只是将绘制圆弧的圆的大小更改为圆的半径.这适用于小于180度的楔形.

var generateWedgeString = function(startX, startY, startAngle, endAngle, radius){
        var x1 = startX + radius * Math.cos(Math.PI * startAngle/180);
        var y1 = startY + radius * Math.sin(Math.PI * startAngle/180);
        var x2 = startX + radius * Math.cos(Math.PI * endAngle/180);
        var y2 = startY + radius * Math.sin(Math.PI * endAngle/180);

        var pathString = "M"+ startX + " " + startY + " L" + x1 + " " + y1 + " A" + radius + " " + radius + " 0 0 1 " + x2 + " " + y2 + " z";

        return pathString;

    }