ソースコードのラスタライズについて
特定のプラットフォームのバグのあるエンジンに対処しないように、ブログでコードを写真に変換する方法を定期的に確認しています。 ほとんどの場合、作者はスクリーンショットを撮るだけですが、私はもっと直接的な方法で行きました。自分のエディターでコードを「ラスタライズ」する機能を組み込みました。 この投稿は、私がどのようにそれをしたかについてです。 この投稿は、彼が説明していることの例でもあります。 コードは実際にここでラスタライズされています。 すべてのソースはここにあります： http : //butbucket.org/nesteruk/typografix
HabraEditorなどで使用されている構文ハイライトのソリューションがすでにあります。 ソリューション自体はこのプロジェクトに基づいており、同じHabréでBooなどの言語のバックライトを作成するために個人的に取って少し修正しました。 しかし、結果のHTMLを画像にラスタライズする方法は？ たとえば、実際のブラウザ（たとえば同じIE）を使用して、その中にHTMLを表示し、スクリーンショットを撮って、クリッピングすることができることは明らかです。 しかし、私はこのアプローチが2つの理由で好きではありませんでした。
最初に、テキストラスタライザ、それがどのような動物であるのか、なぜ必要なのかについて話しましょう。
この記事の見出しをご覧ください。 それらはグラフィックス、jpgファイルです。 当然、後でポストに挿入できるように、Photoshopで個別に作成しませんでした。このため、 ラスタライザー 、つまり入力でマークアップを取得できるコンポーネント（HTMLなど）を使用しますが、出力はグラフィックファイルを提供します。
小さな例を次に示します。マークアップに
と書くと
したがって、私が使用するマークアップは、通常の太字と斜体の両方、および大文字、合字などのOT機能をラスタライズする機会を与えてくれます。
これはすべて、
、
、
などのタグの助けを借りて行われます。 テキストの個々のセグメントごとに、次の構造が存在します。
したがって、ラスタライズされるすべてのテキスト（またはコード）は、そのような要素の単なるシーケンスです。 通常のテキスト比較を使用してマークアップを解析し、1つまたは別の要素にマークアップを適用する
クラスがあります。
これはすべて、マークアップとテキストを分離する再帰的なパーサーを使用します。
ルート要素は次のメソッドで、エディターを呼び出します（WPF自体で記述されています）。
ご覧のとおり、テキストの書式設定の「プロトタイプ」がメソッドに渡され、ヘッドセット、フォントサイズ、色などが再定義されていないすべての要素に適用されます。
次に、ラスタライズ方法について説明します。 いくつかのステップがあります。 まず、DirectWriteを使用しているため（注意：.NetのDirectWrite「ドライバー」は準備ができていますが、64ビット環境では機能しません）、COMも使用するインフラストラクチャが大量にあります。
ビットマップまたはfotmatirovaniyaテキストの作成には、この「良さ」が何らかの形で現れます。 最も興味深いのは
です。これは、特定のテキストのOT機能のセットが定義される場所です。
次に、プロトタイプが解析され、マークアップが解析されます。
この後、各要素はバイパスされ、必要なグラフィックプロパティが設定されます。 これがいかに簡単かを示す小さな例です：
生成されたレンダーターゲットの内容は、そのビットマップ（
意味する）のバイトにコピーされ、P / Invokeを通過する前に「ロック」されます。
したがって、HTMLとラスタライザーがあり、正しいマークアップを取得する必要があります。 これは単純に行われます：
小さな問題があります-角括弧がマークアップに使用されるため、
を
に変更する必要があります。 心配する必要はありません。 最後のステップは、空の
を準備し、DirectWriteラスタライザーを使用して描画することです。
既存のインフラストラクチャをラスタライザに簡単に適合させることができました。 すでに彼の作品の結果をご覧ください。 はい、もちろん、あなたはそのようなテキストでカット＆ペーストを行うことはできませんが、これに加えて、すべてが非常に美しく（IMHO）、そして最も重要なこと-あなたはすべての種類の注釈のためにラスタライズ機能を使用することができます-コードですぐに。 試してみる価値はあると思います。
HabraEditorなどで使用されている構文ハイライトのソリューションがすでにあります。 ソリューション自体はこのプロジェクトに基づいており、同じHabréでBooなどの言語のバックライトを作成するために個人的に取って少し修正しました。 しかし、結果のHTMLを画像にラスタライズする方法は？ たとえば、実際のブラウザ（たとえば同じIE）を使用して、その中にHTMLを表示し、スクリーンショットを撮って、クリッピングすることができることは明らかです。 しかし、私はこのアプローチが2つの理由で好きではありませんでした。
- まず、このようなソリューションは非常に脆弱です-ブラウザーの自動化に関する広範な経験があるため、そのような操作はブラウザーに関係なく定期的にクラッシュすることを敢えて言います（そして、IEはテキストのより良いレンダリングのためにとにかくそれを使用したいと思います）。
- 第二に 、その時までに自分の「ラスタライザー」をすでに持っていましたが、投資した努力を失いたくありませんでした。
最初に、テキストラスタライザ、それがどのような動物であるのか、なぜ必要なのかについて話しましょう。
この記事の見出しをご覧ください。 それらはグラフィックス、jpgファイルです。 当然、後でポストに挿入できるように、Photoshopで個別に作成しませんでした。このため、 ラスタライザー 、つまり入力でマークアップを取得できるコンポーネント（HTMLなど）を使用しますが、出力はグラフィックファイルを提供します。
小さな例を次に示します。マークアップに
Hello, World
と書くと
Hello, World
したがって、私が使用するマークアップは、通常の太字と斜体の両方、および大文字、合字などのOT機能をラスタライズする機会を与えてくれます。
これはすべて、
[b]
、
[i]
、
[sw]
などのタグの助けを借りて行われます。 テキストの個々のセグメントごとに、次の構造が存在します。
したがって、ラスタライズされるすべてのテキスト（またはコード）は、そのような要素の単なるシーケンスです。 通常のテキスト比較を使用してマークアップを解析し、1つまたは別の要素にマークアップを適用する
MarkupParser
クラスがあります。
これはすべて、マークアップとテキストを分離する再帰的なパーサーを使用します。
ルート要素は次のメソッドで、エディターを呼び出します（WPF自体で記述されています）。
ご覧のとおり、テキストの書式設定の「プロトタイプ」がメソッドに渡され、ヘッドセット、フォントサイズ、色などが再定義されていないすべての要素に適用されます。
次に、ラスタライズ方法について説明します。 いくつかのステップがあります。 まず、DirectWriteを使用しているため（注意：.NetのDirectWrite「ドライバー」は準備ができていますが、64ビット環境では機能しません）、COMも使用するインフラストラクチャが大量にあります。
ビットマップまたはfotmatirovaniyaテキストの作成には、この「良さ」が何らかの形で現れます。 最も興味深いのは
IDWriteTypography
です。これは、特定のテキストのOT機能のセットが定義される場所です。
次に、プロトタイプが解析され、マークアップが解析されます。
この後、各要素はバイパスされ、必要なグラフィックプロパティが設定されます。 これがいかに簡単かを示す小さな例です：
生成されたレンダーターゲットの内容は、そのビットマップ（
System.Drawing.Bitmap
意味する）のバイトにコピーされ、P / Invokeを通過する前に「ロック」されます。
したがって、HTMLとラスタライザーがあり、正しいマークアップを取得する必要があります。 これは単純に行われます：
小さな問題があります-角括弧がマークアップに使用されるため、
[
を
\[
に変更する必要があります。 心配する必要はありません。 最後のステップは、空の
Bitmap
を準備し、DirectWriteラスタライザーを使用して描画することです。
既存のインフラストラクチャをラスタライザに簡単に適合させることができました。 すでに彼の作品の結果をご覧ください。 はい、もちろん、あなたはそのようなテキストでカット＆ペーストを行うことはできませんが、これに加えて、すべてが非常に美しく（IMHO）、そして最も重要なこと-あなたはすべての種類の注釈のためにラスタライズ機能を使用することができます-コードですぐに。 試してみる価値はあると思います。
All Articles