3

次のような「ぼやけた」境界線を持たない、より良いストロークで楕円/楕円を作成することは可能ですか?

どうにかして楕円の周りにより明確なストローク ラインを作成することはできますか、それともその「ぼやけた」境界線と一緒に暮らす必要がありますか? ここに画像の説明を入力

4

3 に答える 3

3

! あなたはそれを行うことができます! 後処理を行うことによって：

1) globalCompositeOperation の使用:

編集：はい、しかしいいえ：少なくともChromeでは、「destination-in」は仕様と一致しません：ソースは宛先の色を計算するために使用されるため、陰影のある色から単一の色を取得することはできません.
(私は JSBin を試してみました: http://jsbin.com/ecipiq/4/ )

また

2) getImageData と performance Array の使用:

  • 一時キャンバスに境界線を引く
  • キャンバスの getImageData
  • 基になるデータの Uint32Array または Uint8Array ビューを取得する
  • 配列内で線形にループします: 値 > しきい値の場合は境界線の色に設定します
  • ターゲット キャンバスに楕円の塗りつぶしを描画します
  • ターゲット キャンバスに ImageData を配置します。

どれ ？

  • 2 つ目は、globalCompositeOperation が機能する必要はありません。
    しかし、ほとんどのブラウザー (すべて?) では、ImageData の get/put が非常に遅く、この事実
    だけでこのソリューションが無効になる可能性があります。
    良い点は、アンチエイリアスを解除する方法を正確に決定できることです。

他の StackOverflow メンバーは、これらすべてについて洞察を持っているかもしれません。

これらのソリューションはいずれも、手書きの非エイリアス楕円関数よりもはるかに高速です。

最初のソリューションの便利なリンク:
http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/

より速く開始するための注意事項
: ImageData で UInt32Array ビューを取得するには、次のようにします。

var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer32     = new UInt32Array(myGetImageData.data.buffer);

次に、sourceBuffer32[i] には、1 つの符号なし 32 ビット int にパックされた赤、緑、青、および透明度が含まれます。0 と比較して、ピクセルが黒でないかどうかを確認します ( != (0,0,0,0) )

または、 Uint8Array ビューでより正確にすることができます:

var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer8     = new Uint8Array(myGetImageData.data.buffer);

グレーの色合いだけを扱う場合は、R=G=B となるので注意してください。

sourceBuffer8[4*i]>Threshold

UInt32Array ビューを使用して、i 番目のピクセルを一度に黒に設定できます。

sourceBuffer32[i]=(255<<24)||(255<<16)||(255<<8);

この例から、灰色/黒以外の色を処理する方法を理解できるはずです。

于 2013-01-20T21:08:07.150 に答える
2

はい、できます！context.stroke()1 回だけではなく 25 回呼び出した結果を次に示します。

ぼやけていない楕円

比較のために、オリジナルは次のとおりです。

ぼやけた楕円

于 2013-01-20T19:26:28.063 に答える
2

短い答えはノーです、ごめんなさい！

仕様では、ブラウザーが使用する必要がある (または使用しない) アンチエイリアシングの方法についてコメントしていないため、ブラウザー間で異なります。Chrome のさまざまなエディション (特に、Chrome ベータ版または開発者チャンネルを使用している場合) は、常にこれに基づいています。

imageSmoothingEnabled仕様でこれを体系化するという話は以前にもありましたが、画像のスムージング (コンテキストのプロパティ)をオフにするオプションがある画像を除いて、何の措置も講じられていません。ただし、これは決してパスには当てはまりません。

残念ながら、最も狭い状況でのみ機能する 1 つの解決策: 楕円が固定されている場合は、Firefox (おそらく最もスムーズなアンチ エイリアシングを備えたブラウザー) で楕円を作成し、それらから画像を生成してから、すべてのブラウザーで画像を描画します。 .

要するに、すべてのブラウザーでピクセルが同じ形状が必要な場合は、画像を使用する必要があります。現在、他に方法はありません。

于 2013-01-20T18:58:23.610 に答える