1

我正在尝试创建一个“馅饼楔”。而且我不擅长。我已经很久没有参加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”给了我一些奇怪的结果。

4

4 回答 4

6

弧中的前两个值（在 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");
于 2012-10-29T11:23:46.777 回答
6

我使用了已接受答案的修改版本，因为楔形变形的尺寸不同。我只是将绘制圆弧的圆的大小更改为圆的半径。这适用于小于 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;

    }
于 2013-06-26T00:53:35.297 回答
1

不要替换所有的 180，只是那些不涉及在度数和弧度之间转换的。因此，三角函数 ( Math.cos(...), Math.sin(...)) 中出现的 4 次事件应该保持不变。

于 2012-10-26T19:24:29.240 回答
0

谁想要 PHP 中的这个？你做！我已经修改了 No Context 的答案，并与来自How to calculate the SVG Path for an arc (of a circle) 的opsb 的答案混合：

function polarToCartesian($centerX, $centerY, $radius, $angleInDegrees) {
    $angleInRadians = ($angleInDegrees - 90) * pi() / 180.0;
    return array(
        "x" => $centerX + ($radius * cos($angleInRadians)),
        "y" => $centerY + ($radius * sin($angleInRadians)),
    );
}

function describeArc($x, $y, $radius, $startAngle, $endAngle){
    $start = polarToCartesian($x, $y, $radius, $startAngle);
    $end = polarToCartesian($x, $y, $radius, $endAngle);
    $arcSweep = $endAngle - $startAngle <= 180 ? "0" : "1";

    return "M $x $y L $start[x] $start[y] A $radius $radius 0 $arcSweep 1 $end[x] $end[y] z";
}

请注意，如果您想要一个到 360 的楔形，请使用 359.9999。

于 2013-09-18T16:09:01.523 回答