javascript - 自定义自由文本工具

Question

我正在尝试自定义自由文本注释的外观。

我需要文本有额外的填充，即文本周围应该有额外的空间。

我正在使用 WebViewer，并在制作 FreeTextAnnotation 时尝试了 setPadding 和 setRect 函数。这些并没有达到我想要的效果，setPadding 函数设置了选择矩形的填充。

然后，我尝试根据以下指南和示例制作自定义注释:

• custom annotations

• custom tools

• custom annotations sample

• 与库本身一起分发的示例中的 Ruler 示例。

我无法使其正常工作，因为我没有太多文档可以继续，并且这些示例都没有用户可编辑的组件(例如在进行自由文本注释后编辑文本)

这是我想要的示例:

这是一个我不想要的例子:

Answer 1

根据 PDF 规范，我认为自由文本注释不能具有填充属性。因此，不幸的是，即使我们设法通过自定义的 draw 函数添加填充，它也不会保持一致，这意味着当在其他 PDF 阅读器(例如 Acrobat)中查看下载的 PDF 时，填充将会丢失。

但是，我们可以通过一种方法来实现这一点并使外观保持一致，尽管这有点老套。我们可以手动将边框和填充颜色设置为相同，并增加边框的值，使自由文本注释在视觉上有填充。例如:

const color = new instance.Annotations.Color(3, 244, 252);
instance.annotManager.setAnnotationStyles(annot, () => ({
  StrokeThickness: 30, // padding
  StrokeColor: color,
  FillColor: color,
}))