向 PDF 添加注释

本示例展示如何添加注释（包括标记、便签、手绘、文本、形状、图章等）以及删除注释。

// 导入 ComPDFKit Web Demo 的 JS 文件。
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
.then((instance) => {
  const { documentViewer } = instance.Core;
  documentViewer.addEventListener('documentLoaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // 示例 1：创建注释。
    CreateAnnots(instance.Core);

    // 示例 2：删除注释。
    DeleteAnnotations(instance.Core);
  })
})

function CreateAnnots(core) {
  CreateNoteAnnotation(core);
  CreateLinkAnnotation(core);
  CreateFreetextAnnotation(core);
  CreateShapeAnnotation(core);
  CreateMarkupAnnotation(core);
  CreateInkAnnotation(core);
  CreateStampAnnotation(core);
}

// 创建便签注释。
function CreateNoteAnnotation({ annotationManager, Annotations }) {
  const text = new Annotations.StickyAnnotation({
    PageNumber: 1,
    X: 100,
    Y: 30,
    Width: 24,
    Height: 24,
    StrokeColor: new Annotations.Color(255, 0, 0),
    Opacity: 1
  });
  text.setContents('test');
  annotationManager.addAnnotation(text);
}

// 创建链接注释。
function CreateLinkAnnotation({ annotationManager, Annotations, Actions }) {
  // 添加超链接。
  const link = new Annotations.Link({
    PageNumber: 1,
    X: 92,
    Y: 200,
    Width: 75,
    Height: 30
  });
  link.addAction('U', new Actions.URI({ uri: 'https://example.com' }));
  annotationManager.addAnnotation(link);

  // 添加文档内跳转链接。
  const pageLink = new Annotations.Link({
    PageNumber: 1,
    X: 92,
    Y: 200,
    Width: 75,
    Height: 30
  });
  pageLink.addAction('U', new Actions.GoTo({ dest: { page: 2 } }));
  annotationManager.addAnnotation(pageLink);
}

// 创建文本注释。
function CreateFreetextAnnotation({ annotationManager, Annotations }) {
  const freeText = new Annotations.FreeTextAnnotation({
    PageNumber: 1,
    X: 100,
    Y: 200,
    Width: 60,
    Height: 40,
    TextColor: new Annotations.Color(0, 0, 0),
    FontSize: '16pt',
    Font: 'Helvetica',
    Opacity: 1,
    TextAlign: 'left'
  });
  freeText.setContents('test');
  annotationManager.addAnnotation(freeText);
}

// 创建形状注释。
function CreateShapeAnnotation({ annotationManager, Annotations }) {
  const red = new Annotations.Color(255, 0, 0);

  // 矩形。
  const square = new Annotations.RectangleAnnotation({
    PageNumber: 1,
    X: 50,
    Y: 50,
    Width: 50,
    Height: 50,
    StrokeThickness: 2,
    Opacity: 1,
    FillColor: null, // 无填充。
    StrokeColor: red,
    Style: 'solid'
  });
  annotationManager.addAnnotation(square);

  // 椭圆。
  const circle = new Annotations.EllipseAnnotation({
    PageNumber: 1,
    X: 50,
    Y: 50,
    Width: 50,
    Height: 50,
    StrokeThickness: 2,
    Opacity: 1,
    FillColor: null, // 无填充。
    StrokeColor: red,
    Style: 'solid'
  });
  annotationManager.addAnnotation(circle);

  // 直线。
  const line = new Annotations.LineAnnotation({
    PageNumber: 1,
    StrokeThickness: 2,
    Opacity: 1,
    StrokeColor: red,
    Style: 'solid'
  });
  line.setStartPoint(50, 50);
  line.setEndPoint(100, 100);
  annotationManager.addAnnotation(line);

  // 多边形。
  const polygon = new Annotations.PolygonAnnotation({
    PageNumber: 1,
    StrokeThickness: 2,
    Opacity: 1,
    FillColor: null, // 无填充。
    StrokeColor: red,
    Style: 'solid'
  });
  polygon.setPath([
    new Annotations.Point(156, 328),
    new Annotations.Point(230, 302),
    new Annotations.Point(300, 362),
    new Annotations.Point(310, 436),
    new Annotations.Point(180, 447),
    new Annotations.Point(114, 395)
  ]);
  annotationManager.addAnnotation(polygon);

  // 折线。
  const polyline = new Annotations.PolylineAnnotation({
    PageNumber: 1,
    StrokeThickness: 2,
    Opacity: 1,
    StrokeColor: red,
    Style: 'solid'
  });
  polyline.setPath([
    new Annotations.Point(130, 156),
    new Annotations.Point(202, 120),
    new Annotations.Point(263, 223),
    new Annotations.Point(157, 232)
  ]);
  annotationManager.addAnnotation(polyline);

  // 圆弧。
  const arc = new Annotations.ArcAnnotation({
    PageNumber: 1,
    StrokeThickness: 2,
    Opacity: 1,
    StrokeColor: red
  });
  arc.setPath([
    new Annotations.Point(92, 225),
    new Annotations.Point(233, 169),
    new Annotations.Point(143, 98)
  ]);
  annotationManager.addAnnotation(arc);
}

// 创建标记注释。
function CreateMarkupAnnotation({ annotationManager, Annotations }) {
  // 标记注释的类包括：TextHighlightAnnotation、TextUnderlineAnnotation、TextStrikeoutAnnotation、TextSquigglyAnnotation。
  const highlight = new Annotations.TextHighlightAnnotation({
    PageNumber: 1,
    Opacity: 0.8,
    StrokeColor: new Annotations.Color(255, 0, 0)
  });
  highlight.setQuads([
    new Annotations.Quad(116, 360, 360, 360, 360, 300, 116, 300)
  ]);
  highlight.setContents('test');
  annotationManager.addAnnotation(highlight);
}

// 创建手绘注释。
function CreateInkAnnotation({ annotationManager, Annotations }) {
  const ink = new Annotations.FreeHandAnnotation({
    PageNumber: 1,
    StrokeThickness: 2,
    Opacity: 0.8,
    StrokeColor: new Annotations.Color(255, 0, 0)
  });
  ink.setPath([
    new Annotations.Point(9.20, 34),
    new Annotations.Point(9.20, 34),
    new Annotations.Point(9.20, 33),
    new Annotations.Point(9.20, 31),
    new Annotations.Point(10.20, 31),
    new Annotations.Point(11.20, 30),
    new Annotations.Point(12.20, 28),
    new Annotations.Point(13.2, 27),
    new Annotations.Point(13.2, 26),
    new Annotations.Point(15.2, 24),
    new Annotations.Point(17.2, 23),
    new Annotations.Point(22.2, 19)
  ]);
  annotationManager.addAnnotation(ink);
}

// 创建图章注释。
function CreateStampAnnotation({ annotationManager, Annotations }) {
  // 标准图章。
  const standardStamp = new Annotations.StampAnnotation({
    PageNumber: 1,
    X: 205,
    Y: 379,
    Width: 230,
    Height: 52
  });
  standardStamp.Icon = 'NotApproved';
  annotationManager.addAnnotation(standardStamp);

  // 文字图章。
  const textStamp = new Annotations.StampAnnotation({
    PageNumber: 1,
    X: 220,
    Y: 367,
    Width: 100,
    Height: 45
  });
  textStamp.setStampText('REVISED', {
    date: '28/07/2023 07:28:28',
    color: 'red',
    shape: 'rectangle'
  });
  annotationManager.addAnnotation(textStamp);
}

// 删除所有注释。
async function DeleteAnnotations({ annotationManager }) {
  annotationManager.deleteAnnotations(annotationManager.getAnnotationsList());
}