1

「パイウェッジ」を作成しようとしています。そして、私はそれが苦手です。トリガーを取ってから長い時間が経ちました。私は多くの例を見て、このコードジェネレーターを 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

円弧の最初の 2 つの値 (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(...)したがって、三角関数 ( 、 )内の 4 つのオカレンスはそのMath.sin(...)ままにしておく必要があります。

于 2012-10-26T19:24:29.240 に答える
0

誰が PHP でこれを望んでいますか? あなたがやる！No Contextの回答を変更し、（円の）円弧のSVGパスを計算する方法からの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 に答える