2

UIView の境界線を drawRect で描画された線と結合しようとしています。どちらも同じ幅で使用しています。しかし、問題は、描画された線の結果の幅が両方で同じ場合とそうでない場合があることです-これはデバイスの向きによっても変わります! ただし、デバイスの向きを変更しなくても、一般的には同じ幅ではありません。

境界線は次のように描画されます:

view.layer.borderColor = [UIColor blackColor].CGColor;
view.layer.borderWidth = 1.0f;

そのビューの上には、UIView のサブクラスである別のビューがあります。両方のビューの幅は同じで、この 2 番目のビューは上のビューの上部をカバーしています。カバー ビューは、drawRect で次のコードを使用して左側に線を描画します。これは、その下にある上のビューの境界線と完全に一致するはずです。

CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat x = self.bounds.origin.x;
CGFloat y = self.bounds.origin.y;
CGFloat width = self.bounds.size.width;
CGFloat height = self.bounds.size.height;

CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextSetLineWidth(context, 1.0f);

// Left line
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x, height);
CGContextStrokePath(context);

// Right line
CGContextMoveToPoint(context, width - 1.0f, y);
CGContextAddLineToPoint(context, width - 1.0f, height);
CGContextStrokePath(context);

これを達成する方法はありますか?現在、幅は常に 1.0f ですが、両方の線が同じ表示幅で描かれているのは偶然です。

目標は、下部の角が丸くなっているが、上部の通常のエッジを持つビューのように見えるものになることです。それが私がこれをしている理由です。最初のビューは角が丸くなっており、その上の 2 番目のビューは幅は同じですが、上部が覆われているため、上部の丸みを帯びた角は見えません。

縦向きのスクリーンショット: ここに画像の説明を入力

横向きのスクリーンショット: ここに画像の説明を入力

黄色のビューは白いビューの上にあります。白いビューの黒い線は、view.layer.borderWidth = 1.0f の結果として描画されます。黄色のビューの左右にある黒い線は、上記のコードで drawRect に描画されます。方向を変更すると再描画がトリガーされますが、描画コード自体は同じままです。どちらのスクリーンショットも、Retina ディスプレイを搭載した iPhone (iPhone 4S) のものです。

私が知る限り、すべての値は「整数」です。

x: 0.000000, y: 0.000000
width: 264.000000, height: 10.000000
frame.origin.x: 33.000000, frame.origin.y: 38.000000
4

1 に答える 1

8

あなたが描いている線はピクセルで整列されていないと思います。私が間違っている場合は、ここで接線を無視してください。しかし、それでも有益な情報です。

この WWDC 2011 のビデオからいくつかのスクリーンショットをお借りします。

「1-29 セッション 129 - iOS 開発者のための実践的な描画」

全体を見ることをお勧めします。関連セクションは 20:50 マークあたりから始まります。

基本的に、(1,2) から (4,2) に 1 点の線を引きたいと想像してください。

ここに画像の説明を入力

コア グラフィックスは、2.0 である y 値に沿って中央に配置しようとします。これは、上端が y=1.5 で下端が y=2.5 の線を描画しようとすることを意味します。

ここに画像の説明を入力

Retina ディスプレイでは、y=1.5 と y=2.5 がピクセルで整列されているため、これは問題なく動作します。

ここに画像の説明を入力

ただし、非 Retina ディスプレイでは、グラフィックス システムは、可能な限り最も近い一致を取得するために、半分の強度で 2 つの垂直ピクセルを埋めるように強制されます。

ここに画像の説明を入力

この効果は、より小さな小数ポイント値を扱っている場合でも Retina ディスプレイで見られることに注意してください。したがって、この問題は、ビューのフレームによっては Retina ディスプレイでも見られることがあります。

この問題を修正するには、線幅が奇数の場合はいつでも、描画するポイント値を 0.5 オフセットする必要があります。状況に応じて上下左右にオフセットする必要があります。

ここに画像の説明を入力

これが役立つことを願っています。スクリーンショットがないと、問題が何であるかを判断するのは困難です。

于 2012-04-04T10:12:34.493 に答える