Forge Viewer v7中MarkupCore扩展UI自定义及填充描边等属性操作咨询

原生UI结构调整说明 #

原生MarkupCore扩展的UI属于内部私有实现，没有暴露公开的结构修改接口，仅靠CSS覆写只能调整外观样式，无法大幅修改结构，强制修改内部DOM会导致版本兼容问题，不推荐该操作，优先选择自定义工具栏方案。

自定义工具栏核心实现方法 #

首先加载并获取MarkupCore扩展实例：

const markupCore = await viewer.loadExtension('Autodesk.MarkupCore');

样式属性调整相关API #

所有属性修改会对后续新建的标记生效，若要修改已存在的标记，需先选中目标标记后调用对应标记的setStyle方法：

• 设置填充相关属性

  // 设置填充颜色，参数为THREE.Color实例
  markupCore.style.set('fill-color', new THREE.Color(255/255, 0, 0));
  // 设置填充透明度，取值范围0-1
  markupCore.style.set('fill-opacity', 0.5);
  

• 设置描边相关属性

  // 设置描边颜色
  markupCore.style.set('stroke-color', new THREE.Color(0, 0, 255/255));
  // 设置描边宽度，单位px
  markupCore.style.set('stroke-width', 2);
  // 设置描边透明度，取值范围0-1
  markupCore.style.set('stroke-opacity', 0.8);
  

常用操作调用方法 #

自定义工具栏的按钮点击事件可直接调用以下原生方法：

• 切换绘制工具：markupCore.activateTool(toolName)，支持的工具名可选值为rectangle、cloud、arrow、text、freehand、highlight
• 取消当前绘制：markupCore.cancel()
• 保存当前所有标记：markupCore.saveMarkups()
• 退出标记编辑模式：markupCore.deactivateTool()

注意事项 #

• 样式修改需要在绘制工具激活状态下操作，才会实时生效
• 修改已选中标记的样式示例：markupCore.selectedMarkup.setStyle('fill-opacity', 0.3)

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