2

これは、数学の問題か、SVG の問題だと思います。raphael.js サイトで見つけたいくつかのサンプル コードを変更しようとしていました。カスタムの中心点を持つように変更しました。ここで、円弧の開始角度を指定できるように変更したいと思います。(d3.js に似ているので、中央が欠けている棒グラフのようなものに使用できます)。

しかし、どこから、どのように始めればよいかわかりません。私の数学はひどいものです。アルファが何であり、変数が何をするのかわかりません。または、なぜ x と y がそのように計算されるのか。私は SVG 仕様を何度も読んできましたが、いくつかの重要な基本知識が欠けていて、わかりません。

このことを理解し始めることができるように、誰かが私を正しい方向に向けることができますか?

window.onload = function () {
    var r = Raphael("holder", 600, 600),
        R = 200,
        init = true,
        param = {stroke: "#fff", "stroke-width": 30};
    // Custom Attribute
    r.customAttributes.arc = function (xPos, yPos, value, total, R) {
        var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xPos + R * Math.cos(a),
        y = yPos - R * Math.sin(a),
        var path = [["M", xPos, yPos - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
        return {path: path};
    };
    var sec = r.path().attr(param).attr({arc: [300, 300, 3, 60, R]});
};

コードを実行すると、以下が生成されます。

<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
    <path style="" fill="none" stroke="#bfb5b5" d="M300,100A200,200,0,0,1,361.8033988749895,109.7886967409693" stroke-width="30">
</svg>

また、円弧パラメーターがどのように連携して描画しているものを描画するのかわかりません。

質問の焦点が合っていないことをお詫びします。

編集:極時計の例に基づいています。http://raphaeljs.com/polar-clock.html

4

1 に答える 1

2

サンプルの作成者は、時計の回転に基づいてアークを簡単に作成できるようにするために、カスタム アトリビュートを作成しようとしていると思います。基本的totalに、カスタム属性のパラメーターは時計の合計の動き (60 秒) をvalue表し、(あなたの場合は 3) は描画しようとしている円弧の長さ (秒単位) を表します。したがって、基本的には 3 秒のアークがあります。

数学のために：

  • alpha: 円弧の角度 (度単位)。秒から度への変換に気付きます: 3 秒 -> 18 度

  • a: ラジアン単位の角度。三角関数の公式は度ではなくラジアンを使用するため、この変換が必要です。私が理解していない何らかの理由で、これは補角です（90 - alpha）
    編集：補角は（おそらく）三角法ではy軸が上向きで、SVGキャンバスでは下向きであるという事実を補うために使用されます。

  • x, y: 描画しているパス (円弧) の終点。これらは初等三角法を使用して計算されます (申し訳ありませんが、ここでは何の助けも得られません)。

SVG アークのパラメーターについては、http ://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands で説明されています。

于 2012-05-03T22:42:01.553 に答える