javascript - 是否可以更改 'annotationStyleEditButton'和 ' annotationDeleteButton'的webviewer按钮图标

Question

我想将“annotationStyleEditButton”和“annotationDeleteButton”的图标更改为自己设计的PNG，我想知道这些按钮可以更改图标吗？

我刚刚找到了一种使用 updateTool() 更改工具图标的方法，但似乎我们无法更改“样式”和“删除”按钮？

Answer 1

有多种方法可以更改图标，但不幸的是，没有 API 可以做到这一点。这主要是因为 UI 是完全开源的，并且开放给每个人进行定制和贡献。您可以在此处自由克隆、下载或 fork 我们的存储库:WebViewer UI Repo 。您将需要一些 React 知识(也许还有一些 redux)，但它应该相对容易掌握。

要更改图标，您必须更改 ActionButton 的 img 属性，才能在 AnnotationPopup 组件中使用您的图像。或者，如果您愿意，也可以只使用 HTML 按钮和图像。您可以在此处找到有关高级自定义的指南:Advanced Customization 。构建 UI 后，它将在根目录中生成一个 build 文件夹。只需复制此文件夹并替换 lib/ui 下的文件夹即可将其更新为您刚刚构建的文件夹。

作为最后的手段，您始终可以使用一些普通的 JavaScript 来替换您自己的图标。使用 DOM 进行查询可以让您更改这些元素:

document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');

我建议坚持使用 WebViewer UI 方法以避免任何不需要的结果。与使用这种侵入性方法相比，拥有自己的 UI 会更好。

请告诉我这是否有帮助!