@whitekite/corps-viewport
TypeScript icon, indicating that this package has built-in type declarations

1.4.1 • Public • Published

corps-viewport

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

安装

yarn

yarn add @whitekite/corps-viewport

npm

npm i @whitekite/corps-viewport

pnpm

pnpm add @whitekite/corps-viewport

CornerstoneViewport

主要的显示组件

字段 说明 类型
API
activeTool 当前激活的工具 string
synchronizationContext 同步工具 Sync
tools 使用的工具集:注册才可使用 Tool
imageIds 加载的dicom片:请使用changedicom工具将普通url转为dicomweb标准 string[]
style 自定义样式 CSSProperties
class 自定义样式class string
style 自定义样式 CSSProperties
Event
onSetViewportActive 当查看器被手势激活时 VoidFunction
onViewportInit 当查看器被初始化 (element: HTMLElement | null) => void
onImageLoad 当dicom片加载完成 (element: HTMLElement | null) => void
Tool 示例以及常见工具 所有工具
name 工具的名称 ?string<
name 工具的名称 ?string
toolClass 自定义工具:内部自带工具GridDividingLineTool详见下方表格 BaseTool extends Class
props 工具的配置:详细配置 Record< string , string > 
mode 工具模式 active | passive | enabled | disabled
modeOptions 工具的配置:详细配置 { mouseButtonMask: number } | Record< string, number >

样式

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)

Readme

Keywords

none

Package Sidebar

Install

npm i @whitekite/corps-viewport

Weekly Downloads

0

Version

1.4.1

License

MIT

Unpacked Size

130 kB

Total Files

9

Last publish

Collaborators

  • whitekite