5

現在、KineticJS キャンバス フレームワークを使用してアークを描画しようとしています。私が抱えている問題は、これらの円弧が必要なほど「完全に」円形ではないことです。

それらは次のように引き出されます。

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);    // Arc of 270°
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

ストロークでアンチエイリアシングを使用せずにピクセルベースのメディアでほぼ完全な円をレンダリングすることはできないため、これが問題になる可能性があることはわかっていました。

この問題は、ベクター グラフィックスでレンダリングすることで解決できるのでしょうか、それとも別の解決策があるのでしょうか?

この問題の概要を説明するために JSFiddle を含めました。円は軸を中心に回転してアニメーション化されています。この効果は、アークが回転するときに「ぐらつく」ように見えることでより明白になります。

JSFiddle: http://jsfiddle.net/EHDFV/

4

1 に答える 1

0

ぐらつきは目の錯覚でしょうか。

アニメーションの周りに静止した黒い円を追加しました。

var blackCircle = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, (r + 10), 0, 2 * Math.PI, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(0,0,0)',
    strokeWidth: 1,
    offset: [x, y]
});

あなたのぐらつきはどこかで黒い円を横切っていますか、それとも隙間を残していますか?

新しいフィドルhttp://jsfiddle.net/EHDFV/1/

于 2013-03-19T15:12:06.717 に答える