3

スムーズなグラフィックスのためにRaphaelを利用するjQueryのプログレスバープラグインに取り組んでいます。

このラファエルの例（極時計）で提供されている属性関数を変換してみました。

問題は、最初はラファエルの例にも変形エラーがあることに気づかなかったということです。比較的大きな円はそれを軽減するだけです。小さいものを見ると目立ちます。

そして、はい、私は基本的にいくつかのマイナーな調整で関数をコピーして貼り付けましたが、最終結果は同じエラーを示します。

シーンに参照円を追加したJSBinを設定したので、問題を簡単に見つけることができます：http: //jsbin.com/ekovir/1

アーク関数を調整して適切な円を描くにはどうすればよいですか？

4

2 に答える 2

1

Chrome の SVG レンダリング実装のバグだと思います。少なくとも FireFox と Safari では見栄えが良くなります。

(center.x + radius * cos(a-0.01), center.y + radius * sin(a-0.01))また、弧の終点を選択するときは、 の代わりにを使用した方がよいと思います(center.x + radius * cos(a) - 0.01, center.y + radius * sin(a))。そうしないと、中心が少しずれることがあります。

回避策として、プログレス バー用に 1 セットのセグメントを作成し、古いセグメントの上に新しいセグメントを描画するのではなく、作業が完了するとその色を変更することをお勧めします。これはどのブラウザーでも問題なく表示されるはずです。また、対照的な背景の円がなければ、欠陥を簡単に見つけることはできないと思います。

于 2012-09-07T09:57:23.747 に答える
1

円が変形する原因がわかりました。

以前stroke-widthは円の「太さ」「キャップ」を設定していたのですが、大きくなるほど変形していきます。

少なくとも、これらは私の観察です。技術的には、他の何かが原因である可能性もあります。

とにかく、適切なドーナツを得るために、私はこの方法で終わりました：

/**
 * Donut circle drawing
 *
 * @param  integer  start       Percentage to start with
 * @param  float    diameter
 * @param  float    fat         How fat should the circle bar be
 * @return object
 */
var fatDonutArc = function (start, diameter, fat)
{
    var center = diameter / 2;
    var outerRadius = center;
    var innerRadius = center - fat; // subtract fat

    var alpha = 360 / 100 * start;
    var a = (90 - alpha) * Math.PI / -180; // -180 starts to draw from 12 o'clock

    // calculate outer ring point coordinates
    var outerX = center + outerRadius * Math.cos(a);
    var outerY = center + outerRadius * Math.sin(a);

    // calculate inner ring point coordinates
    var innerX = center + innerRadius * Math.cos(a);
    var innerY = center + innerRadius * Math.sin(a);

    // path cache
    var path;

    if (start !== 100)
    {
        path = [
            // move to start point of inner ring
            [
                "M",
                center,
                center - innerRadius
            ],

            // draw a line to outer ring
            [
                "L",
                center,
                center - outerRadius
            ],

            // arc to outer ring end
            [
                "A",
                outerRadius,
                outerRadius,
                0,
                +(alpha > 180),
                1,
                outerX,
                outerY
            ],

            // move to inner ring end
            [
                "L",
                innerX,
                innerY
            ],

            // arc to inner ring start
            [
                "A",
                innerRadius,
                innerRadius,
                0,
                +(alpha > 180),
                0,
                center,
                center - innerRadius
            ]
        ];
    }
    else
    {
        path = [
            // move to outer ring start
            [
                "M",
                center,
                center - outerRadius
            ],

            // arc around the clock
            [
                "A",
                outerRadius,
                outerRadius,
                0,
                +(alpha > 180),
                1,
                outerX - .1, // subtract, otherwise the path becomes "reset"
                outerY
            ],

            // connect
            [
                "z"
            ],

            // move to inner circle start
            [
                "M",
                innerX,
                innerY
            ],

            // arc around the clock
            [
                "A",
                innerRadius,
                innerRadius,
                0,
                +(alpha > 180),
                0,
                innerX + .1, // subtract, otherwise the path becomes "reset"
                innerY
            ],

            // and connect
            [
                "z"
            ]
        ];
    }

    return {
        path : path
    };
};

これは次のマッシュアップです: raphael.js - 円グラフをドーナツ グラフに変換+ http://raphaeljs.com/polar-clock.html

ここでは、実際に動作する例を設定しました: http://jsbin.com/erusos/1

まだ答えの出ていない質問が 1 つあります。Chromeで円を完全に丸めないのは CSS レンダラーですか、それとも SVG ですか?

楽しみ！

于 2012-09-12T10:20:40.480 に答える