gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

媒体库-优化涂鸦功能

main
滕嵩 2025-07-30 16:17:21 +08:00
parent 525a4420d6
commit d7cd5b11ce
4 changed files with 162 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/demo/system/mediaLibrary/index.vue
View File

@ -281,6 +281,7 @@
:maskClosable="false"
>
<Path
:pathDivShow="pathDivShow"
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
:floderName="floderName"
@ -306,6 +307,7 @@
<Path
v-if="pathDivShow"
:pathDivShow="pathDivShow"
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
:floderName="floderName"
@ -854,7 +856,7 @@
// 刷新
function handleSuccessPath(value) {
setTimeout(() => {
pathDivShow.value ? openPathModal(value) : showPathDiv(value);
pathDivShow.value ? showPathDiv(value) : openPathModal(value);
// openPathModal(value);
reload();
}, 500);

10
src/views/demo/system/mediaLibrary/path/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="pathModal">
<div
class="pathModal"
:style="{
height: props.pathDivShow ? '100%' : '100vh',
}"
>
<!-- 左侧目录 -->
<div
class="leftMenuDiv"
@ -51,7 +56,7 @@
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName']);
const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName', 'pathDivShow']);
const emits = defineEmits(['closePathModal', 'handleSuccessPath']);
// 地图宽度
const dynamicWidth = computed(() => {
@ -139,7 +144,6 @@
position: relative;
display: flex;
width: 100%;
height: 100%;
.leftMenuDiv {
position: relative;

144
src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
View File

@ -105,7 +105,7 @@
v-if="!hideOrShowGraffitiFlag"
style="color: #595959"
/>
<div style="position: absolute; bottom: -6px; right: -4px; pointer-events: none">
<div style="position: absolute; bottom: -12px; right: -5px; pointer-events: none">
<div
v-html="
`${
@ -769,7 +769,7 @@
function refresh() {
scale.value = 0.9;
rotationAngle.value = 0;
graffitiFlag.value = false;
// graffitiFlag.value = false;
getImageWidthAndHeight();
// 复位
const dragDocument: any = document.querySelector('.dragModal');
@ -777,6 +777,7 @@
dragDocument.style.left = 0 + 'px';
dragDocument.style.top = 0 + 'px';
}
document.body.style.cursor = 'default';
}
// 移动到中心位置
function handlerLocation() {
@ -809,6 +810,7 @@
// 选择当前展示图片-----------------------------------------------
function setNowShowImageData(value) {
emits('setNowShowImageData', value);
graffitiFlag.value = false;
refresh();
}
@ -817,6 +819,7 @@
const graffitiFlag = ref(false);
// 设置鼠标格式
function setGraffiti() {
refresh();
graffitiFlag.value = !graffitiFlag.value;
if (graffitiFlag.value) {
document.body.style.cursor = 'crosshair';
@ -960,7 +963,23 @@
// 鼠标按下
function onMouseDown(event) {
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
if (!graffitiFlag.value) {
{
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = dragDocument.offsetLeft;
initialDocumentY = dragDocument.offsetTop;
dragDocument.style.cursor = 'grabbing';
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
}
} else if (
graffitiFlag.value &&
(graffitis.value.length == 0 || !graffitis.value.some((item) => item.status != 'success'))
) {
// 涂鸦
if (nowGraffiti.value != -1) return;
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@ -980,75 +999,66 @@
status: 'edit',
});
graffitisClone.value = cloneDeep(graffitis.value);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = dragDocument.offsetLeft;
initialDocumentY = dragDocument.offsetTop;
dragDocument.style.cursor = 'grabbing';
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
window.addEventListener('mousemove', onMouseMoveGraffit);
window.addEventListener('mouseup', onMouseUpGraffit);
}
}
// 鼠标移动-涂鸦
function onMouseMoveGraffit(event) {
// 涂鸦
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
setMouseData();
}
// 鼠标松开-涂鸦
function onMouseUpGraffit(event) {
// 涂鸦
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
isDragging.value = false;
if (event.x > rect.right || event.y > rect.bottom) {
graffitis.value.splice(graffitis.value.length - 1, 1);
nowGraffiti.value = -1;
} else {
setMouseData();
nowGraffiti.value = graffitis.value.length - 1;
}
window.removeEventListener('mousemove', onMouseMoveGraffit);
window.removeEventListener('mouseup', onMouseUpGraffit);
}
// 鼠标移动
function onMouseMove(event) {
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
// 涂鸦
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
setMouseData();
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
if (isDragging.value) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
dragDocument.style.left = initialDocumentX + deltaX + 'px';
dragDocument.style.top = initialDocumentY + deltaY + 'px';
}
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
if (isDragging.value) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
dragDocument.style.left = initialDocumentX + deltaX + 'px';
dragDocument.style.top = initialDocumentY + deltaY + 'px';
}
}
// 鼠标松开
function onMouseUp(event) {
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
// 涂鸦
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
isDragging.value = false;
if (event.x > rect.right || event.y > rect.bottom) {
graffitis.value.splice(graffitis.value.length - 1, 1);
nowGraffiti.value = -1;
} else {
setMouseData();
nowGraffiti.value = graffitis.value.length - 1;
}
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
if (dragDocument) {
dragDocument.style.cursor = 'default';
}
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
if (dragDocument) {
dragDocument.style.cursor = 'default';
}
}
// 鼠标滚轮
@ -1083,10 +1093,12 @@
// 鼠标聚焦
function mouseenter(rect, type) {
if (graffitiFlag.value) {
// 鼠标聚焦状态
if (rect.status != 'edit') {
rect.status = 'mouse';
document.body.style.cursor = 'pointer';
}
// 编辑状态
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
@ -1110,10 +1122,8 @@
if (rect.status == 'mouse') {
rect.status = 'success';
}
if (graffitiFlag.value) {
if (rect.status == 'edit') {
document.body.style.cursor = 'crosshair';
} else {
document.body.style.cursor = 'pointer';
}
}
}

142
src/views/demo/system/mediaLibrary/preview/previewImage.vue
View File

@ -580,6 +580,7 @@
// 选择
function chooseNowPreviewRecord(value) {
emits('chooseNowPreviewRecord', value);
graffitiFlag.value = false;
refresh();
}
// 刷新表格
@ -656,7 +657,7 @@
function refresh() {
scale.value = 1;
rotationAngle.value = 0;
graffitiFlag.value = false;
// graffitiFlag.value = false;
getImageWidthAndHeight();
// 复位
const dragDocument: any = document.querySelector('.dragModal');
@ -664,6 +665,7 @@
dragDocument.style.left = 0 + 'px';
dragDocument.style.top = 0 + 'px';
}
document.body.style.cursor = 'default';
}
// 删除
@ -764,6 +766,7 @@
const nowMouseGraffiti = ref(0);
// 设置鼠标格式
function setGraffiti() {
refresh();
graffitiFlag.value = !graffitiFlag.value;
if (graffitiFlag.value) {
document.body.style.cursor = 'crosshair';
@ -842,7 +845,21 @@
const mouseCanvasRef = ref();
// 鼠标按下
function onMouseDown(event) {
if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
if (!graffitiFlag.value) {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = dragDocument.offsetLeft;
initialDocumentY = dragDocument.offsetTop;
dragDocument.style.cursor = 'grabbing';
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
} else if (
graffitiFlag.value &&
(graffitis.value.length == 0 || !graffitis.value?.some((item) => item.status != 'success'))
) {
// 涂鸦
if (nowGraffiti.value != -1) return;
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@ -862,74 +879,65 @@
status: 'edit',
});
graffitisClone.value = cloneDeep(graffitis.value);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = dragDocument.offsetLeft;
initialDocumentY = dragDocument.offsetTop;
dragDocument.style.cursor = 'grabbing';
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
window.addEventListener('mousemove', onMouseMoveGraffit);
window.addEventListener('mouseup', onMouseUpGraffit);
}
}
// 鼠标移动
function onMouseMove(event) {
if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
// 涂鸦
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
// 鼠标移动-涂鸦
function onMouseMoveGraffit(event) {
// 涂鸦
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
setMouseData();
}
// 鼠标松开-涂鸦
function onMouseUpGraffit(event) {
// 涂鸦
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
isDragging.value = false;
if (event.x > rect.right || event.y > rect.bottom) {
graffitis.value.splice(graffitis.value.length - 1, 1);
nowGraffiti.value = -1;
} else {
setMouseData();
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
if (isDragging.value) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
dragDocument.style.left = initialDocumentX + deltaX + 'px';
dragDocument.style.top = initialDocumentY + deltaY + 'px';
}
nowGraffiti.value = graffitis.value.length - 1;
}
window.removeEventListener('mousemove', onMouseMoveGraffit);
window.removeEventListener('mouseup', onMouseUpGraffit);
}
// 鼠标移动-拖动
function onMouseMove(event) {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
if (isDragging.value) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
dragDocument.style.left = initialDocumentX + deltaX + 'px';
dragDocument.style.top = initialDocumentY + deltaY + 'px';
}
}
// 鼠标松开
// 鼠标松开-拖动
function onMouseUp(event) {
if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
// 涂鸦
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = event.x - rect.x;
endY = event.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
isDragging.value = false;
if (event.x > rect.right || event.y > rect.bottom) {
graffitis.value.splice(graffitis.value.length - 1, 1);
nowGraffiti.value = -1;
} else {
setMouseData();
nowGraffiti.value = graffitis.value.length - 1;
}
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
if (dragDocument) {
dragDocument.style.cursor = 'default';
}
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
if (dragDocument) {
dragDocument.style.cursor = 'default';
}
}
@ -960,10 +968,12 @@
// 鼠标聚焦
function mouseenter(rect, type) {
if (graffitiFlag.value) {
// 鼠标聚焦状态
if (rect.status != 'edit') {
rect.status = 'mouse';
document.body.style.cursor = 'pointer';
}
// 编辑状态
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
@ -987,10 +997,8 @@
if (rect.status == 'mouse') {
rect.status = 'success';
}
if (graffitiFlag.value) {
if (rect.status == 'edit') {
document.body.style.cursor = 'crosshair';
} else {
document.body.style.cursor = 'pointer';
}
}
}