corps-viewport

使用基石封装的vue3-dicom查看器组件

安装

yarn

yarn add @whitekite/corps-viewport

npm

npm i @whitekite/corps-viewport

pnpm

pnpm add @whitekite/corps-viewport

CornerstoneViewport

主要的显示组件

样式

import '@whitekite/corps-viewport/dist/style.css'
// or 
import '@whitekite/corps-viewport/style'

Example

<CornerstoneViewport
  imageIds={item}
  onViewportInit={(element) => {
    if (element) {
      // 元素是否存在，存在则将同步元素更新
      syncElement.value[index] = element
    }
  }}
  tools={tools.value}
  activeTool={activeTool.value}
  synchronizationContext={syncTool.value}
  onImageLoad={(load) => {
    imageLoadList.value[index] = load
  }}
  onSetViewportActive={() => {
    activeKey.value = index
  }}
/>

Util·工具

usePanZoomSynchronizer

移动

/**
 * synchronizationContext的一种
 * @return new Synchronizer('cornerstoneimagerendered', panZoomSynchronizer)
 */
const panZoomSynchronizer = usePanZoomSynchronizer()

useWwwcSynchronizer

调窗同步

/**
 * synchronizationContext的一种
 * @return new Synchronizer('cornerstoneimagerendered', wwwcSynchronizer)
 */
const wwwcSynchronizer = useWwwcSynchronizer()

GridDividingLineTool

自定义胸肺比工具

tools.push({
  name: 'GridDividingLine',
  toolClass: GridDividingLineTool,
  mode: 'disabled',
  modeOptions: {mouseButtonMask: 1},
})

useCornerstoneChangeDicomFileUrl

将普通下载url转为dicomweb标准url

/**
 * 改变url使基石可以直接读dicom文件
 */
const {changeUrlList} = useCornerstoneChangeDicomFileUrl()

imageIds.value[0] = changeUrlList(urlList)

useCornerstoneRegister

注册dicom查看器工具 (必须)

/**
 * 注册基石
 */
useCornerstoneRegister()

useNormalCornerstoneToolList

内置的Cornerstone常用工具数组，可用于便捷注册工具数组

内置工具：

Wwwc

Pan

Zoom

Magnify

Rotate

CobbAngle

Length

Bidirectional

Angle

RectangleRoi

Probe

EllipticalRoi

FreehandRoi

const toolList = useNormalCornerstoneToolList();

<CornerstoneViewport
  imageIds={changeUrlList([])}
  tools={toolList.value}
  activeTool="GridDividingLine"
/>

useCornerstoneResetElements

重置dicom查看器

注意：使用钢笔工具请勿调用此方法

对绘图工具的清空本质上是直接清空工具状态

暂时只能清空工具内写死的绘图工具状态，一键清空，请期待后续更新

如封装额外绘图工具请自行封装该方法

支持清空绘图状态：

FreehandRoi

GridDividingLine

CobbAngle

Length

Bidirectional

Angle

RectangleRoi

Probe

EllipticalRoi

 /**
 * 重置
 * 注意：使用钢笔工具请勿调用此方法
 */
const cornerstoneResetElements = useCornerstoneResetElements(syncElement)

useCornerstoneScreenSizeCalibration

根据屏幕的真实宽度（单位：mm）计算影像真实尺寸显示大小

const calibrateThroughPicture = useCornerstoneScreenSizeCalibration();
/**
 * calibrateThroughPicture(element:读片器的元素，屏幕的真实宽度：mm)
 */
<button onClick={() => calibrateThroughPicture(syncElement.value, 500)}>自适应</button>

useCornerstoneScrollToIndex

指定滚动至序列下标

const scrollToIndex = useCornerstoneScrollToIndex();

<button onClick={() => scrollToIndex(syncElement.value, 1)}>滚动至指定下标</button>

useCornerstonePlayClip

播放序列片

const {
  // 播放状态
  state,
  // 播放状态
  clipState,
  // 播放
  play,
  // 暂停
  stop,
  // 切换播放状态
  toggle,
  // 播放
  playClip,
  // 暂停
  stopClip,
  // 切换播放状态
  toggleClip,
} = useCornerstonePlayClip();

/**
 * 播放
 * @param element 读片器所在元素
 * @param frame 播放帧数
 */
playClip(syncElement.value, 24)

/**
 * 暂停
 * @param element 读片器所在元素
 */
stopClip(syncElement.value)

/**
 * 切换播放状态
 * @param element 读片器所在元素
 * @param frame 播放帧数
 */
toggleClip(syncElement.value, 24)