さまざまなテキスト要素と画像要素を使用してビューを構築しています。
テキストの影だけでなく、その背後にあるテキストのぼやけたコピーを使用してビューにテキストを表示したい。
ガウスぼかしテキストを UIImage またはレイヤーに適用するにはどうすればよいですか?
さまざまなテキスト要素と画像要素を使用してビューを構築しています。
テキストの影だけでなく、その背後にあるテキストのぼやけたコピーを使用してビューにテキストを表示したい。
ガウスぼかしテキストを UIImage またはレイヤーに適用するにはどうすればよいですか?
AppleのGLImageProcessingiPhoneサンプルをご覧ください。とりわけ、それはいくつかのぼかしを行います。
関連するコードは次のとおりです。
static void blur(V2fT2f *quad, float t) // t = 1
{
GLint tex;
V2fT2f tmpquad[4];
float offw = t / Input.wide;
float offh = t / Input.high;
int i;
glGetIntegerv(GL_TEXTURE_BINDING_2D, &tex);
// Three pass small blur, using rotated pattern to sample 17 texels:
//
// .\/..
// ./\\/
// \/X/\ rotated samples filter across texel corners
// /\\/.
// ../\.
// Pass one: center nearest sample
glVertexPointer (2, GL_FLOAT, sizeof(V2fT2f), &quad[0].x);
glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &quad[0].s);
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glColor4f(1.0/5, 1.0/5, 1.0/5, 1.0);
validateTexEnv();
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
// Pass two: accumulate two rotated linear samples
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE);
for (i = 0; i < 4; i++)
{
tmpquad[i].x = quad[i].s + 1.5 * offw;
tmpquad[i].y = quad[i].t + 0.5 * offh;
tmpquad[i].s = quad[i].s - 1.5 * offw;
tmpquad[i].t = quad[i].t - 0.5 * offh;
}
glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &tmpquad[0].x);
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
glActiveTexture(GL_TEXTURE1);
glEnable(GL_TEXTURE_2D);
glClientActiveTexture(GL_TEXTURE1);
glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &tmpquad[0].s);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glBindTexture(GL_TEXTURE_2D, tex);
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_INTERPOLATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB, GL_TEXTURE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_PREVIOUS);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB, GL_PRIMARY_COLOR);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB, GL_SRC_COLOR);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_REPLACE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_ALPHA, GL_PRIMARY_COLOR);
glColor4f(0.5, 0.5, 0.5, 2.0/5);
validateTexEnv();
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
// Pass three: accumulate two rotated linear samples
for (i = 0; i < 4; i++)
{
tmpquad[i].x = quad[i].s - 0.5 * offw;
tmpquad[i].y = quad[i].t + 1.5 * offh;
tmpquad[i].s = quad[i].s + 0.5 * offw;
tmpquad[i].t = quad[i].t - 1.5 * offh;
}
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
// Restore state
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glClientActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, Half.texID);
glDisable(GL_TEXTURE_2D);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB, GL_SRC_ALPHA);
glActiveTexture(GL_TEXTURE0);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glDisable(GL_BLEND);
}
iPhone OS は、私が知っているコア イメージ フィルターを提供していません。NSBitmapImageRep が利用可能な場合、テキストを描画し、画像を縮小 (ダウンサンプリング) してから、画像を再び拡大 (アップサンプリング) することで、プリミティブなぼかしを行うことができます。残念ながら、それも欠落しているようです。ぼやけたテキストが Flash で実現されているのを見たことがありますが、これには (最後に確認したところ) ピクセル レベルのフィルタリングがありません。それに関するチュートリアルを探して、Cocoa Touch に適応できることを確認してみてください。
デスクトップでは、間違いなく CoreImage を使用してこれを行います。
ただし、電話では、CoreGraphics を使用してこれを行う方法はないと思います。絶対に重要な場合は、OpenGLES が役立つ場合があります。
ただし、インターフェースを再考することをお勧めします。ぼやけたテキストが気を散らすと思います。
編集: mledford は、CoreAnimation を使用できることをコメントで指摘しています。電話の CA にデスクトップのようなぼかし半径が含まれているかどうかはわかりませんが、試してみてください。
アルファ レイヤーを使用すると、パフォーマンスが低下します。可能であれば、別のアプローチを検討してください (おそらく、テキストを事前に合成し、複数のレイヤーではなくグラフィックにフラット化することもできます)。
試してみて、Instruments を使用してパフォーマンスをチェックし、許容できるかどうかを確認してください。スクロール ビューで実行している場合、スクロールがかなり遅くなります。