使用@recogito/annotorious如何让标注文本始终显示在矩形下方

方法1：CSS样式覆盖（推荐，无需额外插件） #

Annotorious的所有标注元素都有公开的CSS类名，直接覆盖默认样式就可以实现标签固定在矩形下方的效果，添加如下CSS代码到你的页面即可：

/* 调整标注容器为相对定位，方便标签定位 */
.a9s-annotation {
  position: relative;
}

/* 让评论标签默认可见，固定在标注矩形下方 */
.a9s-annotation .a9s-comment {
  display: block !important;
  position: absolute;
  top: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
  white-space: nowrap;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 10;
}

/* 隐藏默认的hover触发的标签弹出效果 */
.a9s-annotation:hover .a9s-comment {
  display: block !important;
  transform: none !important;
}

方法2：使用自定义Formatter API实现 #

如果需要对标签内容、位置做更复杂的逻辑控制，可以用Annotorious官方提供的Formatter接口，在初始化时传入自定义格式化规则：

const anno = Annotorious.init({
  image: 'test',
  locale: 'auto',
  widgets: [{ widget: 'COMMENT' }],
  // 自定义标注格式化规则
  formatter: function(annotation) {
    // 给当前标注添加自定义类名，方便后续样式控制
    return {
      'class': 'custom-annotation-with-label'
    }
  }
});

初始化后再配合上面的CSS代码即可，还可以在formatter中根据标注的内容、位置动态调整标签的展示逻辑。

补充说明 #

你之前调用的anno.setVisible(true)是控制所有标注形状的全局显隐状态的API，和标签的展示位置、默认可见性没有关联，所以无法实现你要的效果。目前官方没有专门的额外插件做这个需求，上述两种原生支持的方式就可以完全实现你要的效果。

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