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

這工具可以在targetElement顯示sourceElement圖像所在的位置，那如果我們期望在target圖像上顯示整個(gè)source序列的定位線，當(dāng)前圖像所在定位線用高亮色，序列其余對(duì)應(yīng)的定位線用白色，應(yīng)該如何實(shí)現(xiàn)？

首先我的項(xiàng)目背景是基于react+redux的，所以在state中添加一個(gè)referenceLineType屬性，值是 'image' 或 'series'，在視圖層區(qū)分當(dāng)前定位線開(kāi)啟的狀態(tài)。然后在工具enable時(shí)傳入type，目的是讓ReferenceLinesTool知道我們當(dāng)前的狀態(tài)。

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

因?yàn)槲覀円獙?duì)官網(wǎng)的定位線工具進(jìn)行改動(dòng)，所以把ReferenceLinesTool的源碼搬到項(xiàng)目中，cornerstoneTool.ReferencePositionTool = ReferencePositionTool替換成我們自己的定位線工具。接著我們對(duì)源碼進(jìn)行修改(源碼篇幅略多，只附上改動(dòng)的地方)：

// 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
                        );
                    })

                }
            }
}

然后對(duì)負(fù)責(zé)渲染的renderActiveReferenceLine.js也稍作修改，添加referenceImageId和customColor參數(shù)

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();
    ......
}