注释

为查看器添加注释支持

Doconut 中的注释有两种使用方式：用户在浏览器小部件中绘制注释，服务器按页持久化；或者你的代码以编程方式构建注释并加载到打开的会话中。无论哪种方式，注释都会在页面上渲染，并且可以在 PDF/PNG 导出时烧录进去。

注释支持受 Annotation 许可证功能的限制（在有效的临时许可证下会自动授予）。

启用注释 UI

注释是 Viewer 的一个模块，而不是独立的工具栏。完整的页面必须包含 Viewer 资源、Viewer 工具栏、Viewer 挂载点以及已初始化的 objViewer；随后才会挂载并附加注释功能区（Ribbon）到同一个实例上。

将注释资源包与 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；你无需复制其按钮或对话框标记。先初始化 docViewer，随后仅在服务器确认已授权注释功能时创建功能区：

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

    const objViewer = $('#div_ctlDoc').docViewer({
        BasePath: '/doconut',
        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）会在带有注释的页面渲染时自动触发。四个 onAnn* 回调保持功能区与 Viewer 生命周期同步。

可以在任何宿主拥有的 Viewer 工具栏中打开或关闭它：

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

公共功能区 API 如下：

方法目的
attach(objViewer)将功能区连接到已初始化的查看器；仅需调用一次
open() / close()进入或退出注释编辑状态
reset()将功能区恢复为关闭且非编辑的状态
isOpen() / annotating()读取功能区状态 / 查看器的注释编辑状态
reopenEditable()重新加载当前页面的注释为可编辑对象
updateActionState()在宿主更改后刷新保存/删除控件的可用性
headerSlot()获取可选的头部扩展槽，以放置宿主拥有的控件

onStatus、onToast、onLayout、onEditStart 和 onEditEnd 为可选的宿主回调。endpoints 对象还可以提供 exportPdf、exportPng、imageUpload 和 imageList；未配置端点的控件将保持隐藏。有关组合 Viewer、搜索和注释的启动顺序，请参阅快速入门。

注释资源包添加了浏览器端的创作工具，但数据仍归属于由 token 标识的服务器端文档会话。重新打开源会创建新会话；如果注释需要在会话生命周期之外保留，请在应用程序中持久化 XML 或编码的注释信封。

在 C# 中构建注释

获取绑定到打开会话的管理器，添加注释并加载它们（使用 using Doconut.Annotations; 引入类型，using System.Drawing; 引入 Rectangle/Color）：

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 点构成的自由笔画
ImageAnnotation来自 URL 的图像。相对 URL 会在添加注释时相对于请求主机解析（仅在烧录时进行图像获取）——必须能够从服务器访问（例如位于 wwwroot 并由 UseStaticFiles 提供的文件）

AnnotationManager 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. 打开文档并获取其 token。
  2. 将先前存储的 XML 或编码数据加载到该 token 中。
  3. 让小部件读取并编辑会话中的注释。
  4. 当你的应用决定持久化时，使用 GetAnnotationXML(token) 获取 XML。
  5. 需要平面交付物时导出 PDF/PNG。
  6. 关闭文档会话。

不要将不透明的查看器 token 用作永久的注释标识符。请将持久化的注释数据与自己的文档和版本标识符关联。

安全性和渲染注意事项

  • 注释请求使用与页面请求相同的会话/token 安全机制。
  • 相对的 ImageAnnotation URL 会从请求主机解析，必须在烧录时仍可被服务器访问。
  • 验证并控制任何用户提供的图像 URL，以防止服务器端请求伪造。
  • 导出遵循与屏幕页面渲染相同的许可证/自定义水印决策。
  • 大量自由笔画负载和高分辨率导出会增加内存使用；请对真实文档和缩放值进行测试。

故障排除

症状检查
注释功能区缺失Annotation 功能以及四个注释 CSS/脚本标志是否已启用
保存回调报告错误Token/会话是否过期以及中间件 BasePath 配置是否正确
C# 注释未出现页面编号是从 1 开始的，且数据已加载到活动 token 中
图像注释在屏幕上可见但导出中缺失服务器在烧录时能否访问图像 URL
重新打开的文档没有注释将 XML/数据持久化到查看器会话之外，然后在新 token 中加载

此页面有帮助吗？