[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

PDF：グラフィックス

概念

PdfDocumentは、ベクターグラフィックAPIを提供します。一連の描画メソッド（moveTo、lineTo、rectなど）を使用して、グラフィックパスを作成できます。このグラフィックパスに対して、stroke、fill、fillAndStroke、clipの各メソッドを使用して、塗りつぶし、ストローク付け、クリッピングを実行できます。


各描画領域（ヘッダー、本文、フッターなど）は、PdfPathsクラスによって表されるpathsプロパティを持ちます。このクラスは、グラフィックパスを作成および描画したり、グラフィックパスをクリッピングに使用するためのメソッドを提供します。すべての描画メソッドは連結できます。


たとえば、次のコードは線と四角形を描画します。

import * as wjPdf from '@mescius/wijmo.pdf';

doc.paths
    .moveTo(0, 0)
    .lineTo(30, 30)
    .rect(30, 30, 50, 50)
    .stroke();

ブラシとペン

ペンは、線と輪郭付きパスの描画に使用されます。ブラシは、円や四角形などの閉じたパスの塗りつぶしに使用されます。


ペンはPdfPenクラスのインスタンスで、ブラシはPdfBrush抽象クラスから派生するクラスのインスタンスです。PdfDocumentは、PdfSolidBrush、PdfLinearGradientBrush、PdfRadialGradientBrushの各ブラシクラスを提供します。

パスの塗りつぶしとストローク付け

パスにストロークを付けるには、パスの作成が完了した後に、strokeメソッドを呼び出してペンを渡します。パスを塗りつぶすには、パスの作成が完了した後に、fillメソッドを呼び出してブラシを渡します。閉じたパスの塗りつぶしとストローク付けを同時に行うには、fillAndStrokeメソッドを使用します。


たとえば、次のコードは10x10の四角形を赤色のブラシで塗りつぶします。

doc.paths.rect(0, 0, 10, 10).fill(new wjPdf.PdfSolidBrush("#ff0000"));

pen/brush引数を省略すると、ドキュメントのデフォルトのペンが使用されます。これらは、ドキュメントのsetPenメソッドとsetBrushメソッドで変更できます。

doc.setBrush(new wjPdf.PdfSolidBrush("#ff0000"));
doc.paths.rect(0, 0, 10, 10).fill();

これらすべてのメソッドは、PdfPenクラスインスタンスやPdfSolidBrushクラスインスタンスのショートカットとして、wijmo.Colorまたはwijmo.Color.fromStringメソッドが受け付ける任意の文字列を受け付けます。次の線は同等です。

doc.paths.stroke(new wjPdf.PdfPen("#ff0000");
doc.paths.stroke(wijmo.Color.fromRgba(255, 0, 0));
doc.paths.stroke("#ff0000");

doc.paths.fill(new wjPdf.PdfSolidBrush("#ff0000");
doc.paths.fill(wijmo.Color.fromRgba(255, 0, 0));
doc.paths.fill("#ff0000");

パスのクリッピング

パスをクリッピングするには、パスの作成をclipメソッドで終了します。これ以降クリッピングパスの外で行われる描画は表示されません。

doc.paths.circle(100, 100, 50).clip();

変換

描画領域には、rotate、translate、scaleなどの変換メソッドが用意されています。これらを使用して、パスのサイズや方向を変更したり、別の座標空間にパスを変換することができます。


次のコードは、四角形を2倍に拡大します。

doc.scale(2);
doc.paths.rect(0, 0, 50, 50).stroke();

グラフィック状態の保存と復元

グラフィック状態とは、現在適用されているドキュメントのデフォルトのペン、ブラシ、変換のスナップショットです。


saveStateメソッドは、グラフィック状態のコピーを作成してスタックに格納します。restoreStateメソッドは、スタックからコピーを取り出してグラフィック状態を元の値に復元します。


たとえば、saveStateを呼び出し、ドキュメントのペンを変更し、それを使用していくつかのパスにストロークを付けてから、restoreStateを呼び出して、ドキュメントのペンを前の値に復元できます。また、いくつかの変換やクリッピングが適用された一連の描画メソッドを他の描画から独立して使用する場合は、この方法がたいへん便利です。


以下では、スケール変換をsaveStateメソッドとrestoreStateメソッドの間に置いているので、このスケール変換はrestoreStateメソッド呼び出しの下にある描画に影響しません。

doc.saveState();

doc.scale(2);
doc.paths.rect(0, 0, 50, 50).stroke();

doc.restoreState();