配置

PDFビューワを使用すると、注釈とフォームフィールドを相互に配置することができます。デフォルトで有効になっている位置合わせ機能を使用して、フィールドを左揃え、上揃え、右揃え、中央揃え、または下揃えに設定できます。

たとえば、注釈またはフォームフィールドを含むPDFドキュメントに新しいフィールドを追加します。このフィールドを移動またはサイズ変更すると、既存のフィールドの端または中心に近づく場合は破線が表示されます。これは、既存のフィールドに対する新しいフィールドの配置を示します。

Align annotations or form fields in PDF Viewer

余白

PDFビューワでは、フィールドの配置とともに、余白にスナップ機能を使用して余白を定義できます。これらの余白は、フィールドまたはページの端の前後の余分な間隔です。2つの要素またはページの端の間のデフォルトの余白は10ptです。

Set margins for annotations or form fields in PDF Viewer

ショートカットキーの使用

ショートカットキーを使用して、注釈とフォームフィールドの位置とサイズを調整することができます。

選択したフィールドの位置を変更する場合：
- 1pt:矢印キー
- 10pt：Ctrl+矢印
フィールドのサイズを拡大または縮小する場合：
- 1pt：Shift+矢印
- 10pt：Ctrl+Shift+矢印

メモ：メモ：Altキーを押すと、サイズ変更または移動する時に位置合わせ機能が一時的に無効になります。

コードの使用

snapAlignmentオプションを使用して、位置合わせ機能をカスタマイズまたは無効にすることができます。

snapAlignmentオプションの完全な仕様は次のとおりです。

Index.cshtml	コードのコピー
snapAlignment: true \| false \| { tolerance: number \| { horizontal: number \| false, vertical: number \| false }, margin: false \| true \| number \| { horizontal: number \| boolean, vertical: number \| boolean }, center: false \| true \| { horizontal: boolean, vertical: boolean }, }

Index.cshtml

コードのコピー

snapAlignment: true | false |
    {
        tolerance: number | { horizontal: number | false, vertical: number | false },
        margin: false | true | number | { horizontal: number | boolean, vertical: number | boolean },
        center: false | true | { horizontal: boolean, vertical: boolean },
    }

上記の設定の説明：

tolerance：：移動またはサイズ変更されているオブジェクトとスナップされる他のオブジェクトの端の間の距離。
margin：移動またはサイズ変更されているオブジェクトの端からスナップされるターゲットオブジェクトまたはページ端までの距離。
center：オブジェクトを他のオブジェクトの中心にスナップします。

デフォルトでは、toleranceは5pt、marginは10pt、centerはtrueです。以下のコードは、位置合わせ機能のtoleranceの値を設定する方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: { tolerance: 25 }, supportApi: 'api/pdf-viewer' });

以下のコードは、垂直方向と水平方向の配置のtoleranceの値を設定する方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: { tolerance: { vertical: 10, horizontal: 50 } }, supportApi: 'api/pdf-viewer' });

以下のコードは、要素の中心に対して位置合わせ機能を無効にする方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: { center: false }, supportApi: 'api/pdf-viewer' });

以下のコードは、垂直方向の配置の要素の中心に対して位置合わせ機能を有効にする方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: { center: { vertical: true, horizontal: false, } }, supportApi: 'api/pdf-viewer' });

以下のコードは、位置合わせ機能を無効にする方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: false, supportApi: 'api/pdf-viewer' });

以下のコードは、水平方向の余白にスナップを無効にし、垂直方向の余白にスナップの値を設定する方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: { margin: { vertical: 50, horizontal: false }, supportApi: 'api/pdf-viewer' } });

以下のコードは、水平方向の配置を無効にする方法を示します。

Index.cshtml	コードのコピー
var viewer = new DsPdfViewer("#root", { snapAlignment: { tolerance: { horizontal: false } }, supportApi: 'api/pdf-viewer' });