注釈

ビューアに注釈サポートを追加

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

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

注釈 UI を有効化

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

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

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>

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

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

    const objViewer = $('#div_ctlDoc').docViewer({
        BasePath: '/',
        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 のライフサイクルを同期させます。

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

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

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

メソッド目的
attach(objViewer)初期化されたビューアにリボンを接続します。1 回だけ必要です
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 ポイントからのフリーストローク
ImageAnnotationURL からの画像。相対 URL はアノテーション追加時にリクエストホストに対して解決されます（画像取得は焼き込み時にのみ行われます）— サーバーからアクセス可能である必要があります（例：UseStaticFiles によって提供される wwwroot 配下のファイル）。

AnnotationManager API（アノテーションマネージャー 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");
});

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

永続化ワークフロー

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

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

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

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

トラブルシューティング

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

このページは役に立ちましたか？