1. ホーム
  2. text

[解決済み] CATextLayerのテキストを鮮明にする方法

2023-01-23 03:38:33

質問

私は CALayer を追加して CATextLayer を追加すると、テキストがぼやけてしまいます。 ドキュメントでは、彼らは"サブピクセルアンチエイリアシング"について話していますが、それは私にとってあまり意味がありません。 どなたか CATextLayer を作るコードスニペットをお持ちの方はいらっしゃいますか?

Appleのドキュメントにあるテキストはこちらです。

注意:CATextLayer はテキストをレンダリングするとき、サブピクセル・アンチエイリアスを無効にします。 テキストがサブピクセル・アンチエイリアスを使用して描画されるのは、それが既存の不透明なテキストに合成される場合のみです。 ラスタライズされると同時に既存の不透明な背景に合成される場合のみ、サブピクセル アンチエイリアスを使用してテキストを描画できます。 ラスタライズされたときのみです。サブピクセルアンチエイリアスのかかったテキストを単体で描画する方法はありません。 画像であれレイヤーであれ、サブピクセルにアンチエイリアスされたテキストを単独で描画する方法はありません。 テキストピクセルを織り込む背景ピクセルを事前に用意することはできません。レイヤーの レイヤーの不透明度を「YES」に設定しても、レンダリングモードが変更されることはありません。 レイヤーの不透明度プロパティをYESに設定しても、レンダリングモードは変更されません。

2番目の文は、次のようにすれば見栄えの良いテキストが得られることを暗示しています。 composites の中に existing opaque background at the same time that it's rasterized. それはいいんだけど、どうやって合成するのか、どうやって不透明な背景を与えるのか、どうやってラスタライズするのか。

彼らが Kiosk メニューの例で使用しているコードは、このようなものです。(iOS ではなく OS X ですが、動作すると仮定します!)

NSInteger i;
for (i=0;i<[names count];i++) {
    CATextLayer *menuItemLayer=[CATextLayer layer];
    menuItemLayer.string=[self.names objectAtIndex:i];
    menuItemLayer.font=@"Lucida-Grande";
    menuItemLayer.fontSize=fontSize;
    menuItemLayer.foregroundColor=whiteColor;
    [menuItemLayer addConstraint:[CAConstraint
         constraintWithAttribute:kCAConstraintMaxY
                      relativeTo:@"superlayer"
                       attribute:kCAConstraintMaxY
                          offset:-(i*height+spacing+initialOffset)]];
    [menuItemLayer addConstraint:[CAConstraint
         constraintWithAttribute:kCAConstraintMidX
                      relativeTo:@"superlayer"
                       attribute:kCAConstraintMidX]];
    [self.menuLayer addSublayer:menuItemLayer];
} // end of for loop 

ありがとうございます。


EDIT: 私が実際に使用した、ぼやけたテキストになったコードを追加します。 これは、私が投稿した関連する質問で UILabel ではなく CATextLayer を指定しても、代わりにブラックボックスを取得します。 http://stackoverflow.com/questions/3818676/adding-a-uilabels-layer-to-a-calayer-and-it-just-shows-black-box

CATextLayer* upperOperator = [[CATextLayer alloc] init];
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGFloat components1[4] = {1.0, 1.0, 1.0, 1.0};
CGColorRef almostWhite = CGColorCreate(space,components1);
CGFloat components2[4] = {0.0, 0.0, 0.0, 1.0};
CGColorRef almostBlack = CGColorCreate(space,components2);
CGColorSpaceRelease(space);
upperOperator.string = [NSString stringWithFormat:@"13"];
upperOperator.bounds = CGRectMake(0, 0, 100, 50);
upperOperator.foregroundColor = almostBlack;
upperOperator.backgroundColor = almostWhite;
upperOperator.position = CGPointMake(50.0, 25.0);
upperOperator.font = @"Helvetica-Bold";
upperOperator.fontSize = 48.0f;
upperOperator.borderColor = [UIColor redColor].CGColor;
upperOperator.borderWidth = 1;
upperOperator.alignmentMode = kCAAlignmentCenter;
[card addSublayer:upperOperator];
[upperOperator release];
CGColorRelease(almostWhite);
CGColorRelease(almostBlack);


EDIT 2: これがどのように解決されたかは、以下の私の回答を参照してください。

どのように解決したのですか?

コンテンツのスケーリングを設定する必要があります。

textLayer.contentsScale = [[UIScreen mainScreen] scale];


少し前に、カスタム描画コードを持つ場合、Retina ディスプレイをチェックして、それに応じてグラフィックを拡大縮小する必要があることを知りました。 UIKit は、フォントのスケーリングを含め、このほとんどを引き受けます。

ではそうではありません。 CATextLayer.

私のボケは .zPosition がゼロでないこと、つまり、親レイヤーに変形を適用していたことによります。 これをゼロに設定することにより、ぼかしがなくなり、深刻なピクセレーションに置き換わりました。

あちこち探した結果、私は .contentsScale に対して CATextLayer と設定することで [[UIScreen mainScreen] scale] に設定して、画面の解像度に合わせます。 (これは非レティーナでも機能すると思いますが、確認していません - 疲れているので)

に対してこれを含めた後、私の CATextLayer にこれを入れると、テキストが鮮明になります。 注 - 親レイヤーには必要ありません。

ぼやけた感じは? 3Dで回転しているときに戻ってきますが、最初はテキストが鮮明で、動いている間は分からないので、気がつきません。

問題解決