如何实现annotorious.js所有文本标注无需hover即可全部显示？

要实现所有标注文本无需悬停直接显示，可以通过以下两种方式实现：

方法一：修改CSS样式 #

Annotorious默认通过CSS控制标注文本仅在悬停时显示，直接覆盖对应样式即可强制显示所有文本：

/* 强制显示所有标注标签，适配多数Annotorious版本 */
.a9s-annotation-label {
  display: block !important;
  opacity: 1 !important;
}

/* 移除默认的hover隐藏逻辑 */
.a9s-annotation:not(:hover) .a9s-annotation-label {
  display: block !important;
  opacity: 1 !important;
}

注意：不同Annotorious版本的类名可能略有差异，比如v3版本可能使用.annotorious-annotation-label，需要根据实际DOM结构调整选择器。

方法二：自定义标注渲染器 #

通过Annotorious的API重写标注渲染逻辑，直接在绘制标注时显示文本：

// 初始化Annotorious
const anno = Annotorious.init({
  image: 'your-target-image-id'
});

// 自定义渲染函数，在标注框下方绘制文本
anno.setRenderer({
  renderAnnotation: (annotation, ctx) => {
    // 执行默认渲染绘制标注框
    anno.defaultRenderer.renderAnnotation(annotation, ctx);
    
    // 获取标注框坐标
    const { x, y, width, height } = annotation.target.selector.value;
    // 设置文本样式
    ctx.fillStyle = '#fff';
    ctx.font = '12px Arial';
    ctx.textBaseline = 'top';
    // 在标注框下方绘制标注文本
    ctx.fillText(annotation.body[0].value, x, y + height + 12);
  }
});

这种方式更灵活，还可以自定义文本的位置、颜色、字体等样式，避免多个文本重叠的问题。

内容的提问来源于stack exchange，提问作者Ekin