Pdf.Js Express-鼠标悬停事件侦听器

Question

我们使用的是Pdf.JS Express Viewer。我们可以通过捕捉双击事件

ViewerInstance.Core.documentViewer.addEventListener("dblClick",handleDblClick);

但我们也需要鼠标悬停事件的每一个字。

这个库是Mozillas的Pdf.Js的一种高级版本，它围绕着这个库并添加了更多功能。

所以，如果我们可以得到双击的单词，我认为可以在鼠标悬停在单词上时捕捉事件。

我需要一种方法来捕捉这些事件以及盘旋的单词Itself。感谢您的帮助

Answer 1

我可以找到两种方法。一种是通过监听某些注释上的鼠标悬停事件，在本例中，他们检查鼠标是否在注释上，然后更改其颜色：

let highlightedAnnot = null;
let lastHighlightedColor = null;
// Change this to change the highlight color
const highlightColor = new instance.Core.Annotations.Color(255,0,0,1);
instance.Core.documentViewer.addEventListener('mouseMove', (e) => {
// Check if an annotation is under the mouse
const annot = instance.Core.annotationManager.getAnnotationByMouseEvent(e)
if(annot) {
// Break early if its already highlighted
if(highlightedAnnot) return;
// Make sure its a highlight annotation
if(annot instanceof instance.Core.Annotations.TextHighlightAnnotation) {
const {R,G,B,A} = annot.StrokeColor
// Store the original color of the annotation so we can revert back to it when its unhovered
lastHighlightedColor = new instance.Core.Annotations.Color(R,G,B,A);
// Store the instnace of the annot so we can revert it when its unhovered
highlightedAnnot = annot;
// Set the color and redraw
annot.StrokeColor = highlightColor;
instance.Core.annotationManager.redrawAnnotation(annot)
}
} else if(highlightedAnnot) {
// Revert the annotation back to its original state when unhovered
highlightedAnnot.StrokeColor = lastHighlightedColor;
instance.Core.annotationManager.redrawAnnotation(highlightedAnnot)
highlightedAnnot = null;
lastHighlightedColor = null;
}
})

另一种方法是使用customOverlayHandler，根据文档：

一个函数，它接受一个注释并返回一个DOM元素将鼠标悬停在注释上时，将渲染为工具提示。返回null或false将不显示任何内容。返回"undefined"将使用默认行为。

Example
aboutraw—
WebViewer(...)
.then(function(instance) {
instance.UI.setAnnotationContentOverlayHandler(annotation => {
const div = document.createElement('div');
div.appendChild(document.createTextNode(`Created by: ${annotation.Author}`));
div.appendChild(document.createElement('br'));
div.appendChild(document.createTextNode(`Created on ${annotation.DateCreated}`));
return div;
});
});

至于自定义悬停状态，我认为PDF.Js没有处理自定义悬停状态的api。他们最好的方法是检查注释，这是必要的。