修复放大功能
This commit is contained in:
parent
31c40d68f6
commit
11ba37fc4c
@ -146,7 +146,7 @@
|
||||
</el-button>
|
||||
<span style="font-size: 15px; margin-bottom: 10px">测量</span>
|
||||
|
||||
<!-- <el-button
|
||||
<el-button
|
||||
style="width: 30px; height: 30px; margin-bottom: 10px"
|
||||
type="primary"
|
||||
plain
|
||||
@ -154,7 +154,7 @@
|
||||
>
|
||||
<el-icon><ZoomIn /></el-icon>
|
||||
</el-button>
|
||||
<span style="font-size: 15px; margin-bottom: 10px">放大</span> -->
|
||||
<span style="font-size: 15px; margin-bottom: 10px">放大</span>
|
||||
|
||||
<el-button
|
||||
style="width: 30px; height: 30px; margin-bottom: 10px"
|
||||
@ -582,6 +582,7 @@ import ECGCopmareDialog from '@/views/ECG/ECGCompare.vue'
|
||||
import ECGApplyforRepair from '@/views/ECG/ECGModify/ECGApplyforRepair.vue'
|
||||
import useClipboard from "vue-clipboard3";//复制组件
|
||||
const { toClipboard } = useClipboard();
|
||||
import ECGSB from '@/views/ECG/ECGSB.vue'
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -965,7 +966,7 @@ function FD() {
|
||||
const value = IsFD.value === false ? true : false
|
||||
IsFD.value = value
|
||||
if (value) {
|
||||
message.alertSuccess('开启放大')
|
||||
message.alertSuccess('开启放大')
|
||||
} else {
|
||||
message.alertSuccess('关闭放大')
|
||||
}
|
||||
|
||||
@ -1,121 +1,174 @@
|
||||
<template>
|
||||
<div class="magnifier" v-show="isShow">
|
||||
<!-- 只保留放大的内容 -->
|
||||
<div
|
||||
v-if="isZoomed"
|
||||
class="magnifier-glass"
|
||||
:style="{
|
||||
left: zoomedPosition.x + 'px',
|
||||
top: zoomedPosition.y + 'px',
|
||||
backgroundImage: screenshotUrl ? `url(${screenshotUrl})` : 'none',
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
width: '250px',
|
||||
height: '250px'
|
||||
transform: `translate(-50%, -50%) scale(1)`,
|
||||
width: '300px',
|
||||
height: '200px',
|
||||
backgroundColor: 'white'
|
||||
}"
|
||||
></div>
|
||||
>
|
||||
<canvas ref="magnifierCanvas" width="300" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import html2canvas from 'html2canvas'
|
||||
import ECGForm from './ECGForm.vue'
|
||||
|
||||
const isShow = ref(true)
|
||||
const isZoomed = ref(false)
|
||||
const screenshotUrl = ref('')
|
||||
const magnifierCanvas = ref(null)
|
||||
const zoomLevel = 1.8
|
||||
|
||||
const zoomedPosition = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
|
||||
// 捕获指定区域的内容
|
||||
async function captureArea(x, y) {
|
||||
try {
|
||||
const container = document.querySelector('.el-tab-pane')
|
||||
if (!container) return
|
||||
const captureSize = 50
|
||||
const rect = container.getBoundingClientRect()
|
||||
const left = x - captureSize / 2
|
||||
const top = y - captureSize / 2
|
||||
|
||||
const canvas = await html2canvas(document.body, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
scale: 3, //截图清晰度
|
||||
x: left - rect.left, // 相对于容器的坐标
|
||||
y: top - rect.top, // 相对于容器的坐标
|
||||
width: captureSize,
|
||||
height: captureSize,
|
||||
backgroundColor: null
|
||||
})
|
||||
|
||||
screenshotUrl.value = canvas.toDataURL('image/jpeg', 0.5)
|
||||
isZoomed.value = true
|
||||
zoomedPosition.x = x
|
||||
zoomedPosition.y = y
|
||||
} catch (error) {
|
||||
console.error('截图失败:', error)
|
||||
// 绘制放大区域
|
||||
function drawMagnifiedArea(x, y, container) {
|
||||
if (!magnifierCanvas.value) return
|
||||
|
||||
const ctx = magnifierCanvas.value.getContext('2d', { willReadFrequently: true })
|
||||
const container1 = document.querySelector('#canvas-container')
|
||||
const container2 = document.querySelector('#canvas-container1')
|
||||
const rect1 = container1.getBoundingClientRect()
|
||||
const rect2 = container2.getBoundingClientRect()
|
||||
|
||||
// 计算过渡区域
|
||||
const transitionZone = 20 // 过渡区域宽度（像素）
|
||||
const isInTransition = Math.abs(x - rect2.left) < transitionZone
|
||||
|
||||
ctx.clearRect(0, 0, 300, 200)
|
||||
ctx.imageSmoothingEnabled = true
|
||||
ctx.imageSmoothingQuality = 'high'
|
||||
|
||||
if (isInTransition) {
|
||||
// 在过渡区域，混合两个容器的内容
|
||||
const weight2 = (x - (rect2.left - transitionZone)) / (transitionZone * 2)
|
||||
const weight1 = 1 - weight2
|
||||
|
||||
// 绘制第一个容器的内容
|
||||
drawContainerContent(ctx, container1, x, y, rect1, weight1)
|
||||
// 绘制第二个容器的内容
|
||||
drawContainerContent(ctx, container2, x, y, rect2, weight2)
|
||||
} else {
|
||||
// 在非过渡区域，只绘制当前容器的内容
|
||||
const currentContainer = x < rect2.left ? container1 : container2
|
||||
const currentRect = x < rect2.left ? rect1 : rect2
|
||||
drawContainerContent(ctx, currentContainer, x, y, currentRect, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 新增：绘制单个容器内容的辅助函数
|
||||
function drawContainerContent(ctx, container, x, y, rect, alpha) {
|
||||
if (alpha === 0) return
|
||||
|
||||
ctx.globalAlpha = alpha
|
||||
const layers = [
|
||||
container.querySelector('#bottomCanvas, #bottomCanvas1'),
|
||||
container.querySelector('#leftCanvas, #rightCanvas'),
|
||||
container.querySelector('#topCanvas, #topCanvas1')
|
||||
].filter(canvas => canvas)
|
||||
|
||||
layers.forEach(canvas => {
|
||||
const canvasRect = canvas.getBoundingClientRect()
|
||||
const canvasX = x - canvasRect.left
|
||||
const canvasY = y - canvasRect.top
|
||||
|
||||
ctx.drawImage(
|
||||
canvas,
|
||||
canvasX - 75,
|
||||
canvasY - 50,
|
||||
150,
|
||||
100,
|
||||
0,
|
||||
0,
|
||||
300,
|
||||
200
|
||||
)
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
|
||||
// 处理鼠标移动
|
||||
function handleMouseMove(e) {
|
||||
if (!isZoomed.value) return
|
||||
|
||||
const container1 = document.querySelector('#canvas-container')
|
||||
const container2 = document.querySelector('#canvas-container1')
|
||||
|
||||
const rect1 = container1.getBoundingClientRect()
|
||||
const rect2 = container2.getBoundingClientRect()
|
||||
|
||||
// 检查鼠标是否在任一容器内
|
||||
const isInContainer1 = e.clientX >= rect1.left && e.clientX <= rect1.right &&
|
||||
e.clientY >= rect1.top && e.clientY <= rect1.bottom
|
||||
const isInContainer2 = e.clientX >= rect2.left && e.clientX <= rect2.right &&
|
||||
e.clientY >= rect2.top && e.clientY <= rect2.bottom
|
||||
|
||||
if (!isInContainer1 && !isInContainer2) {
|
||||
isZoomed.value = false
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
return
|
||||
}
|
||||
|
||||
zoomedPosition.x = e.clientX
|
||||
zoomedPosition.y = e.clientY
|
||||
|
||||
// 简单判断使用哪个容器，不再考虑过渡区域
|
||||
const currentContainer = e.clientX < rect2.left ? container1 : container2
|
||||
drawMagnifiedArea(e.clientX, e.clientY, currentContainer)
|
||||
}
|
||||
|
||||
// 处理鼠标点击
|
||||
function handleMouseDown(e) {
|
||||
if (e.button === 0) {
|
||||
// 左键点击
|
||||
if (isZoomed.value) {
|
||||
// 如果已经放大，则清除
|
||||
isZoomed.value = false
|
||||
screenshotUrl.value = ''
|
||||
} else {
|
||||
// 如果未放大，则进行截图
|
||||
captureArea(e.clientX, e.clientY)
|
||||
}
|
||||
const container = e.target.closest('#canvas-container, #canvas-container1')
|
||||
if (!container || e.button !== 0) return
|
||||
|
||||
const rect = container.getBoundingClientRect()
|
||||
const isInContainer = e.clientX >= rect.left && e.clientX <= rect.right &&
|
||||
e.clientY >= rect.top && e.clientY <= rect.bottom
|
||||
|
||||
if (!isInContainer) return
|
||||
|
||||
if (isZoomed.value) {
|
||||
isZoomed.value = false
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
} else {
|
||||
isZoomed.value = true
|
||||
zoomedPosition.x = e.clientX
|
||||
zoomedPosition.y = e.clientY
|
||||
drawMagnifiedArea(e.clientX, e.clientY, container)
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
}
|
||||
}
|
||||
|
||||
// function handleKeyPress(e) {
|
||||
// if (e.key === 'Escape') {
|
||||
// isShow.value = !isShow.value
|
||||
// isZoomed.value = false
|
||||
// screenshotUrl.value = ''
|
||||
|
||||
// if (isShow.value) {
|
||||
// document.addEventListener('mousedown', handleMouseDown)
|
||||
// } else {
|
||||
// document.removeEventListener('mousedown', handleMouseDown)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
// document.addEventListener('keydown', handleKeyPress)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
//document.removeEventListener('keydown', handleKeyPress)
|
||||
// document.removeEventListener('mousedown', handleMouseDown)
|
||||
})
|
||||
|
||||
nextTick(() => {
|
||||
|
||||
|
||||
});
|
||||
const infoParams = defineProps({
|
||||
Isfd: Boolean
|
||||
})
|
||||
// 修改 watch，监听 props.isFD
|
||||
|
||||
watch([() => infoParams.Isfd], ([newfd], [oldds]) => {
|
||||
if (newfd !== oldds) {
|
||||
console.log(newfd)
|
||||
if (newfd) {
|
||||
document.addEventListener('mousedown', handleMouseDown)
|
||||
} else {
|
||||
document.removeEventListener('mousedown', handleMouseDown)
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
isZoomed.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', handleMouseDown)
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -131,12 +184,14 @@ watch([() => infoParams.Isfd], ([newfd], [oldds]) => {
|
||||
|
||||
.magnifier-glass {
|
||||
position: fixed;
|
||||
border: 2px solid rgba(255, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid rgba(255, 0, 0, 0.5);
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s ease-out;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
transform: scale(1.8);
|
||||
transform-origin: center center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -126,7 +126,6 @@ function handleMouseDown(event, type) {
|
||||
const y = event.clientY - rect.top
|
||||
|
||||
if (lastPoint.value) {
|
||||
// 如果已经有一个点被记录，那么使用这个新点和上一个点绘制线条
|
||||
drawLineAndDistance(lastPoint.value, { x, y })
|
||||
lastPoint.value = null // 重置上一个点
|
||||
} else {
|
||||
@ -451,7 +450,7 @@ const lead_name = ['I', 'II', 'III', 'aVR', 'aVL', 'aVF']
|
||||
|
||||
const rlead_name = ['V1', 'V2', 'V3', 'V4', 'V5', 'V6']
|
||||
|
||||
//将读取到的文件转换成数组
|
||||
//将读取到的文<EFBFBD><EFBFBD><EFBFBD>转换成数组
|
||||
function handleFileChange() {
|
||||
const json = JSON.parse(text.value)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user