2012-06-24 13 views
21

は、ここで最初の行がぼやけて、より広いよりも1つのピクセルに見える非網膜3GSとシミュレータ上で簡単な描画UIBezierPathストローク1px線と1px幅の長方形を塗りつぶす - 異なる結果。

 

- (void)drawRect:(CGRect)rect 
{ 
    //vertical line with 1 px stroking 
    UIBezierPath *vertLine = [[UIBezierPath alloc] init]; 
    [vertLine moveToPoint:CGPointMake(20.0, 10.0)]; 
    [vertLine addLineToPoint:CGPointMake(20.0, 400.0)]; 
    vertLine.lineWidth = 1.0; 
    [[UIColor blackColor] setStroke]; 
    [vertLine stroke]; 

    //vertical rectangle 1px width 
    UIBezierPath *vertRect= [UIBezierPath bezierPathWithRect:CGRectMake(40.0, 10.0, 1.0, 390.0)]; 
    [[UIColor blackColor] setFill]; 
    [vertRect fill]; 

} 

ですが、2行目はぱりっとしています。

残念ながら私はiPhone4も新しいiPadもテストしていませんが、網膜シミュレータでは両方の線が同じように見えます。

質問:脳卒中の代わりに矩形を使用するのは、網膜以外のデバイスと網膜デバイスで同じ結果を得るための唯一の方法ですか?

答えて

51

矩形の内側を塗りつぶしていますが、中央から線を引っ張っています。両方の場合の座標(矩形の隅と行の開始座標と終了座標)は整数値(小数なし)として定義されているため、座標は正確な点境界にあります。

上記の「座標」は、画面上のポイントと混同しないように、ラインのポイントについて話すときに上に表示されました。同じ理由で、「ピクセル境界」の代わりに「点境界」とも言いました。 iOSはピクセルの代わりに "ポイント"と呼ばれるものの座標とすべてのポイントを定義します。ポイントは分解能に依存しない測定値です。網膜と非網膜の両方のデバイスは、画面上の点の数が同じですが、実際のピクセルの数が違うだけです。

のコーナーは、ポイントの境界上にある四角形を埋めるに比べて(あなたの質問のように)ポイントの境界上にあるラインなでる見てみましょう:私はラインをなでるいます以下の図では

を黒で、網膜以外のスクリーンと網膜スクリーンの両方にオレンジ色の長方形を塗りつぶします。私はまた線と矩形を青で概説しました。どちらの場合も、その解像度の点のサイズを確認し、実際のピクセルグリッドと比較することができます。

網膜以外のケースでは、1点の線(この場合は1ピクセルの線幅に相当)で中心から線を引っ張ると、上のピクセルの半分が塗りつぶされ、下のピクセルの半分。ピクセルは半分しか塗りつぶされていないので、それらのピクセルの不透明度は50%です。これにより、明るい色(白い背景上)になります。上部と下部の両方のピクセルがパーティで塗りつぶされているので、これを塗りつぶすと上下の両方のピクセルが塗りつぶされます。これにより、線が1ピクセルではなく2ピクセル幅のように見えます。

内部で塗りつぶされた矩形とすぐに比較できます。

non retina

網膜画面上の同じケースが異なって見えます。この場合、点のサイズは同じですが、1ではなく4つのピクセルで構成されています。このとき、線を描画するとき、線の上の半分の点と線の下の半分の点がピクセルの行を完全に埋めます解像度の高い画面のために上下に表示されます。これは、線が1ポイント幅のように見え、色が完全に不透明に見えることを意味します。

また、塗りつぶし矩形が同じように見えることがあります。

retina


この問題を解決するために、あなたは半分の画素にあなたのラインのためにポイントを置きます。低解像度のデバイス上で中心から線を引くことは、線が半分の点を上に、半分の点が下に伸びることを意味する。ラインの中心がポイントの中心にあるので、これは、ストロークラインがピクセル内に完全に位置し、ラインが鮮明に見えることを意味する。これを行うことは網膜線に何の効果も及ぼさないでしょう。なぜなら、半分の点を動かすことは依然として上下のピクセルを完全に埋めることを意味するからです。

以下の図(網膜)では、ポイントグリッドとピクセルグリッドの両方を示しています。

half pixel non-retina half pixel retina

2

あなたはストロークと塗りつぶしと異なる結果を得る理由は、引数の彼らの解釈が異なることです。

ストロークは、座標の両側で線の幅の半分を足します。したがって、あなたのポイントは20.0で、行の幅は1pxです。結果は、理論上、(19.5-20.5)の間の1ピクセルの黒線になります。デバイス画面に非整数画素がないので、(19-21)の間に2画素灰色/ぼやけた線に変換されます。これを回避するには、CGPointMake(20.5,10.5)のように各座標を0.5で合計して、ピクセル間で幅を分割しないようにする必要があります。

しかし、塗りつぶしの引数は領域の境界を塗りつぶすために使用され、CGRectMake(40.0、10.0、1.0、390.0)は(40 - 41)の間の領域を意味します。その結果、画素上にぼやけて見える部分部分は存在しない。

関連する問題