如何在viewer非editMode状态下显示markup并正常使用edit2D功能

方案1：高版本Markups扩展官方推荐方案（最稳定，无层级冲突） #

旧版enterViewMode()方法已被废弃，目前新版Markups扩展使用show()方法实现非编辑模式下的markup持久化显示，操作步骤如下：

• 完成markup绘制后，先序列化当前所有markup内容

  const markupSvg = markupsExt.generateData()
  

• 调用show方法传入序列化数据，同时配置退出编辑模式

  markupsExt.show(markupSvg, {
    keepEditMode: false // 设为false将自动退出编辑模式，markup保留在前景渲染层
  })
  

• 该方案生成的markup为静态渲染层，默认不会拦截鼠标事件，可直接正常使用edit2D工具，无需额外调整层级。如果后续需要重新编辑markup，调用markupsExt.editMarkup(markupSvg)即可重新进入编辑模式。

方案2：保持编辑模式+事件穿透（适合需要频繁切换markup编辑的场景） #

你提到的保持编辑模式的思路完全可行，不需要调整画布层级，只需要修改markup画布的事件响应属性即可实现事件透传：

• 进入markup编辑模式并完成绘制后，给markup的svg画布设置事件穿透

  markupsExt.svg.setAttribute('pointer-events', 'none')
  

• 此时markup不会消失，所有鼠标操作会直接透传给下层的edit2D工具，可正常使用edit2D功能。
• 需要重新编辑markup时，恢复画布的事件响应即可：

  markupsExt.svg.setAttribute('pointer-events', 'auto')
  

注意事项 #

• 两种方案均无需手动调整canvas/svg层级，默认渲染顺序就可以保证markup显示在最上层且不影响edit2D的操作
• 如果需要多次叠加markup内容，每次绘制完成后重新执行序列化+show的流程即可叠加新的markup内容

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