window.onload = function () {
//DsPdfViewer.LicenseKey = "***key***";
var viewer = new DsPdfViewer('#viewer', {
restoreViewStateOnLoad: false,
language: "ja"
});
viewer.addDefaultPanels();
var pdf = "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/wetlands.pdf";
viewer.open(pdf).then(async function () {
// ドキュメント冒頭のタイトル部分にある"Introduction"という文字をハイライトします。
await viewer.highlightTextSegment(0, 0, 12, {
color: 'rgba(255, 255, 0, 0.3)', // 塗りつぶし色：半透明の黄色
borderColor: 'rgba(255, 165, 0, 0.6)', // 罫線色：半透明のオレンジ
borderWidth: 1
});
// ドキュメント冒頭のタイトル部分にある"Wetlands"という文字をカスタムスタイル（半透明の緑・罫線なし）でハイライトします。
await viewer.highlightTextSegment(0, 30, 38, {
color: 'rgba(0, 255, 0, 0.3)', // 塗りつぶし色：半透明の緑
borderWidth: 0 // 罫線なし
});
// ハイライトをカスタマイズするために highlight manager にアクセスします。
const highlightManager = viewer.highlightManager;
// PDFページ上の特定の矩形座標を使用してカスタムハイライトを定義します。
const customHighlights = {
// ページ情報:
// - ページ寸法：幅612pt／高さ792pt
// - ページ起点 (0, 0) ：ページの左下
// - X座標：右に増加
// - Y座標：上方向に増加
// 配列 'rects' は、ページ上でハイライトする領域を矩形で指定します。
// 矩形は、以下の２つの形式で定義できます：
// 1. 左下隅と右上隅を表す 2 つの点の座標（コーナー座標）で指定する： [x1, y1, x2, y2]。
// 2. 左下の角の位置（x, y）と、幅（w）・高さ（h）で指定する： {x, y, w, h}.
rects: [
[226, 682, 318, 694], // テキスト「Importance」の矩形
// - コーナー座標を使って定義： [左下 x, 左下 y, 右上 x, 右上 y]。
// - 幅は x2 と x1 の差、高さは y2 と y1 の差となります。
{ x: 242, y: 581, w: 137, h: 18 }, // テキスト「"two point three (2.3) million」の矩形
// - 矩形の左下隅の位置 (x, y) と寸法 (w, h) を使用して定義。
// - x' は左端から 242 ポイント、'y' は下端から 599 ポイント上。
// - 幅'w'は右に137ポイント、高さ'h'は上に18ポイント。
{ x: 220, y: 563, w: 100, h: 16 } // テキスト「twelve percent (12%)」の矩形
// - 上記と同様の矩形定義
// - 左下の角（x, y）を左から220ポイント、下から579ポイント上に定義。
// - 幅'w'は右に100ポイント、高さ'h'は上に16ポイント。
],
// ハイライトのスタイル設定情報
color: 'rgba(255, 0, 0, 0.2)', // ハイライトの塗りつぶし色：半透明の赤
// - RGBA形式（Red, Green, Blue, Alpha）で色と透明度を指定します。
borderColor: 'rgba(0, 0, 255, 0.6)', // ハイライトの罫線色：半透明の青
// - 上記同様、RGBA形式で指定します。
borderWidth: 1 // 罫線の太さ：1pt
// - ハイライトする矩形の周囲に細い境界線を設定します。
};
// １ページ目にカスタムハイライトを追加します。
highlightManager.addHighlight(0, customHighlights);
// １ページ目の"wildlife species"という文字をハイライト表示します。
await viewer.highlightTextSegment(0, 300, 307, {
color: 'rgba(173, 216, 230, 0.4)', // 塗りつぶし色：Light blue
borderColor: 'rgba(0, 0, 139, 0.7)', // 罫線の色：Dark blue
borderWidth: 2
});
// ２ページ目の"oxygen"という文字をハイライト表示します。
viewer.highlightTextSegment(1, 23, 29, {
color: 'rgba(255, 99, 71, 0.4)', // 塗りつぶし色：Tomato
borderColor: 'rgba(139, 0, 0, 0.7)', // 罫線の色：Dark red
borderWidth: 2
});
// カスタムペイントハンドラによるカスタムハイライトの追加方法
// 座標系 と ページ寸法に関する注記：
// - ページ寸法：幅 = 612pt, 高さ = 792pt
// - ページ起点 (0, 0) ：ページの左下隅
const customHighlight = {
pageIndex: 0, // ハイライトを適用するページ番号（"0"を起点としたインデックス番号）を指定します。
rects: [{ x: 500, y: 780, w: 100, h: 100 }], // ページの右上隅に矩形を定義します。
// 座標はPDFの座標系に基づいています：
// - 'x' ：左端から 500pt
// - 'y' ：下端から 780pt
// - 'w'（横幅）：右に100pt
// - 'h' (高さ) ：上方向に100pt
// 「paintHandler」関数を使用することで、ハイライトのカスタムレンダリングロジックを実装可能です。
paintHandler: (ctx, highlight) => {
// 注：PDFの仕様では、座標系は左下隅を起点とします。
// しかし、キャンバスの描画操作では通常、左上隅を起点とします。
// そのため、キャンバスに描画する際には座標を変換する必要があります：
// Y 軸を反転し、PDFのページに適用されている倍率を調整する必要があります。
// 'applyViewPortScale' メソッドは、この変換を自動的に処理し、PDF座標をキャンバス座標に変換します。
const scaledRect = viewer.applyViewPortScale(highlight.rects[0], highlight.pageIndex); // PDF座標をキャンバス座標に変換します
const { x, y, w, h } = scaledRect; // キャンバス描画で使用するために変換された座標を再構築します。
// スタイルを設定します
ctx.strokeStyle = highlight.borderColor || 'rgba(255, 165, 0, 0.8)'; // 罫線の色：Orange
ctx.lineWidth = highlight.borderWidth || 3;
ctx.fillStyle = highlight.color || 'rgba(255, 215, 0, 0.5)'; // 塗りつぶし色：Gold
// 楕円を描画します
ctx.beginPath();
ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
// 楕円の中に星形を描画します
const centerX = x + w / 2;
const centerY = y + h / 2;
const outerRadius = w / 4;
const innerRadius = outerRadius / 2;
const points = 5;
ctx.beginPath();
for (let i = 0; i < points; i++) {
const angle = (Math.PI / points) * i * 2;
const xOuter = centerX + Math.cos(angle) * outerRadius;
const yOuter = centerY - Math.sin(angle) * outerRadius;
ctx.lineTo(xOuter, yOuter);
const xInner = centerX + Math.cos(angle + Math.PI / points) * innerRadius;
const yInner = centerY - Math.sin(angle + Math.PI / points) * innerRadius;
ctx.lineTo(xInner, yInner);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 69, 0, 0.7)'; // 星形の塗りつぶし色：Red-Orange
ctx.fill();
ctx.strokeStyle = 'rgba(255, 99, 71, 0.9)'; // 星形の罫線色：Tomato
ctx.stroke();
}
};
// カスタムペイントハンドラを使ってカスタムハイライトを最初のページに追加します
highlightManager.addHighlight(customHighlight.pageIndex, customHighlight);
// テキストレイヤーを手動で再描画してカスタムハイライトを明示的に適用します
//highlightManager.repaintTextLayer();
// 最初のページのハイライト表示をクリアします
//viewer.clearHighlightedSegments([0]);
});
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>カスタムスタイルのハイライト注釈の追加</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/diodocs/pdfviewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/diodocs/pdfviewer/demos/resource/js/init.js"></script>
<script src="./src/app.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
#viewer {
height: 100%;
}
