0

HTML5のキャンバスを使用して、主にいくつかの長方形と単純な線で構成される「プレビュー」画像を作成しています。今のところ問題なく動作していますが、どうにかして修正できない問題が 1 つあります。次の状況を想定します。

context.fillStyle = "rgba(0,0,0,0.75)";
context.fillRect(100.64646,100,50.94967,20);
context.fillRect(100.64646+50.94967,100,100,20);

だから私はいくつかの不透明度を持つ2つの長方形を描いています。x 開始座標に最初の rect の x の長さを加えた値は、2 番目の rect の x 開始座標に等しいため、理論的には、間にマージンなしで衝突するはずです。残念ながら、結果は異なります: ( http://files.clemensfreitag.de/thin_spacing.jpgを参照)

ボックス間には非常に小さな間隔があり、背景色が表示されます。ただし: 座標と長さが整数値の場合、この問題は発生しません。

浮動小数点値を使用してそれを行う方法はありますか? 描画する前にそれらを整数に変換することは、私のアプリケーションでは受け入れられるかもしれませんが、なぜこれが浮動小数点数で機能しないのか疑問に思っています。

ベスト、クレメンス

4

2 に答える 2

2

表示されているのは、2 つの不透明な色を重ね合わせた結果です。最初の四角形が 151.59613 で終わると、四角形は自動的にアンチエイリアス処理され、右端の列が rgba(0,0,0,0.4470975) で埋められます。2 番目の四角形が同じ x 座標で始まる場合、これもアンチエイリアス処理され、左端の列 (最初の四角形の右端と同じ) が rgba(0,0,0,0.3029025) で埋められます。2 つの値の合計は rgba(0,0,0,0.75) になりますが、このようにブレンドされるわけではありません。代わりに、2 番目の色 (rgba(0,0,0,.3029025)) が最初の色の上に描画され、rgba(0,0,0,0.4470975+(1-0.4470975)*0.3029025) = rgba(0) になります。 ,0,0,0.61457305)。したがって、実際には 2 つの四角形の間にギャップはありませんが、グレーのわずかに明るい色合いの 1 ピクセルの列です。

同様に、単色を使用している場合、2 番目の四角形のアンチエイリアス処理された列が最初の四角形を上書きし、「ギャップ」にさらに明るいグレーの陰影が生じます。

アンチエイリアシングが不要なため、整数値では問題は発生しません。各長方形はピクセルの端で終了します。

どの設定もこれを修正していないようで、globalCompositeOperationアンチエイリアシングをオフにすると 1 ピクセルのギャップが生じることがあるので、最も簡単な解決策は整数値を強制することだと思います (または、その列をクリアしてから、目的の色で塗りつぶすこともできます)。 .

于 2012-04-29T17:25:24.470 に答える
0

この問題は、float ベースのグリッド (特に垂直線と水平線、したがって四角形) にオブジェクトを描画する方法に関連しています。

説明とスキーマについては、http: //canop.org/blog/?p=220を参照してください。

オブジェクトのサイズに応じて、形状に整数または中間整数の座標とサイズを使用する必要があります。目標は、両方の次元で完全なピクセルを埋めることです。

例えば ​​：

  • 細い線 (1 ピクセル幅) には中間整数を使用します
  • 2 ピクセル幅の線に整数座標を使用する

（そして四角形のロジックを拡張します）

于 2012-04-30T19:52:15.390 に答える