1162 lines
36 KiB
Plaintext
1162 lines
36 KiB
Plaintext
<template>
|
|
<div
|
|
id="canvas"
|
|
ref="canvas"
|
|
v-loading="loading"
|
|
element-loading-text="Loading..."
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
style="width:100%;height:100%;position:relative;"
|
|
class="cornerstone-element"
|
|
@contextmenu.prevent="onContextmenu"
|
|
@mousemove="sliderMousemove"
|
|
@mouseup="sliderMouseup"
|
|
>
|
|
<div v-show="dicomInfo.series" class="info-series">
|
|
<div>Series #{{ dicomInfo.series }}</div>
|
|
<div>Image #{{ dicomInfo.frame }}</div>
|
|
<div>{{ dicomInfo.modality }}</div>
|
|
</div>
|
|
<div v-show="dicomInfo.series" class="info-image">
|
|
<!-- <div>
|
|
P {{ dicomInfo.size }}
|
|
<span v-show="dicomInfo.pixel">{{ dicomInfo.pixel }}mm</span>
|
|
</div>
|
|
<div v-show="dicomInfo.thick">Slice Thickness {{ dicomInfo.thick }}mm</div>
|
|
<div>WW/WC {{ dicomInfo.wwwc }}</div>
|
|
<div>Zoom {{ dicomInfo.zoom }}</div>
|
|
<div v-show="dicomInfo.location">Location {{ dicomInfo.location }}mm</div> -->
|
|
<!-- <div v-show="toolState.clipPlaying">FPS {{ dicomInfo.fps }}</div> -->
|
|
<div v-show="mousePosition.mo">
|
|
Pos: {{ mousePosition.x?mousePosition.x.toFixed(0):'' }}, {{ mousePosition.y?mousePosition.y.toFixed(0):'' }}
|
|
</div>
|
|
<div v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
|
|
Density: {{ mousePosition.mo }}HU
|
|
</div>
|
|
<div v-else-if="(dicomInfo.modality === 'PT' && mousePosition.suv)">
|
|
Density: {{ mousePosition.suv.toFixed(3) }}SUV
|
|
</div>
|
|
<div v-else-if="mousePosition.mo">
|
|
Density: {{ mousePosition.mo }}
|
|
</div>
|
|
<div>
|
|
W*H: {{ dicomInfo.size }}
|
|
</div>
|
|
|
|
<div>Zoom: {{ dicomInfo.zoom }}</div>
|
|
</div>
|
|
|
|
<div class="info-subject">
|
|
<div>{{ stack.description }}</div>
|
|
<!-- <div>{{ dicomInfo.hospital }}</div> -->
|
|
<!-- <div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div> -->
|
|
<!-- <div>{{ dicomInfo.name }}</div> -->
|
|
<!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
|
|
<!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
|
|
<!-- <div>{{ dicomInfo.time }}</div> -->
|
|
</div>
|
|
<div ref="sliderBox" class="my_slider_box" style="position: absolute;right: 1px;height: calc(100% - 100px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer">
|
|
<div :style="{top: height + '%'}" style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move" @mousedown="sliderMousedown($event)" />
|
|
</div>
|
|
<div style="position: absolute;left: 50%;top: 15px;color: #f44336;">
|
|
{{ markers.top }}
|
|
</div>
|
|
<div style="position: absolute;top: 50%;right: 15px;color: #f44336;">
|
|
{{ markers.right }}
|
|
</div>
|
|
|
|
<div style="position: absolute;left: 50%;bottom: 15px;color: #f44336;">
|
|
{{ markers.bottom }}
|
|
</div>
|
|
<div style="position: absolute;top: 50%;left: 15px;color: #f44336;">
|
|
{{ markers.left }}
|
|
</div>
|
|
|
|
<div class="info-instance">
|
|
<!-- <div v-show="dicomInfo.pixel">
|
|
Pixel: {{ dicomInfo.pixel }}mm
|
|
</div> -->
|
|
<div v-show="dicomInfo.location">Location: {{ dicomInfo.location }}</div>
|
|
<div v-show="dicomInfo.thick">Slice Thickness: {{ dicomInfo.thick }}mm</div>
|
|
<div v-show="dicomInfo.wwwc">WW/WL: {{ dicomInfo.wwwc }}</div>
|
|
</div>
|
|
<!-- <div v-show="stack.firstImageLoading" class="load-indicator">
|
|
Loading Series #{{ stack.seriesNumber }}...
|
|
</div>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import Contextmenu from 'vue-contextmenujs'
|
|
Vue.use(Contextmenu)
|
|
import * as cornerstone from 'cornerstone-core'
|
|
import * as cornerstoneMath from 'cornerstone-math'
|
|
import * as cornerstoneTools from 'cornerstone-tools'
|
|
const scroll = cornerstoneTools.import('util/scrollToIndex')
|
|
import Hammer from 'hammerjs'
|
|
import getOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/getOrientationString'
|
|
import invertOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/invertOrientationString'
|
|
|
|
import calculateSUV from '@/views/trials/trials-panel/reading/dicoms/tools/calculateSUV'
|
|
// import requestPoolManager from '@/utils/request-pool'
|
|
import ScaleOverlayTool from '@/views/trials/trials-panel/reading/dicoms/tools/ScaleOverlay/ScaleOverlayTool'
|
|
cornerstoneTools.external.cornerstone = cornerstone
|
|
cornerstoneTools.external.Hammer = Hammer
|
|
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
|
|
cornerstoneTools.toolStyle.setToolWidth(2)
|
|
cornerstoneTools.toolColors.setToolColor('rgb(255, 0, 0)')
|
|
cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)')
|
|
// cornerstoneTools.init({ showSVGCursors: true })
|
|
cornerstoneTools.init()
|
|
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
|
|
export default {
|
|
name: 'DicomCanvas',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
canvas: {},
|
|
height: 0,
|
|
stack: {
|
|
seriesId: '',
|
|
instanceId: '',
|
|
seriesNumber: '',
|
|
imageIds: [],
|
|
currentImageIdIndex: 0,
|
|
firstImageLoading: false
|
|
// preventCache: true
|
|
},
|
|
dicomInfo: {
|
|
hospital: '',
|
|
pid: '',
|
|
name: '',
|
|
sex: '',
|
|
age: '',
|
|
acc: '',
|
|
modality: '',
|
|
time: '',
|
|
series: '',
|
|
frame: '',
|
|
size: '',
|
|
pixel: 0,
|
|
thick: 0,
|
|
wwwc: '',
|
|
zoom: 0,
|
|
fps: 5
|
|
},
|
|
toolState: {
|
|
initialized: false,
|
|
activeTool: 'none',
|
|
dicomInfoVisible: false,
|
|
clipPlaying: false,
|
|
viewportInvert: false
|
|
},
|
|
loadImagePromise: null,
|
|
AnnotationSync: null,
|
|
allROIToolData: {},
|
|
type: '',
|
|
series: '',
|
|
ToolStateManager,
|
|
sliderInfo: {
|
|
oldB: null,
|
|
oldM: null,
|
|
isMove: false
|
|
},
|
|
mousePosition: { x: '', y: '', mo: '' },
|
|
markers: { top: '', right: '', bottom: '', left: '' }
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.type = this.$router.currentRoute.query.type ? this.$router.currentRoute.query.type : ''
|
|
this.canvas = this.$refs.canvas
|
|
this.canvas.addEventListener('cornerstonenewimage', this.onNewImage)
|
|
this.canvas.addEventListener(
|
|
'cornerstoneimagerendered',
|
|
this.onImageRendered
|
|
)
|
|
this.canvas.addEventListener(
|
|
'cornerstonetoolsclipstopped',
|
|
this.onClipStopped
|
|
)
|
|
this.canvas.addEventListener('mouseleave', () => {
|
|
this.mousePosition.mo = ''
|
|
})
|
|
this.canvas.addEventListener('cornerstonetoolsmousemove', this.mouseMove)
|
|
document.addEventListener('mouseup', () => {
|
|
this.sliderMouseup()
|
|
})
|
|
this.canvas.addEventListener('cornerstonetoolsstackscroll', this.stackScrollCallback)
|
|
},
|
|
|
|
methods: {
|
|
loadImageStack(dicomSeries) {
|
|
this.$nextTick(() => {
|
|
this.series = dicomSeries
|
|
this.stack.seriesId = dicomSeries.seriesId
|
|
this.stack.seriesNumber = dicomSeries.seriesNumber
|
|
this.stack.imageIds = dicomSeries.imageIds
|
|
this.stack.currentImageIdIndex = dicomSeries.imageIdIndex ? dicomSeries.imageIdIndex : 0
|
|
this.stack.firstImageLoading = true
|
|
this.stack.description = dicomSeries.description
|
|
this.toolState.viewportInvert = false
|
|
this.toolState.dicomInfoVisible = false
|
|
var imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
|
|
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
instanceId = instanceId.split('.')[0]
|
|
this.stack.instanceId = instanceId
|
|
if (this.toolState.clipPlaying) this.toggleClipPlay()
|
|
const element = this.$refs.canvas
|
|
cornerstone.enable(element)
|
|
this.loading = true
|
|
|
|
cornerstone.loadAndCacheImage(this.stack.imageIds[this.stack.currentImageIdIndex])
|
|
.then(image => {
|
|
this.loading = false
|
|
this.onFirstImageLoaded(image)
|
|
}).catch((error) => {
|
|
this.loading = false
|
|
if (error.error && error.error.message) {
|
|
this.$message.error(error.error.message)
|
|
}
|
|
})
|
|
})
|
|
},
|
|
onFirstImageLoaded(image) {
|
|
const element = this.$refs.canvas
|
|
var viewport = cornerstone.getDefaultViewportForImage(this.canvas, image)
|
|
cornerstone.displayImage(this.canvas, image, viewport)
|
|
|
|
if (!this.toolState.initialized) {
|
|
this.toolState.initialized = true
|
|
const toolButtons = document.querySelectorAll('[data-tool]')
|
|
// const scope = this
|
|
Array.from(toolButtons).forEach((toolBtn) => {
|
|
// Add the tool
|
|
const toolName = toolBtn.getAttribute('data-tool')
|
|
const apiTool = cornerstoneTools[`${toolName}Tool`]
|
|
|
|
if (apiTool) {
|
|
const toolAlreadyAddedToElement = cornerstoneTools.getToolForElement(
|
|
element,
|
|
apiTool
|
|
)
|
|
if (!toolAlreadyAddedToElement) {
|
|
cornerstoneTools.addToolForElement(element, apiTool)
|
|
}
|
|
}
|
|
// Setup button listener
|
|
// Prevent right click context menu for our menu buttons
|
|
toolBtn.addEventListener(
|
|
'contextmenu',
|
|
(event) => event.preventDefault(),
|
|
true
|
|
)
|
|
// Prevent middle click opening a new tab on Chrome & FF
|
|
toolBtn.addEventListener(
|
|
'auxclick',
|
|
(event) => {
|
|
if (event.button && event.button === 1) {
|
|
event.preventDefault()
|
|
}
|
|
},
|
|
false
|
|
)
|
|
})
|
|
if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.WwwcRegionTool)) {
|
|
cornerstoneTools.addToolForElement(element, cornerstoneTools.WwwcRegionTool)
|
|
}
|
|
if (
|
|
!cornerstoneTools.getToolForElement(
|
|
element,
|
|
cornerstoneTools.StackScrollMouseWheelTool
|
|
)
|
|
) {
|
|
cornerstoneTools.addToolForElement(
|
|
element,
|
|
cornerstoneTools.StackScrollMouseWheelTool
|
|
)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(
|
|
element,
|
|
'StackScrollMouseWheel',
|
|
{}
|
|
)
|
|
if (!cornerstoneTools.getToolForElement(element, ScaleOverlayTool)) {
|
|
cornerstoneTools.addToolForElement(element, ScaleOverlayTool)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(element, 'ScaleOverlay', {})
|
|
}
|
|
// if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.OrientationMarkersTool)) {
|
|
// cornerstoneTools.addToolForElement(
|
|
// element,
|
|
// cornerstoneTools.OrientationMarkersTool
|
|
// )
|
|
// }
|
|
// cornerstoneTools.setToolActiveForElement(
|
|
// element,
|
|
// 'OrientationMarkers',
|
|
// {}
|
|
// )
|
|
// cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'playClip'])
|
|
cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
|
|
cornerstoneTools.addToolState(this.canvas, 'stack', this.stack)
|
|
cornerstoneTools.stackPrefetch.enable(this.canvas)
|
|
cornerstone.updateImage(element, true)
|
|
// cornerstoneTools.stackPrefetch.setConfiguration({ maxImagesToPrefetch: Infinity,
|
|
// preserveExistingPool: true })
|
|
// cornerstoneTools.stackPrefetch.enable(this.canvas)
|
|
// this.stack.imageIds.forEach((item, index) => {
|
|
// if (index === 0) {
|
|
// return
|
|
// }
|
|
// cornerstone.loadImage(item)
|
|
// })
|
|
|
|
this.stack.firstImageLoading = false
|
|
this.toolState.dicomInfoVisible = true
|
|
// 重绘历史标记
|
|
// if (ToolStateManager.toolState.hasOwnProperty(image.imageId) === true) {
|
|
// return
|
|
// }
|
|
// this.stack.instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
|
|
var instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
|
|
instanceId = instanceId.split('.')[0]
|
|
this.stack.instanceId = instanceId
|
|
this.height = (this.stack.currentImageIdIndex) * 100 / (this.stack.imageIds.length - 1)
|
|
this.resetWwwc()
|
|
},
|
|
onNewImage(e) {
|
|
e.detail.enabledElement.options = {}
|
|
var data = e.detail.image.data
|
|
this.dicomInfo.hospital = data.string('x00080080')
|
|
// this.dicomInfo.pid = data.string('x00100020')
|
|
this.dicomInfo.pid = data.string('x00120040')
|
|
this.dicomInfo.name = data.string('x00100010')
|
|
this.dicomInfo.age = data.string('x00101010')
|
|
this.dicomInfo.sex = data.string('x00100040')
|
|
this.dicomInfo.acc = data.string('x00080050') // 登记号
|
|
this.dicomInfo.modality = data.string('x00080060')
|
|
this.dicomInfo.time = this.formatDicomDateTime(
|
|
data.string('x00080020'),
|
|
data.string('x00080030')
|
|
)
|
|
this.dicomInfo.series = data.string('x00200011')
|
|
this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
|
|
this.stack.imageIds.length
|
|
}`
|
|
this.dicomInfo.size = `${data.uint16('x00280011')}x${data.uint16(
|
|
'x00280010'
|
|
)}`
|
|
var pixel = data.floatString('x00280030')
|
|
if (pixel) {
|
|
this.dicomInfo.pixel = pixel.toFixed(2)
|
|
}
|
|
this.dicomInfo.thick = data.floatString('x00180050') // 切片厚度
|
|
if (this.dicomInfo.thick) {
|
|
this.dicomInfo.thick = this.dicomInfo.thick.toFixed(2)
|
|
}
|
|
},
|
|
stackScrollCallback(e) {
|
|
const { detail } = e
|
|
if (this.isScrollSync) {
|
|
this.$emit('scrollSync', { canvasIndex: this.canvasIndex, direction: detail.direction })
|
|
}
|
|
this.stack.currentImageIdIndex = e.detail.newImageIdIndex
|
|
this.height = (this.stack.currentImageIdIndex) * 100 / (this.stack.imageIds.length - 1)
|
|
// var priority = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
|
|
|
|
// requestPoolManager.loadAndCacheImagePlus(this.stack.imageIds[this.stack.currentImageIdIndex], this.stack.seriesId, priority)
|
|
// .then(image => {
|
|
// this.height = (this.stack.currentImageIdIndex) * 100 / (this.stack.imageIds.length - 1)
|
|
// })
|
|
// .catch((error) => {
|
|
// console.log(error)
|
|
// })
|
|
},
|
|
formatDicomDateTime(date, time) {
|
|
if (date) {
|
|
date = `${date.substr(0, 4)}-${date.substr(4, 2)}-${date.substr(6, 2)}`
|
|
}
|
|
if (time) { time = `${time.substr(0, 2)}:${time.substr(2, 2)}:${time.substr(4, 2)}` }
|
|
return time ? `${date} ${time}` : `${date} 00:00:00`
|
|
},
|
|
|
|
onImageRendered(e) {
|
|
var imageId = e.detail.image.imageId
|
|
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
instanceId = instanceId.split('.')[0]
|
|
|
|
if (this.imageId !== instanceId) {
|
|
this.getOrientationMarker(e.detail.element)
|
|
this.imageId = instanceId
|
|
}
|
|
this.stack.instanceId = instanceId
|
|
var viewport = e.detail.viewport
|
|
this.dicomInfo.wwwc = `${Math.round(
|
|
viewport.voi.windowWidth
|
|
)}/${Math.round(viewport.voi.windowCenter)}` // 窗位
|
|
// this.dicomInfo.zoom = viewport.scale.toFixed(2)
|
|
this.dicomInfo.zoom = viewport.scale.toFixed(4)
|
|
var data = e.detail.image.data
|
|
const position = data.string('x00200032')
|
|
this.dicomInfo.location = position ? Number(
|
|
position.split('\\')[position.split('\\').length - 1]
|
|
).toFixed(2) : ''
|
|
},
|
|
getOrientationMarker(element) {
|
|
const enabledElement = cornerstone.getEnabledElement(element)
|
|
const imagePlane = cornerstone.metaData.get(
|
|
'imagePlaneModule',
|
|
enabledElement.image.imageId
|
|
)
|
|
|
|
if (!imagePlane || !imagePlane.rowCosines || !imagePlane.columnCosines) {
|
|
return
|
|
}
|
|
|
|
const row = getOrientationString(imagePlane.rowCosines)
|
|
const column = getOrientationString(imagePlane.columnCosines)
|
|
const oppositeRow = invertOrientationString(row)
|
|
const oppositeColumn = invertOrientationString(column)
|
|
const markers = {
|
|
top: oppositeColumn,
|
|
bottom: column,
|
|
left: oppositeRow,
|
|
right: row
|
|
}
|
|
if (!markers) {
|
|
return
|
|
}
|
|
this.orientationMarkers = [oppositeColumn, row, column, oppositeRow]
|
|
this.originalMarkers = [oppositeColumn, row, column, oppositeRow]
|
|
this.setMarkers()
|
|
},
|
|
setMarkers() {
|
|
var markers = [...this.orientationMarkers]
|
|
for (const key in this.markers) {
|
|
var v = markers.shift(0)
|
|
this.markers[key] = v
|
|
}
|
|
},
|
|
onImageLoaded(e) {
|
|
var image = e.detail.image
|
|
// var seriesIndex = -1
|
|
var seriesUid = image.data.string('x0020000e')
|
|
console.log(seriesUid)
|
|
},
|
|
getToolForElement(toolName) {
|
|
var isExist = false
|
|
for (var i = 0; i < cornerstoneTools.store.state.tools.length; i++) {
|
|
if (cornerstoneTools.store.state.tools[i].name === toolName) {
|
|
isExist = true
|
|
break
|
|
}
|
|
}
|
|
return isExist
|
|
},
|
|
mouseMove(e) {
|
|
const { element, image, currentPoints } = e.detail
|
|
const x = Math.round(currentPoints.image.x)
|
|
const y = Math.round(currentPoints.image.y)
|
|
|
|
const stats = {}
|
|
|
|
if (x >= 0 && y >= 0 && x < image.columns && y < image.rows) {
|
|
stats.x = x
|
|
stats.y = y
|
|
|
|
if (image.color) {
|
|
stats.storedPixels = this.getRGBPixels(element, x, y, 1, 1)
|
|
} else {
|
|
stats.storedPixels = cornerstone.getStoredPixels(
|
|
element,
|
|
x,
|
|
y,
|
|
1,
|
|
1
|
|
)
|
|
stats.sp = stats.storedPixels[0]
|
|
stats.mo = stats.sp * image.slope + image.intercept
|
|
stats.suv = calculateSUV(image, stats.sp)
|
|
}
|
|
}
|
|
|
|
this.mousePosition.x = currentPoints.image.x + 1
|
|
this.mousePosition.y = currentPoints.image.y + 1
|
|
this.mousePosition.mo = stats.mo
|
|
this.mousePosition.suv = stats.suv
|
|
},
|
|
getRGBPixels(element, x, y, width, height) {
|
|
if (!element) {
|
|
return
|
|
}
|
|
x = Math.round(x)
|
|
y = Math.round(y)
|
|
const enabledElement = cornerstone.getEnabledElement(element)
|
|
const storedPixelData = []
|
|
let index = 0
|
|
const pixelData = enabledElement.image.getPixelData()
|
|
let spIndex, row, column
|
|
|
|
if (enabledElement.image.color) {
|
|
for (row = 0; row < height; row++) {
|
|
for (column = 0; column < width; column++) {
|
|
spIndex = ((row + y) * enabledElement.image.columns + (column + x)) * 4
|
|
const red = pixelData[spIndex]
|
|
const green = pixelData[spIndex + 1]
|
|
const blue = pixelData[spIndex + 2]
|
|
const alpha = pixelData[spIndex + 3]
|
|
|
|
storedPixelData[index++] = red
|
|
storedPixelData[index++] = green
|
|
storedPixelData[index++] = blue
|
|
storedPixelData[index++] = alpha
|
|
}
|
|
}
|
|
}
|
|
|
|
return storedPixelData
|
|
},
|
|
sliderMousedown(e) {
|
|
var boxHeight = this.$refs['sliderBox'].clientHeight
|
|
this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
|
|
this.sliderInfo.oldM = e.clientY
|
|
this.sliderInfo.isMove = true
|
|
},
|
|
sliderMousemove(e) {
|
|
if (!this.sliderInfo.isMove) return
|
|
var PX = this.sliderInfo.oldB - (this.sliderInfo.oldM - e.clientY)
|
|
var boxHeight = this.$refs['sliderBox'].clientHeight
|
|
if (PX < 0) return
|
|
if (PX > boxHeight) return
|
|
var height = PX * 100 / boxHeight
|
|
var index = Math.trunc(this.stack.imageIds.length * this.height / 100)
|
|
index = index > this.stack.imageIds.length ? this.stack.imageIds.length : index < 0 ? 0 : index
|
|
// if (!cornerstone.imageCache.getImageLoadObject(this.stack.imageIds[index])) return
|
|
this.height = height
|
|
if (this.stack.currentImageIdIndex !== index) {
|
|
scroll(this.canvas, index)
|
|
}
|
|
},
|
|
sliderMouseup(e) {
|
|
this.sliderInfo.isMove = false
|
|
},
|
|
onClipStopped() {
|
|
this.toolState.clipPlaying = false
|
|
},
|
|
|
|
onKeyPress(e) {
|
|
var key = e.detail.keyCode
|
|
var keys = { PageUp: 33, PageDown: 34, End: 35, Home: 36 } // Left: 37, Up: 38, Right: 39, Down: 40
|
|
if (key < keys.PageUp || key > keys.Home) return
|
|
if (key === keys.Home) this.scrollPage(-9999)
|
|
else if (key === keys.PageUp) this.scrollPage(-1)
|
|
else if (key === keys.PageDown) this.scrollPage(1)
|
|
else if (key === keys.End) this.scrollPage(9999)
|
|
},
|
|
|
|
resizeCanvas() {
|
|
cornerstone.resize(this.canvas, true)
|
|
},
|
|
|
|
activateCanvas() {
|
|
this.canvas.tabIndex = 0
|
|
this.canvas.focus()
|
|
},
|
|
|
|
resetViewport() {
|
|
this.toolState.viewportInvert = false
|
|
var image = cornerstone.getImage(this.canvas)
|
|
cornerstone.setViewport(
|
|
this.canvas,
|
|
cornerstone.getDefaultViewportForImage(this.canvas, image)
|
|
)
|
|
},
|
|
|
|
toggleDicomInfo() {
|
|
this.toolState.dicomInfoVisible = !this.toolState.dicomInfoVisible
|
|
if (this.toolState.dicomInfoVisible) {
|
|
cornerstoneTools.orientationMarkers.enable(this.canvas)
|
|
} else cornerstoneTools.orientationMarkers.disable(this.canvas)
|
|
cornerstone.updateImage(this.canvas)
|
|
},
|
|
setColormap(colormap) {
|
|
const viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.colormap = colormap
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
cornerstone.updateImage(this.canvas, true)
|
|
if (!colormap) {
|
|
this.resetRenderCanvase(this.canvas)
|
|
}
|
|
},
|
|
resetRenderCanvase(element) {
|
|
const enabledElement = cornerstone.getEnabledElement(element)
|
|
|
|
enabledElement.renderingTools.colormapId = undefined
|
|
enabledElement.renderingTools.colorLut = undefined
|
|
|
|
const renderCanvas = enabledElement.renderingTools.renderCanvas
|
|
const canvasContext = renderCanvas.getContext('2d')
|
|
canvasContext.fillStyle = 'white'
|
|
canvasContext.fillRect(0, 0, renderCanvas.width, renderCanvas.height)
|
|
|
|
const renderCanvasData = canvasContext.getImageData(
|
|
0,
|
|
0,
|
|
renderCanvas.width,
|
|
renderCanvas.height
|
|
)
|
|
|
|
enabledElement.renderingTools.renderCanvasContext = canvasContext
|
|
enabledElement.renderingTools.renderCanvasData = renderCanvasData
|
|
},
|
|
scrollPage(offset) {
|
|
var index = this.stack.currentImageIdIndex + offset
|
|
if (index < 0) index = 0
|
|
else if (index >= this.stack.imageIds.length) {
|
|
index = this.stack.imageIds.length - 1
|
|
}
|
|
if (index !== this.stack.currentImageIdIndex) {
|
|
scroll(this.canvas, index)
|
|
}
|
|
},
|
|
|
|
toggleClipPlay() {
|
|
if (this.toolState.clipPlaying) {
|
|
cornerstoneTools.stopClip(this.canvas)
|
|
this.toolState.clipPlaying = false
|
|
return
|
|
}
|
|
this.toolState.clipPlaying = true
|
|
cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
|
|
cornerstoneTools.getToolState(
|
|
this.canvas,
|
|
'playClip'
|
|
).data[0].loop = false
|
|
},
|
|
setFps(fps) {
|
|
this.dicomInfo.fps = fps
|
|
},
|
|
|
|
resetWwwc() {
|
|
this.toolState.viewportInvert = false
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.invert = false
|
|
var image = cornerstone.getImage(this.canvas)
|
|
viewport.voi.windowWidth = image.windowWidth
|
|
viewport.voi.windowCenter = image.windowCenter
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
setWwwc(ww, wc) {
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.voi.windowWidth = ww
|
|
viewport.voi.windowCenter = wc
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
toggleInvert() {
|
|
this.toolState.viewportInvert = !this.toolState.viewportInvert
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.invert = this.toolState.viewportInvert
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
activateZoom() {
|
|
cornerstoneTools.addTool(cornerstoneTools.ZoomTool, {
|
|
configuration: {
|
|
invert: false,
|
|
preventZoomOutsideImage: false,
|
|
minScale: 0.1,
|
|
maxScale: 20.0
|
|
}
|
|
})
|
|
cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 1 })
|
|
this.toolState.activeTool = 'zoom'
|
|
},
|
|
|
|
resetRotate() {
|
|
this.orientationMarkers = [...this.originalMarkers]
|
|
this.setMarkers()
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
viewport.hflip = false
|
|
viewport.vflip = false
|
|
viewport.rotation = 0
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
setRotate(hflip, vflip, angle, type) {
|
|
var markers = [...this.orientationMarkers]
|
|
if (type === 2) {
|
|
// 垂直翻转
|
|
this.orientationMarkers[1] = markers[3]
|
|
|
|
this.orientationMarkers[3] = markers[1]
|
|
} else if (type === 3) {
|
|
// 水平翻转
|
|
this.orientationMarkers[0] = markers[2]
|
|
this.orientationMarkers[2] = markers[0]
|
|
} else if (type === 4) {
|
|
// 左转90度
|
|
this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
|
|
} else if (type === 5) {
|
|
// 右转90度
|
|
this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
|
|
}
|
|
this.setMarkers()
|
|
var viewport = cornerstone.getViewport(this.canvas)
|
|
if (hflip) viewport.hflip = !viewport.hflip
|
|
if (vflip) viewport.vflip = !viewport.vflip
|
|
if (angle !== 0) viewport.rotation += angle
|
|
cornerstone.setViewport(this.canvas, viewport)
|
|
},
|
|
|
|
saveImage() {
|
|
var uid = cornerstone.getImage(this.canvas).data.string('x00080018')
|
|
cornerstoneTools.SaveAs(this.canvas, `${uid}.png`)
|
|
},
|
|
fitToWindow() {
|
|
if (this.stack.seriesNumber) {
|
|
cornerstone.fitToWindow(this.canvas)
|
|
}
|
|
},
|
|
fitToImage() {
|
|
if (this.stack.seriesNumber) {
|
|
const enabledElement = cornerstone.getEnabledElement(this.canvas)
|
|
enabledElement.viewport.scale = 1
|
|
cornerstone.updateImage(this.canvas)
|
|
}
|
|
},
|
|
clearMeasurement() {
|
|
const viewport = cornerstone.getViewport(this.canvas)
|
|
if (viewport.colormap) {
|
|
this.resetRenderCanvase(this.canvas)
|
|
}
|
|
ToolStateManager.clear(this.canvas)
|
|
cornerstone.setViewport(
|
|
this.canvas,
|
|
cornerstone.getDefaultViewportForImage(
|
|
this.canvas,
|
|
cornerstone.getImage(this.canvas)
|
|
)
|
|
)
|
|
cornerstone.updateImage(this.canvas)
|
|
},
|
|
setToolPassive(toolName) {
|
|
cornerstoneTools.setToolPassiveForElement(this.canvas, toolName)
|
|
},
|
|
setToolActive(toolName) {
|
|
cornerstoneTools.setToolActiveForElement(this.canvas, toolName, {
|
|
mouseButtonMask: 1
|
|
})
|
|
},
|
|
setAllToolsPassive() {
|
|
cornerstoneTools.store.state.tools.forEach((tool) => {
|
|
cornerstoneTools.setToolPassiveForElement(this.canvas, tool.name)
|
|
})
|
|
},
|
|
|
|
addTargetElement(synchronizer) {
|
|
synchronizer.addTarget(this.$refs.canvas)
|
|
},
|
|
removeTarget(synchronizer) {
|
|
synchronizer.removeTarget(this.$refs.canvas)
|
|
},
|
|
addSourceElement(synchronizer) {
|
|
synchronizer.addSource(this.$refs.canvas)
|
|
},
|
|
removeSource(synchronizer) {
|
|
synchronizer.removeSource(this.$refs.canvas)
|
|
},
|
|
activeReferenceLine(synchronizer) {
|
|
if (
|
|
!cornerstoneTools.getToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools.ReferenceLinesTool
|
|
)
|
|
) {
|
|
cornerstoneTools.addToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools.ReferenceLinesTool
|
|
)
|
|
}
|
|
cornerstoneTools.setToolEnabledForElement(this.canvas, 'ReferenceLines', {
|
|
synchronizationContext: synchronizer
|
|
})
|
|
|
|
// cornerstoneTools.addTool(cornerstoneTools.CrosshairsTool)
|
|
// cornerstoneTools.setToolActive('Crosshairs', {
|
|
// mouseButtonMask: 1,
|
|
// synchronizationContext: synchronizer
|
|
// })
|
|
},
|
|
disabledReferenceLine(synchronizer) {
|
|
synchronizer.enabled = false
|
|
synchronizer.remove(this.canvas)
|
|
cornerstoneTools.setToolDisabledForElement(this.canvas, 'ReferenceLines')
|
|
// cornerstoneTools.setToolDisabledForElement(this.canvas, 'Crosshairs')
|
|
},
|
|
activeViewPortToolSync(synchronizer, toolName) {
|
|
synchronizer.add(this.canvas)
|
|
synchronizer.enabled = true
|
|
if (
|
|
!cornerstoneTools.getToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools[`${toolName}Tool`]
|
|
)
|
|
) {
|
|
cornerstoneTools.addToolForElement(
|
|
this.canvas,
|
|
cornerstoneTools[`${toolName}Tool`]
|
|
)
|
|
}
|
|
cornerstoneTools.setToolActiveForElement(this.canvas, toolName, {
|
|
mouseButtonMask: 1,
|
|
synchronizationContext: synchronizer
|
|
})
|
|
},
|
|
disabledViewPortToolSync(synchronizer, toolName) {
|
|
synchronizer.enabled = false
|
|
synchronizer.remove(this.canvas)
|
|
cornerstoneTools.setToolDisabledForElement(this.canvas, toolName)
|
|
},
|
|
activeImageSync(synchronizer) {
|
|
synchronizer.add(this.$refs.canvas)
|
|
synchronizer.enabled = true
|
|
return false
|
|
},
|
|
disabledImageSync(synchronizer) {
|
|
synchronizer.remove(this.$refs.canvas)
|
|
synchronizer.enabled = false
|
|
return false
|
|
},
|
|
activeAnnotationSync(synchronizer) {
|
|
this.AnnotationSync = synchronizer
|
|
synchronizer.add(this.$refs.canvas)
|
|
synchronizer.enabled = true
|
|
},
|
|
disabledAnnotationSync(synchronizer) {
|
|
this.AnnotationSync = null
|
|
synchronizer.enabled = false
|
|
synchronizer.remove(this.$refs.canvas)
|
|
this.setAllToolsPassive()
|
|
},
|
|
onContextmenu(event) {
|
|
const colormapsList = cornerstone.colors.getColormapsList()
|
|
const colorItems = []
|
|
colorItems.push({
|
|
label: '默认值',
|
|
onClick: () => {
|
|
this.setColormap()
|
|
}
|
|
})
|
|
colormapsList.forEach(colormap => {
|
|
const item = {}
|
|
item.label = colormap.name
|
|
item.onClick = () => {
|
|
this.setColormap(colormap.id)
|
|
}
|
|
colorItems.push(item)
|
|
})
|
|
this.$contextmenu({
|
|
items: [
|
|
{
|
|
label: '移动',
|
|
divided: true,
|
|
onClick: () => {
|
|
this.setToolActive('Pan')
|
|
}
|
|
},
|
|
{
|
|
label: '缩放',
|
|
divided: true,
|
|
children: [
|
|
{
|
|
label: '自由缩放',
|
|
onClick: () => {
|
|
this.setToolActive('Zoom')
|
|
}
|
|
},
|
|
{
|
|
label: '适应图像',
|
|
onClick: () => {
|
|
this.fitToWindow()
|
|
}
|
|
},
|
|
{
|
|
label: '适应窗口',
|
|
onClick: () => {
|
|
this.fitToImage()
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '透镜',
|
|
divided: true,
|
|
onClick: () => {
|
|
this.setToolActive('Magnify')
|
|
}
|
|
},
|
|
{
|
|
label: '旋转',
|
|
divided: true,
|
|
children: [
|
|
{
|
|
label: '默认值',
|
|
onClick: () => {
|
|
this.resetRotate()
|
|
}
|
|
},
|
|
{
|
|
label: '自由旋转',
|
|
onClick: () => {
|
|
this.setToolActive('Rotate')
|
|
}
|
|
},
|
|
{
|
|
label: '水平翻转',
|
|
onClick: () => {
|
|
this.setRotate(true, false, 0)
|
|
}
|
|
},
|
|
{
|
|
label: '垂直翻转',
|
|
onClick: () => {
|
|
this.setRotate(false, true, 0)
|
|
}
|
|
},
|
|
{
|
|
label: '左转90度',
|
|
onClick: () => {
|
|
this.setRotate(false, false, -90)
|
|
}
|
|
},
|
|
{
|
|
label: '右转90度',
|
|
onClick: () => {
|
|
this.setRotate(false, false, 90)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
label: '测量',
|
|
divided: true,
|
|
minWidth: 0,
|
|
children: [
|
|
{
|
|
label: '探针',
|
|
onClick: () => {
|
|
this.setToolActive('Probe')
|
|
}
|
|
},
|
|
{
|
|
label: '长度测量',
|
|
onClick: () => {
|
|
this.setToolActive('Length')
|
|
}
|
|
},
|
|
{
|
|
label: '角度测量',
|
|
onClick: () => {
|
|
this.setToolActive('Angle')
|
|
}
|
|
},
|
|
{
|
|
label: 'Cobb测量',
|
|
onClick: () => {
|
|
this.setToolActive('CobbAngle')
|
|
}
|
|
},
|
|
{
|
|
label: '椭圆测量',
|
|
onClick: () => {
|
|
this.setToolActive('EllipticalRoi')
|
|
}
|
|
},
|
|
{
|
|
label: '矩形测量',
|
|
onClick: () => {
|
|
this.setToolActive('RectangleRoi')
|
|
}
|
|
},
|
|
{
|
|
label: '多边形标记',
|
|
onClick: () => {
|
|
this.setToolActive('FreehandRoi')
|
|
}
|
|
},
|
|
{
|
|
label: '十字线',
|
|
onClick: () => {
|
|
this.setToolActive('Bidirectional')
|
|
}
|
|
},
|
|
{
|
|
label: '文字标注',
|
|
onClick: () => {
|
|
this.setToolActive('ArrowAnnotate')
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '调窗',
|
|
divided: true,
|
|
onClick: () => {
|
|
this.setToolActive('Wwwc')
|
|
}
|
|
},
|
|
{
|
|
label: '反色',
|
|
divided: true,
|
|
onClick: () => {
|
|
this.toggleInvert()
|
|
}
|
|
},
|
|
{
|
|
label: '伪彩',
|
|
children: colorItems
|
|
}
|
|
],
|
|
event,
|
|
// x: event.clientX,
|
|
// y: event.clientY,
|
|
customClass: 'class-a',
|
|
zIndex: 3,
|
|
minWidth: 100
|
|
})
|
|
return false
|
|
},
|
|
getToolSate() {
|
|
const toolROITypes = [
|
|
'Probe',
|
|
'EllipticalRoi',
|
|
'RectangleRoi',
|
|
'ArrowAnnotate',
|
|
'Length',
|
|
'CobbAngle',
|
|
'Angle',
|
|
'Bidirectional',
|
|
'FreehandRoi'
|
|
]
|
|
for (let i = 0; i < toolROITypes.length; i++) {
|
|
const toolROIType = toolROITypes[i]
|
|
const toolROIData = JSON.stringify(
|
|
cornerstoneTools.getToolState(this.canvas, toolROIType)
|
|
)
|
|
|
|
if (toolROIData !== undefined) {
|
|
this.allROIToolData[toolROITypes[i]] = JSON.parse(toolROIData)
|
|
}
|
|
}
|
|
},
|
|
clearToolState() {
|
|
ToolStateManager.clear(this.canvas)
|
|
cornerstone.updateImage(this.canvas)
|
|
},
|
|
removeLabel(item) {
|
|
const promise = scroll(this.canvas, item.data.imageIdIndex)
|
|
const scope = this
|
|
Promise.all([promise]).then(res => {
|
|
cornerstoneTools.removeToolState(scope.canvas, item.type, item.data)
|
|
cornerstone.updateImage(scope.canvas)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.info-series {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
text-align: left;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
.info-image {
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 10px;
|
|
text-align: left;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.info-subject {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 10px;
|
|
text-align: right;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
.info-instance {
|
|
position: absolute;
|
|
right: 15px;
|
|
bottom: 10px;
|
|
text-align: right;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.load-indicator {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
text-align: left;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.magnifyTool {
|
|
border: 2px solid #ffffff;
|
|
border-radius: 50%;
|
|
display: none;
|
|
cursor: none;
|
|
}
|
|
|
|
.menu__item {
|
|
display: block;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin: 10px;
|
|
cursor: default;
|
|
}
|
|
.menu__item:hover {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.menu {
|
|
height: auto;
|
|
width: auto;
|
|
position: absolute;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
border-radius: 10px;
|
|
border: 1px solid #c21111;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
li:hover {
|
|
background-color: #e0e0e2;
|
|
color: white;
|
|
}
|
|
.my_slider_box:after{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 100%;
|
|
background: #333;
|
|
}
|
|
</style>
|