DioDocs for PDF
注釈エディタ
PDFビューワ > PDFの編集 > エディタ > 注釈エディタ

PDFビューワの注釈エディタを使用すると、PDFドキュメントの編集やレビューができます。様々な種類の注釈を追加・削除したり、新規コメントを追加し既存コメントに返信したり、テキスト、色、配置、枠線、スタイルなどの注釈プロパティを設定したりすることができます。注釈エディタのツールバーだけではなく、メインツールバーからもすべての注釈や他の様々なオプションにもアクセスできます。それは編集ツールとして提供されており、完全な編集モードに切り替えることなく簡単に編集操作を実行することができます。

次の画像に表示されている編集ツールは、クイック編集ツールバーで「元に戻す、やり直し、削除」および「墨消し」オプションとともに注釈オプションを提供します。

テキストツール

［テキストツール］ボタンをクリックすると、クイック編集ツールバーが表示され、付箋、フリーテキスト、インク注釈などのさまざまなテキスト注釈のツールが表示されます。

描画ツール

［描画ツール］ボタンを使用すると、クイック編集ツールが表示され、四角形注釈、円注釈、線注釈などのさまざまな描画注釈のツールが表示されます。

添付ファイルとスタンプ

［添付ファイルとスタンプ］ボタンを使用すると、クイック編集ツールが表示され、スタンプ注釈、添付ファイル、署名ツールなどのさまざまな添付ファイルとスタンプのツールが表示されます。スタンプ注釈を回転するには、Rotateプロパティまたは注釈に付加されている回転ハンドルを使用することができます。詳細については、「スタンプ注釈」を参照してください。

ページツール

［ページツール］ボタンを使用すると、クイック編集ツールが表示され、新しい空白のドキュメントの追加、空白のページの挿入、現在ページの削除、変更の元に戻すまたはやり直すなど、ページに関連するさまざまなオプションが表示されます。

クイック編集ツールバーの［フォームツール］ボタンには、さまざまなフォームフィールドボタンがあります。 詳細については、フォームエディタを参照します。

メモ：編集ツールは、プロジェクトにSupportApiが設定されている場合（PDF文書での編集操作が可能）、自動的にメインツールバーで有効になります。

以下に示すように、secondToolbarLayoutプロパティを使用して、2番目のツールバーに表示するツールを構成することもできます。

Index.cshtml
コードのコピー 
const secondToolbarLayout = viewer.secondToolbarLayout;
secondToolbarLayout["text-tools"] = ['edit-text', 'edit-free-text'];

上記のサンプルコードの結果は、次のようになります。

以下に示すように、secondToolbarオプションのrenderハンドラーを使用して、2番目のツールバーをカスタマイズすることもできます。

Index.cshtml
コードのコピー 
var React = viewer.getType("React");
// カスタムツールバーのコントロールを作成します
var toolbarControls = [React.createElement("label", { style: { color: "white" } }, "Custom toolbar"),
React.createElement("button", { className: "gc-btn gc-btn--accent", onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")];
// 2番目のカスタムツールバーを「custom-toolbar-key」キーに対して登録します
viewer.options.secondToolbar = {
    render: function (toolbarKey) {
        if (toolbarKey === "custom-toolbar-key")
            return toolbarControls;
        return null;
    }
};
// カスタム2番目のツールバーを表示します
viewer.showSecondToolbar("custom-toolbar-key");

上記のサンプルコードの結果は、次のようになります。

または、サイドパネルの注釈エディタボタンをクリックして、注釈エディタのツールバーからすべての使用可能な注釈にアクセスできます。次の画像は、テキスト注釈を含むPDFドキュメントを表示したPDFビューワの注釈エディタを示しています。

Annotation editor in GcDocs PDF Viewer

以下の表にて、注釈エディタにあるツールバーボタンを説明します。注釈の詳細情報については、「注釈の種類」を参照してください。.

名前 ツールバーアイコン 説明
注釈を選択 Annotation icon 追加された注釈を選択します。
署名ツール Signature icon グラフィカルな署名を追加します。
付箋注釈 Sticky note icon テキストまたは付箋を追加します。
フリーテキスト注釈 Note icon 常に表示されるメモを追加します。
インク注釈 Draw icon フリーハンドの落書きを描きます。
四角形注釈 Rectangle icon 四角形を追加します。
円注釈 Circle icon 円を追加します。
線注釈 Line icon 直線を追加します。
折れ線注釈 Shapes icon 折れ線を追加します。
多角形注釈 Polygon icon 多角形を追加します。
スタンプ注釈 Stamp Annotation icon 画像を追加します。
添付ファイル注釈 File attachment icon ファイルをドキュメントに添付します。
音声注釈 Sound icon 音声（.au／.aiff／.wav 形式）を追加します。
リンク注釈 Sound icon リンクを追加します。
ハイライト注釈 選択したテキストを強調表示します。
下線注釈 選択したテキストに下線を付けます。
波状下線注釈 選択したテキストに波状下線を付けます。
取り消し線注釈 選択したテキストに取り消し線を付けます。
注釈を削除 Delete annotation icon 注釈を削除します。
墨消し領域としてマーク Mark region icon PDFドキュメントの領域を墨消し対象としてマークします。

すべてに墨消しを適用

 Apply redeact icon 墨消し対象としてマークされたすべての領域に墨消しを適用します。

メモ： PDFビューワでは、上記のすべての注釈がサポートされています。以下の注釈の詳細については、リンク先の別トピックをご参照ください。

PDFビューワは、上記の様々な種類の注釈以外にも、PDFドキュメントの操作中に使用できるいくつかの一般的な編集機能も提供しています。以下の表にて紹介します。

ツールバーアイコン 説明
Undo icon 変更を元に戻します。
Redo icon 変更をやり直します。
Save icon 変更したドキュメントをクライアントに保存します。
変更したドキュメントを画像としてクライアントに保存します。
Create new doc icon 新しい空白のドキュメントを作成します。
Insert blank page icon 空白ページを挿入します。
Delete page icon ページを削除します。
PDFドキュメント内のページを並べ替えたり、整理したりすることができます。詳細については、「ページの整理」を参照します。

また、newPageメソッドを使用して、PDFドキュメントに空白のページを挿入し、そのサイズを設定できます。または、以下のコードのように、setPageSizeメソッドを使用して既存のページのサイズのみを設定できます。

Index.cshtml
コードのコピー 
viewer.open("AcmeFinancialReport.pdf");
viewer.onAfterOpen.register(()=>
    {   
      // 2番目の位置に新しいページを追加し、そのサイズを設定します
      viewer.newPage({height:400, pageIndex:1, width:300});
      // 最初のページのサイズを設定します
      viewer.setPageSize(0, { width: 300, height: 500 });
    });

テキストマークアップのコンテキストメニュー

PDFビューワでは、 PDF ドキュメント内のテキストを選択すると、テキストマークアップのコンテキストメニューが表示されます。このコンテキストメニューは、SupportAPI サービスが設定され、ビューワの編集機能が有効になっている場合にのみ利用可能です。コンテキストメニューを使用すると、デフォルトで以下の注釈を6種類の色で適用できます。

ハイライト注釈 選択したテキストを強調表示します。
下線注釈 選択したテキストに下線を付けます。
波状下線注釈 選択したテキストに波状下線を付けます。
取り消し線注釈 選択したテキストに取り消し線を付けます。

これらのテキストマークアップ注釈は、注釈エディタからだけでなく、PDF ビューワのクイック編集ツールバーのテキストツールのオプションからも使用できます。

PDFビューワでは、textMarkupContextMenu プロパティを false に設定することで、テキストマークアップのコンテキストメニューを無効にすることができます。また、これらの注釈で使用可能な色を変更することもできます。
以下のサンプルコードは、テキストマークアップのコンテキストメニューを無効にし、テキストマークアップ注釈で使用可能な色のオプションを変更する方法を示しています。

C#
コードのコピー 
// テキストマークアップのコンテキストメニューを無効にします
var viewer = new DsPdfViewer(selector, {textMarkupContextMenu: false}); 

// デフォルトのテキストマークアップの色を「赤」と「黒」に変更します 
var viewer = new DsPdfViewer(selector, {  
textMarkupContextMenu: { colors: [{value: "#ff0000", displayName: "赤"}, {value: "#000000", displayName: "黒"}] } });

制限事項: DioDocsのPDFビューワ と Adobe Acrobat Reader では、ハイライト注釈の外観に違いがあります。

プロパティパネル

左側の垂直パネルにある注釈エディタのアイコンをクリックすると、注釈エディタのプロパティパネルが表示されます。プロパティパネルには、ドキュメント内のすべての注釈のリストがページごとに一覧表示されます。

また、テキスト、色、枠線、配置など、ドキュメント内の任意の注釈のプロパティを設定することもできます。例えば、以下の画像は、プロパティパネルにある四角形注釈のプロパティを示しています。

Property Panel of Annotation Editor

PDFビューワで注釈エディタの有効化

PDFビューワにて、デフォルトで注釈エディタを表示するには、次のコードのようにAnnotationEditorPanelを有効にします。

Index.cshtml
コードのコピー 
<script>
    var viewer = new DsPdfViewer("#host", { supportApi: 'SupportApi/DsPdfViewer' });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.open("Home/GetPdf");
</script>

 

PDFビューワで表示される注釈オプションをカスタマイズするには、ビューワでPDFをロードするクラスファイルに次のコードを追加します。

C#
コードのコピー 
public static DsPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions
{
        get => new DsPdfViewerSupportApiDemo.Models.PdfViewerOptions(
        DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.AnnotationEditorPanel |
        DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.ActivateAnnotationEditor,
        annotationEditorTools: new string[] { "edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save" });
}

注釈エディタでPDFドキュメントのレビュー

以下の手順に従って、PDFビューワの注釈エディターを使用してPDFドキュメントをレビューします。

  1. PDFドキュメントの編集ができるようPDFビューワを設定します。
  2. アプリケーションを実行し、[開く]ボタンを使用してレビューするPDFを開きます。
  3. 左側の垂直ツールバーの最後から2番目のアイコンを使用して注釈エディタを開きます。
  4. 上部のツールバーで使用可能なさまざまな注釈から注釈を選択します。
  5. 選択した注釈を使用して、ドキュメントの修正をマークします。
  6. プロパティパネルにて色、境界線などの注釈プロパティを設定します。
  7. テキスト注釈を追加し、最終レビューテキストを入力します。
  8. 注釈エディタを閉じて、表示モードに戻ります。

ドキュメントに注釈が正常に追加されます。注釈エディタのプロパティパネルですべての注釈の一覧を表示することができます。 GcDocs PDF Viewer

 

 

© MESCIUS inc. All rights reserved.