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)