Autodesk Forge Viewer：如何在PixelCompare扩展对比文档中显示测量值

要实现同时显示红蓝差异高亮和测量值，核心是让PixelCompare的差异渲染与测量工具的绘制层实现视觉整合，以下是具体实现思路：

1. 复用测量工具的Overlay上下文 #

PixelCompare默认会创建独立的自定义Overlay渲染差异，我们可以修改其渲染目标，直接复用MeasurementExtension的2D绘制上下文，让差异高亮和测量值绘制在同一层：

// 扩展PixelCompareExtension，重写差异渲染逻辑
class IntegratedPixelCompareExtension extends Autodesk.Viewing.Extensions.PixelCompare.PixelCompareExtension {
    constructor(viewer, options) {
        super(viewer, options);
        this.measurementOverlay = null;
    }

    load() {
        super.load();
        // 获取MeasurementExtension的Overlay实例
        const measurementExt = this.viewer.getExtension('Autodesk.Measure');
        if (measurementExt) {
            this.measurementOverlay = measurementExt.overlay;
            // 替换PixelCompare的自定义overlay为测量工具的overlay
            this.compareOverlay = this.measurementOverlay;
            // 重新初始化差异渲染的2D上下文
            this._initCompareContext();
        }
        return true;
    }

    _initCompareContext() {
        if (this.measurementOverlay) {
            this.compareContext = this.measurementOverlay.canvas.getContext('2d');
            // 保留差异渲染的透明度和颜色配置
            this.compareContext.globalAlpha = 0.5;
        }
    }

    // 重写差异渲染方法，直接绘制到测量overlay的上下文
    _renderDifferences(diffData) {
        if (!this.compareContext) return;
        // 遍历差异数据绘制红蓝高亮（红色标记新增内容，蓝色标记删除内容）
        diffData.forEach(diff => {
            const { x, y, width, height, isAdded } = diff;
            this.compareContext.fillStyle = isAdded ? '#ff0000' : '#0000ff';
            this.compareContext.fillRect(x, y, width, height);
        });
    }
}

// 注册自定义整合扩展
Autodesk.Viewing.theExtensionManager.registerExtension('IntegratedPixelCompare', IntegratedPixelCompareExtension);

2. 调整Overlay层级确保双图层可见 #

如果不想修改PixelCompare核心代码，可以通过调整两个Overlay的层级，让差异层和测量层同时显示：

// 监听扩展加载完成事件，调整层级
viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT, (event) => {
    if (event.extensionId === 'Autodesk.PixelCompare') {
        const pixelCompareExt = viewer.getExtension('Autodesk.PixelCompare');
        const measurementExt = viewer.getExtension('Autodesk.Measure');
        if (pixelCompareExt && measurementExt) {
            // 设置差异层z-index低于测量层，确保测量值在上方显示
            pixelCompareExt.compareOverlay.canvas.style.zIndex = '1';
            measurementExt.overlay.canvas.style.zIndex = '2';
            // 强制两个overlay保持可见状态
            pixelCompareExt.compareOverlay.canvas.style.display = 'block';
            measurementExt.overlay.canvas.style.display = 'block';
        }
    }
});

3. 同步对齐与测量模型状态 #

确保模型对齐后，测量工具能同时识别两个模型的坐标：

// 监听PixelCompare对齐完成事件，同步测量工具的模型状态
viewer.addEventListener('PixelCompare.AlignCompleted', () => {
    const measurementExt = viewer.getExtension('Autodesk.Measure');
    if (measurementExt) {
        // 让测量工具同时加载当前所有模型
        measurementExt.setActiveModels(viewer.modelQueue.getModels());
    }
});

通过以上任一方案，即可实现类似旧版2DCompare扩展的效果——同时查看红蓝差异高亮和测量值。

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