基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom

先看效果

实现seriesItem拖拽至displayer显示第一张

1.在seriesItem添加拖拽事件,

seriesItem代码添加@dragstart="onDragStart"

<div:class="thumbClass"draggable="true"@dragstart="onDragStart"@click="onClick">...原有的代码</div>

 methods: {onDragStart(e) {e.dataTransfer.setData("seriesInsUid", this.$props.series.seriesInsUid);e.dataTransfer.effectAllowed = "copy"; // 允许拖拽操作}}

2.在displayer.vue接受

<script>
import { vec3 } from "gl-matrix";
import {RenderingEngine,getRenderingEngine,Enums,utilities as csUtils,
} from "@cornerstonejs/core";
const { IMAGE_RENDERED, CAMERA_MODIFIED } = Enums.Events;import { toolGroup } from "@/utils/initTools";import { utilities } from "@cornerstonejs/tools";
const { getOrientationStringLPS, invertOrientationStringLPS } =utilities.orientation;
export default {name: "displayer",props: {pos: {type: Number,required: true,},},data() {return {IsSel: false,IsHover: false,state: {series: null,image: null,imageIds: [],isSeries: false,viewport: null,renderingEngine: null,},renderingEngineId: "displayerRenderingEngine",imageIndex: 0,};},computed: {borderClass() {let s = "selected";if (this.IsSel) {s = "selected";} else {if (this.IsHover) {s = "hovered";} else {s = "unselect";}}return s;},viewportId() {return `DISP_STACK_${this.$props.pos}`;},},methods: {async dragDrop(e) {const seriesInsUid = e.dataTransfer.getData("seriesInsUid");const series = await this.$store.dispatch('archiveStore/FindSeries', seriesInsUid)if (series) {this.load(series, 0, true);}},load(series, idx, isSeries) {if (!series) return;this.state.image = series.GetImageByIndex(idx);if (!this.state.image) return;this.state.series = series;this.state.isSeries = isSeries;if (isSeries) {this.state.imageIds = series.GetImageIds();} else {const imageId = this.state.image.imageId;this.state.imageIds.push(imageId);}this.state.viewport.setStack(this.state.imageIds);this.state.viewport.render();},init() {const ViewportType = Enums.ViewportType;const viewportInput = {viewportId: this.viewportId,type: ViewportType.STACK,element: this.$refs.displayer,defaultOptions: {background: [0, 0, 0],},};this.state.renderingEngine = getRenderingEngine(this.renderingEngineId);if (!this.state.renderingEngine) {this.state.renderingEngine = new RenderingEngine(this.renderingEngineId);}this.state.renderingEngine.enableElement(viewportInput);this.state.viewport = this.state.renderingEngine.getViewport(this.viewportId);toolGroup.addViewport(this.viewportId, this.renderingEngineId);},onMouseUp(e) {this.IsSel = true;this.$emit("selected", { pos: this.$props.pos });e.preventDefault();},onMouseOver(e) {this.IsHover = true;e.preventDefault();},onMouseOut(e) {this.IsHover = false;e.preventDefault();},handlerClick(e) {this.IsSel = true;this.imageIndex = this.state.viewport.getCurrentImageIdIndex();this.$emit("selected", { pos: props.pos });e.preventDefault();},},mounted() {this.init();// 阻止右键菜单this.$refs.displayer.addEventListener("contextmenu", (e) => {e.preventDefault();});},
};
</script><template><divclass="displaybox":class="borderClass"@drop.prevent="dragDrop($event)"@dragover.prevent@onMouseUp="onMouseUp"@mouseover="onMouseOver"@mouseout="onMouseOut"@click="handlerClick"><div class="displayer" ref="displayer"></div></div>
</template>
<style lang="scss" scoped>
.displaybox {position: relative;display: flex;flex-direction: row;background-color: black;.scroll-right {width: 20px;}
}
.displayer {flex: 1;text-align: left;cursor: default;user-select: none;$font-size: 14px;@mixin orient($text-align: left) {position: absolute;color: white;font-size: $font-size;text-align: $text-align;z-index: 10;}.orient_top {@include orient(center);top: 2px;left: calc(50% - 30px);width: 60px;}.orient_bottom {@include orient(center);bottom: 2px;left: calc(50% - 30px);width: 60px;}.orient_left {@include orient();top: calc(50% - 20px);left: 2px;}.orient_right {@include orient();top: calc(50% - 20px);right: 2px;}
}.selected {border: 1px solid red;
}
.hovered {border: 1px dashed yellow;
}
.unselect {border: 1px solid #fff;
}
</style>