cornerstone系列 - 定位线工具改进

cornerstoneTool官方有提供定位线工具ReferenceLines，example: https://tools.cornerstonejs.org/examples/tools/reference-lines.html

这工具可以在targetElement显示sourceElement图像所在的位置，那如果我们期望在target图像上显示整个source序列的定位线，当前图像所在定位线用高亮色，序列其余对应的定位线用白色，应该如何实现？

首先我的项目背景是基于react+redux的，所以在state中添加一个referenceLineType属性，值是 'image' 或 'series'，在视图层区分当前定位线开启的状态。然后在工具enable时传入type，目的是让ReferenceLinesTool知道我们当前的状态。

cornerstoneTools.setToolEnabledForElement(this.element, 'ReferenceLines', {
     synchronizationContext: synchronizer,
     type
 });

因为我们要对官网的定位线工具进行改动，所以把ReferenceLinesTool的源码搬到项目中，cornerstoneTool.ReferencePositionTool = ReferencePositionTool替换成我们自己的定位线工具。接着我们对源码进行修改(源码篇幅略多，只附上改动的地方)：

// ReferenceLinesTool.js
constructor(props = {}) {
    .....
    this.type = 'image';
}

async enabledCallback(element, {synchronizationContext, type} = {}) {
   .....
   this.type = type || 'image';
}

renderToolData(evt) {
           if (this.type === 'image') {
                // 图像模式
                this.renderer(
                    context,
                    eventData,
                    evt.currentTarget,
                    referenceEnabledElement
                );
            } else {
                // 序列模式 stack中的所有image都做一遍render
                const toolData = getToolState(referenceEnabledElement, 'stack');
                const referenceImage = external.cornerstone.getEnabledElement(referenceEnabledElement).image;
                let currentReferenceId;
                if (referenceImage) {
                    currentReferenceId = referenceImage.imageId;
                }
                if (toolData && toolData.data && (toolData.data.length > 0)) {

                    const imageIds = toolData.data[0].imageIds;
                    lodash.forEach(imageIds, (id, i) => {
                        let color = '#999';
                        if ((i === 0) || (i === (imageIds.length - 1))) {
                            color = '#fff';
                        }
                        if (currentReferenceId && (id === currentReferenceId)) {
                            color = null
                        }
                        this.renderer(
                            context,
                            eventData,
                            evt.currentTarget,
                            null,
                            id,
                            color
                        );
                    })

                }
            }
}

然后对负责渲染的renderActiveReferenceLine.js也稍作修改，添加referenceImageId和customColor参数

export default function (context, eventData, targetElement, referenceElement, referenceImageId, customColor) {
    const cornerstone = external.cornerstone;
    const targetImage = cornerstone.getEnabledElement(targetElement).image;

    if (!targetImage) {
        return;
    }

    let _referenceImageId = referenceImageId;
    if (!_referenceImageId) {
        const referenceImage = cornerstone.getEnabledElement(referenceElement).image;
        if (!referenceImage) {
            return;
        }
        _referenceImageId = referenceImage.imageId;
    }

    const referenceImagePlane = cornerstone.metaData.get(
        'imagePlaneModule',
        _referenceImageId
    );

    .....
    let color = customColor || toolColors.getActiveColor();
    ......
}