5

Raphaël.js を使用していくつかの小さな円 (半径 2 ～ 4 ピクセル) を描画しています。これは、IE を除くすべてのブラウザーで SVG を介して行われます。円は私には滑らかに見えないので、私の質問は次のとおりです。

  1. Raphaël.js にアンチエイリアスを追加する方法はありますか?
  2. それを除けば、SVGオブジェクトをアンチエイリアスする方法はありますか?
4

4 に答える 4

6

私も答えを探しているときにこの投稿に出くわしました。ストロークを明るい色に設定しようとした後、ぼやけて見えるだけであることがわかりました。

ただし、以下のようにストロークを「なし」にすると、エッジの滑らかさに大きな違いが生じます。

    var circle = paper.circle(50, 40, 20);
    circle.attr("fill", "#F00");
    circle.attr("stroke", "none");
于 2011-10-03T11:51:22.073 に答える
2

さらに実験してみると、問題は SVG がアンチエイリアスされていないことではないと思います (実際、線を描画するときに、通常は に設定shapeRenderingしてアンチエイリアスを無効にしたいことがわかりました。この問題crisp-edgesを参照してください) 。提供されたアンチエイリアシングよりも円。

Raphaël.js でこれを実現するには、fillとstroke色を別々に設定します。たとえば、白い背景では、strokeを より明るい色に設定するとfill、目的の効果が得られます。

于 2010-06-19T16:34:14.410 に答える
0

これは Safari 6 でしかテストしていませんが、同じ色のアンチエイリアス ストロークを追加すると効果があるようです。

<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >
于 2014-06-06T21:41:10.460 に答える
0

アンチエイリアシングは SVG レンダラーを介して行われるため、SVG を表示しているクライアントを確認する必要があります。ただし、問題は、描画するものが小さすぎてアンチエイリアス処理がうまくいかないことです。半径 2px の円がある場合、基本的にひし形としてレンダリングされます。これは、そのサイズの円に最も近いためです。半径の最初のピクセルは円の中心に使用され、2 番目のピクセルは少し丸みを与えるために使用されますが、非常に小さいためダイヤモンドのように見えます。

アンチエイリアシングを使用するには追加のピクセルが必要であり、このような小さな形状ではあまり効果がありません。画像を拡大しない限り、アンチエイリアスは適用されません。

于 2010-06-18T17:59:16.233 に答える