Doconut の注釈は 2 つの方向で機能します。ユーザーはブラウザウィジェット上で描画し、サーバーがページごとに永続化するか、またはコードでプログラム的に作成してオープンセッションにロードします。いずれの場合もページに描画され、PDF/PNG エクスポート時に焼き込むことができます。

注釈サポートは Annotation ライセンス機能で制御されます（アクティブな Temporary ライセンス下で自動的に付与されます）。

注釈 UI を有効にする

Annotation は Viewer のモジュールであり、単独のツールバーではありません。完全なページには Viewer リソース、Viewer ツールバー、Viewer のマウント、そして初期化された objViewer が含まれる必要があります。その後、Annotation リボンがマウントされ、同じインスタンスに添付されます。

ビューアのバンドルと同時に注釈バンドルを出力します — これらはライセンスで制御されるため、機能が利用可能なときだけタグが表示されます:

html

@Html.Raw(Viewer.ReferenceCss(new CssConfig
{
    IncludeViewerCss     = true,
    IncludeAnnotationCss = true   // jquery-ui.min.css + annotationBar.css
}))

@Html.Raw(Viewer.ReferenceScripts(new ScriptConfig
{
    IncludeJQuery             = true,
    IncludeViewerScripts      = true,
    IncludeAnnotationScripts  = true, // jquery-ui, raphael.js, annotation.js
    IncludeAnnotationBar      = true  // the embedded annotation ribbon
}))

マークアップ内で完全な Viewer の構成を可視化したままにします:

html

<nav id="toolbar" aria-label="Document viewer controls">
    <!-- Viewer controls, including the button that opens Annotation -->
</nav>
<div id="annBarMount"></div>
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

Annotation バンドルは annBarMount 内にリボンの DOM を生成します。ボタンやダイアログのマークアップをコピーする必要はありません。まず docViewer を初期化し、サーバーが Annotation のライセンスを確認したときだけリボンを作成します:

html

<script>
    let annBar = null;
    let currentToken = '';

    const objViewer = $('#div_ctlDoc').docViewer({
        BasePath: '/doconut',
        ResPath: '/doconut-res/images',
        onAnnLoaded:    () => annBar?.handleAnnLoaded(),
        onAnnSaved:     () => annBar?.handleAnnSaved(),
        onAnnSaveError: () => annBar?.handleAnnSaveError(),
        onAnnClosed:    () => annBar?.handleAnnClosed(),
        onError:        (message) => console.error('Viewer error:', message)
    });

    @if (Viewer.IsAnnotationEnabled)
    {
        <text>
    annBar = $('#annBarMount').doconutAnnotationBar({
        docId: 'ctlDoc',
        getRequestParams: () => ({ token: currentToken }),
        onStatus: (message) => console.log(message),
        onToast: (message, type) => console.log(type, message),
        onLayout: () => requestAnimationFrame(() => objViewer.Refit())
    });
    annBar.attach(objViewer);
        </text>
    }
</script>

リボンからの保存はミドルウェア (AnnSave) を通じてデータを投稿し、ページごとのドキュメントセッションに保存します。読み込み (AnnLoad) は注釈付きページがレンダリングされると自動的に行われます。4 つの onAnn* コールバックがリボンとビューアのライフサイクルを同期させます。

任意のホスト所有の Viewer ツールバーから開閉できます:

javascript

annBar.open();
annBar.close();

公開されているリボン API は次のとおりです:

メソッド	目的
`attach(objViewer)`	初期化されたビューアにリボンを接続します；一度だけ必要です
`open()` / `close()`	注釈編集に入るまたは離れる
`reset()`	リボンを閉じた編集なしの状態に戻します
`isOpen()` / `annotating()`	リボンの状態 / ビューアの注釈編集状態を取得します
`reopenEditable()`	現在のページの注釈を編集可能オブジェクトとして再ロードします
`updateActionState()`	ホストの変更後に保存/削除コントロールの利用可能状態を更新します
`headerSlot()`	ホスト所有のコントロール用オプションヘッダー拡張スロットを取得します

onStatus、onToast、onLayout、onEditStart、onEditEnd はオプションのホストコールバックです。endpoints オブジェクトはさらに exportPdf、exportPng、imageUpload、imageList を提供できます。エンドポイントが設定されていないコントロールは非表示のままです。Viewer、Search、Annotation を組み合わせた起動シーケンスについては、クイックスタートを参照してください。

注釈バンドルはブラウザの作成ツールを追加しますが、データはトークンで識別されるサーバー側のドキュメントセッションに属します。ソースを再度開くと新しいセッションが作成されます。セッションの寿命を超えて注釈を保持する必要がある場合は、XML またはエンコードされた注釈エンベロープをアプリケーションに永続化してください。

C# で注釈を作成する

オープンセッションにバインドされたマネージャーを取得し、注釈を追加してロードします（型のために using Doconut.Annotations;、Rectangle/Color のために using System.Drawing; を使用）。

csharp

app.MapPost("/api/annotations/load-sample", (string token, Viewer viewer) =>
{
    // Bound to the open session's page dimensions
    var manager = viewer.GetAnnotationManager(token);
    var pageCount = viewer.GetPageCount(token);

    // One stamp per page
    for (int page = 1; page <= pageCount; page++)
    {
        manager.Add(new StampAnnotation(page, new Rectangle(30, 20, 240, 90),
            $"PAGE {page}", 28, 4, Color.Maroon)
        {
            Opacity = 60,
            Rotate  = -8
        });
    }

    manager.Add(new NoteAnnotation(1, new Rectangle(420, 150, 220, 120),
        "Loaded from C# code.", Color.FromArgb(255, 255, 255, 170), 14));

    // Load into the session — the widget fetches them via AnnLoad and the
    // renderer burns them into image/PDF exports.
    viewer.LoadAnnotationData(token, manager);
    return Results.Ok();
});

注釈タイプ

すべてのタイプは Doconut.Annotations にあり、BaseAnnotation（ページ番号 + バウンディング Rectangle）から継承します。

タイプ	備考
`StampAnnotation`	フォントサイズ、枠線、色を持つテキストスタンプ；`Opacity`、`Rotate` をサポート
`NoteAnnotation`	テキスト、背景色、フォントサイズ、`TitleColor` を持つ付箋ノート
`RectangleAnnotation`	枠線と塗りつぶしの色、`Title`/`ShowTitle`
`CircleAnnotation`	枠線と塗りつぶし、`ShowBorder`
`EllipseAnnotation`	枠線と塗りつぶし、`ShowBorder`
`TriangleAnnotation`	枠線色、`BackColor`、`ShowBorder`
`LineAnnotation`	幅と色を持つ直線
`ArrowAnnotation`	矢じり付きの線；設定可能な `Direction`（型 `ArrowDirection`、方位、デフォルトは `E`）
`FreehandAnnotation`	エンコードされた `FreehandData` ポイントからの自由なストローク
`ImageAnnotation`	URL からの画像。相対 URL は注釈が追加される際にリクエストホストに対して解決されます（画像取得は焼き込み時にのみ行われます）— サーバーからアクセス可能である必要があります（例：`UseStaticFiles` で提供される `wwwroot` 以下のファイル）。

AnnotationManager API

メンバー	目的
`Add(BaseAnnotation)`	注釈をキューに追加
`GetAnnotations()` / `GetAnnotations(int page)`	マネージャーが保持している注釈を確認
`ClearAnnotations()` / `ClearAnnotations(int page)`	すべてまたはページ単位で削除
`GetAnnotationData()` / `GetAnnotationData(int page)`	エンコードされた注釈データ文字列 — Base64 のワイヤエンベロープ（ウィジェットが消費するもの）
`GetAnnotationXml()`	XML 形式

Viewer はセッションに対してロード/読み取り操作をミラーします：LoadAnnotationData(token, manager) または LoadAnnotationData(token, encodedData)（GetAnnotationData() からの Base64 ワイヤエンベロープ）、LoadAnnotationXML(token, xml)、GetAnnotationXML(token)。

注釈を焼き込んだエクスポート

csharp

// PDF of all pages with annotations rendered onto them
app.MapGet("/api/annotations/export-pdf", async (string token, Viewer viewer) =>
{
    byte[] pdf = await viewer.ExportAnnotationsToPdfAsync(token, zoom: 100);
    return Results.File(pdf, "application/pdf", "export.pdf");
});

// Or a ZIP of per-page PNGs
app.MapGet("/api/annotations/export-png-zip", async (string token, Viewer viewer) =>
{
    byte[] zip = await viewer.ExportAnnotationsToPngZipAsync(token, zoom: 100);
    return Results.File(zip, "application/zip", "annotations-png.zip");
});

エクスポートは画面上のレンダリングと同じバーナーを使用するため、ユーザーが見るものがファイルに含まれます。

永続化ワークフロー

ドキュメントを開き、トークンを取得します。
以前に保存された XML またはエンコードデータをそのトークンにロードします。
ウィジェットにセッション注釈を読み取り、編集させます。
アプリケーションが永続化を決定したときに GetAnnotationXML(token) で XML を取得します。
フラット化された成果物が必要なときに PDF/PNG をエクスポートします。
ドキュメントセッションを閉じます。

不透明なビューアトークンを永続的な注釈識別子として使用しないでください。永続化された注釈データは、独自のドキュメントおよびバージョン識別子と関連付けてください。

セキュリティとレンダリングに関する注意点

注釈リクエストはページリクエストと同じセッション/トークンのセキュリティを使用します。
相対的な ImageAnnotation URL はリクエストホストから解決され、焼き込み時にサーバーからアクセス可能である必要があります。
サーバー側リクエスト偽装を防ぐため、ユーザー提供の画像 URL を検証・制御してください。
エクスポートは画面上のページレンダリングと同じライセンス/カスタム透かしの判断を適用します。
大きなフリーハンドペイロードや高解像度エクスポートはメモリ使用量を増加させます；実際のドキュメントとズーム値でテストしてください。

トラブルシューティング

症状	確認項目
注釈リボンが表示されない	`Annotation` 機能と 4 つの注釈 CSS/スクリプトフラグが有効か確認してください
保存コールバックがエラーを報告する	トークン/セッションの期限切れとミドルウェアの `BasePath` を確認してください
C# の注釈が表示されない	ページ番号が 1 から始まり、データがアクティブなトークンにロードされたか確認してください
画像注釈が画面上では表示されるがエクスポートに含まれない	焼き込み時にサーバーが画像 URL にアクセスできるか確認してください
再度開いたドキュメントに注釈がない	ビューアセッション外で XML/データを永続化し、新しいトークンにロードしてください