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

媒体库-图片展示和历史图片路径-缩略图替换完成版

main
滕嵩 2025-07-28 11:23:52 +08:00
parent a989857c26
commit 8d5dc54cd1
4 changed files with 215 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -178,9 +178,16 @@
<CloseOutlined <CloseOutlined
style="margin-right: 10px; color: red" style="margin-right: 10px; color: red"
@click=" @click="
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = ''); rect.text
? ((rect.x = graffitisClone[index].x),
(rect.y = graffitisClone[index].y),
(rect.width = graffitisClone[index].width),
(rect.height = graffitisClone[index].height),
(rect.color = graffitisClone[index].color),
(rect.text = graffitisClone[index].text),
(rect.status = 'success'))
: graffitis.splice(index, 1);
nowGraffiti = -1; nowGraffiti = -1;
rect.status = 'success';
" "
/> />
<DeleteOutlined <DeleteOutlined
@ -218,12 +225,14 @@
:style="{ :style="{
textDecoration: rect.status == 'mouse' ? 'underline' : '', textDecoration: rect.status == 'mouse' ? 'underline' : '',
}" }"
@mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''" @mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
@mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''" @mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
@click=" @click="
rect.status = 'edit'; graffitiFlag
graffitisClone = cloneDeep(graffitis); ? ((rect.status = 'edit'),
nowGraffiti = index; (graffitisClone = cloneDeep(graffitis)),
(nowGraffiti = index))
: ''
" "
> >
{{ rect.text }} {{ rect.text }}
@ -242,10 +251,7 @@
}" }"
@mouseenter="mouseenter(rect, 'top')" @mouseenter="mouseenter(rect, 'top')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'top')" @mousedown="funMouseDownEdit($event, index, 'top')"
/> />
<!-- 下 --> <!-- 下 -->
@ -261,10 +267,7 @@
}" }"
@mouseenter="mouseenter(rect, 'bottom')" @mouseenter="mouseenter(rect, 'bottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'bottom')" @mousedown="funMouseDownEdit($event, index, 'bottom')"
/> />
<!-- 右 --> <!-- 右 -->
@ -280,10 +283,7 @@
}" }"
@mouseenter="mouseenter(rect, 'right')" @mouseenter="mouseenter(rect, 'right')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'right')" @mousedown="funMouseDownEdit($event, index, 'right')"
/> />
<!-- 左 --> <!-- 左 -->
@ -299,10 +299,7 @@
}" }"
@mouseenter="mouseenter(rect, 'left')" @mouseenter="mouseenter(rect, 'left')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'left')" @mousedown="funMouseDownEdit($event, index, 'left')"
/> />
<!-- 左上 --> <!-- 左上 -->
@ -504,6 +501,7 @@
? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic ? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871' : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
" "
loading="lazy"
width="75" width="75"
height="50" height="50"
/> />
@ -692,7 +690,7 @@
const scale = ref(1); const scale = ref(1);
// 放大函数 // 放大函数
function zoomIn() { function zoomIn() {
if (scale.value < 3) { if (scale.value < 4) {
// 设置最大缩放倍数为3倍 // 设置最大缩放倍数为3倍
scale.value += 0.1; scale.value += 0.1;
} }
@ -726,8 +724,8 @@
props.nowShowImageData.width > 1040 && props.nowShowImageData.width > 1040 &&
props.nowShowImageData.height > 800 props.nowShowImageData.height > 800
) { ) {
imageHeight.value = 800; imageWidth.value = 1040;
imageWidth.value = (800 / props.nowShowImageData.height) * props.nowShowImageData.width; imageHeight.value = (1040 / props.nowShowImageData.width) * props.nowShowImageData.height;
} else { } else {
imageHeight.value = 800; imageHeight.value = 800;
imageWidth.value = 1040; imageWidth.value = 1040;
@ -741,14 +739,16 @@
if ( if (
props.nowShowImageData.width && props.nowShowImageData.width &&
props.nowShowImageData.height && props.nowShowImageData.height &&
props.nowShowImageData.width > 720 && props.nowShowImageData.width > 1040 &&
props.nowShowImageData.height > 553 props.nowShowImageData.height > 800
) { ) {
imageWidth.value = props.nowShowImageData.width; scale.value = props.nowShowImageData.width / 1040;
imageHeight.value = props.nowShowImageData.height; // imageWidth.value = props.nowShowImageData.width;
// imageHeight.value = props.nowShowImageData.height;
} else { } else {
imageWidth.value = 1440; scale.value = 2;
imageHeight.value = 1106; // imageWidth.value = 2080;
// imageHeight.value = 1600;
} }
} }
@ -796,6 +796,7 @@
// 选择当前展示图片----------------------------------------------- // 选择当前展示图片-----------------------------------------------
function setNowShowImageData(value) { function setNowShowImageData(value) {
emits('setNowShowImageData', value); emits('setNowShowImageData', value);
refresh();
} }
// 鼠标拖动or涂鸦------------------------------------------------- // 鼠标拖动or涂鸦-------------------------------------------------
@ -1032,7 +1033,9 @@
// 拖动 // 拖动
const dragDocument: any = document.querySelector('.dragModal'); const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false; isDragging.value = false;
// dragDocument.style.cursor = 'default'; if (dragDocument) {
dragDocument.style.cursor = 'default';
}
} }
} }
// 鼠标滚轮 // 鼠标滚轮
@ -1066,82 +1069,92 @@
//------------------------------------------------------------------------ //------------------------------------------------------------------------
// 鼠标聚焦 // 鼠标聚焦
function mouseenter(rect, type) { function mouseenter(rect, type) {
// if (rect.status != 'edit') { if (graffitiFlag.value) {
// rect.status = 'mouse'; if (rect.status != 'edit') {
// document.body.style.cursor = 'pointer'; rect.status = 'mouse';
// } document.body.style.cursor = 'pointer';
// if (rect.status == 'edit') { }
// if (type == 'top' || type == 'bottom') { if (rect.status == 'edit') {
// document.body.style.cursor = 'ns-resize'; if (type == 'top' || type == 'bottom') {
// } document.body.style.cursor = 'ns-resize';
// if (type == 'left' || type == 'right') { }
// document.body.style.cursor = 'ew-resize'; if (type == 'left' || type == 'right') {
// } document.body.style.cursor = 'ew-resize';
// if (type == 'leftTop' || type == 'rightBottom') { }
// document.body.style.cursor = 'nwse-resize'; if (type == 'leftTop' || type == 'rightBottom') {
// } document.body.style.cursor = 'nwse-resize';
// if (type == 'leftBottom' || type == 'rightTop') { }
// document.body.style.cursor = 'nesw-resize'; if (type == 'leftBottom' || type == 'rightTop') {
// } document.body.style.cursor = 'nesw-resize';
// } }
}
}
} }
// 鼠标离开 // 鼠标离开
function mouseleave(rect) { function mouseleave(rect) {
// if (rect.status == 'mouse' || rect.status == 'edit') { if (graffitiFlag.value) {
// if (rect.status == 'mouse') { if (rect.status == 'mouse' || rect.status == 'edit') {
// rect.status = 'success'; if (rect.status == 'mouse') {
// } rect.status = 'success';
// if (graffitiFlag.value) { }
// document.body.style.cursor = 'crosshair'; if (graffitiFlag.value) {
// } else { document.body.style.cursor = 'crosshair';
// document.body.style.cursor = 'pointer'; } else {
// } document.body.style.cursor = 'pointer';
// } }
}
}
} }
// 编辑状态下的鼠标按下 // 编辑状态下的鼠标按下
const mouseEditType = ref(''); const mouseEditType = ref('');
function funMouseDownEdit(e, index, type) { function funMouseDownEdit(e, index, type) {
// 获取相对于容器的坐标 if (graffitiFlag.value) {
// graffitisClone.value = cloneDeep(graffitis.value); // 获取相对于容器的坐标
// const rect = mouseCanvasRef.value.getBoundingClientRect(); graffitisClone.value = cloneDeep(graffitis.value);
// startX = e.x - rect.x; const rect = mouseCanvasRef.value.getBoundingClientRect();
// startY = e.y - rect.y; startX = e.x - rect.x;
// isDragging.value = true; startY = e.y - rect.y;
// nowGraffiti.value = index; isDragging.value = true;
// mouseEditType.value = type; nowGraffiti.value = index;
// window.addEventListener('mousemove', funMouseMoveEdit); mouseEditType.value = type;
// window.addEventListener('mouseup', funMouseUpEdit); window.addEventListener('mousemove', funMouseMoveEdit);
window.addEventListener('mouseup', funMouseUpEdit);
}
} }
// 编辑状态下的鼠标移动 // 编辑状态下的鼠标移动
function funMouseMoveEdit(e) { function funMouseMoveEdit(e) {
const rect = mouseCanvasRef.value.getBoundingClientRect(); if (graffitiFlag.value) {
if (!isDragging.value) return; const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = e.x - rect.x; if (!isDragging.value) return;
endY = e.y - rect.y; endX = e.x - rect.x;
if (endX < 0 && endY < 0) { endY = e.y - rect.y;
endX = startX; if (endX < 0 && endY < 0) {
endY = startY; endX = startX;
endY = startY;
}
funSetMouseDataEdit();
} }
funSetMouseDataEdit();
} }
// 编辑状态下的鼠标松开 // 编辑状态下的鼠标松开
function funMouseUpEdit(e) { function funMouseUpEdit(e) {
if (!isDragging.value) return; if (graffitiFlag.value) {
const rect = mouseCanvasRef.value.getBoundingClientRect(); if (!isDragging.value) return;
endX = e.x - rect.x; const rect = mouseCanvasRef.value.getBoundingClientRect();
endY = e.y - rect.y; endX = e.x - rect.x;
if (endX < 0 && endY < 0) { endY = e.y - rect.y;
endX = startX; if (endX < 0 && endY < 0) {
endY = startY; endX = startX;
endY = startY;
}
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
} }
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
} }
// 编辑状态下的数据 // 编辑状态下的数据
function funSetMouseDataEdit() { function funSetMouseDataEdit() {

13
src/views/demo/system/mediaLibrary/path/pathMap.vue
View File

@ -373,12 +373,12 @@
if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) { if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
const image = new Image(); const image = new Image();
image.crossOrigin = 'Anonymous'; image.crossOrigin = 'Anonymous';
// if (item.minipic) { if (item.minipic) {
// image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic; image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
// } else { } else {
image.src = image.src =
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'; 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
// } }
image.onload = () => { image.onload = () => {
// 创建Canvas元素 // 创建Canvas元素
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
@ -402,7 +402,6 @@
ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1); // 调整坐标和尺寸以适应边框宽度 ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1); // 调整坐标和尺寸以适应边框宽度
// 将Canvas内容转换为图片的数据URL // 将Canvas内容转换为图片的数据URL
const dataURL2 = canvas.toDataURL('image/png'); const dataURL2 = canvas.toDataURL('image/png');
// 位置 // 位置
let position = [ let position = [
parseFloat(item.lng), parseFloat(item.lng),

13
src/views/demo/system/mediaLibrary/preview/Map.vue
View File

@ -319,13 +319,12 @@
if (item.lng && item.lat && item.absoluteAltitude) { if (item.lng && item.lat && item.absoluteAltitude) {
const image = new Image(); const image = new Image();
image.crossOrigin = 'Anonymous'; image.crossOrigin = 'Anonymous';
// if (item.minipic) { if (item.minipic) {
// image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic; image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
// } else { } else {
image.src = image.src =
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'; 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
// } }
image.onload = () => { image.onload = () => {
// 创建Canvas元素 // 创建Canvas元素
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');

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

@ -64,9 +64,16 @@
<CloseOutlined <CloseOutlined
style="margin-right: 10px; padding: 3px; color: red" style="margin-right: 10px; padding: 3px; color: red"
@click=" @click="
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = ''); rect.text
? ((rect.x = graffitisClone[index].x),
(rect.y = graffitisClone[index].y),
(rect.width = graffitisClone[index].width),
(rect.height = graffitisClone[index].height),
(rect.color = graffitisClone[index].color),
(rect.text = graffitisClone[index].text),
(rect.status = 'success'))
: graffitis.splice(index, 1);
nowGraffiti = -1; nowGraffiti = -1;
rect.status = 'success';
" "
/> />
<DeleteOutlined <DeleteOutlined
@ -107,12 +114,14 @@
:style="{ :style="{
textDecoration: rect.status == 'mouse' ? 'underline' : '', textDecoration: rect.status == 'mouse' ? 'underline' : '',
}" }"
@mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''" @mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
@mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''" @mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
@click=" @click="
rect.status = 'edit'; graffitiFlag
graffitisClone = cloneDeep(graffitis); ? ((rect.status = 'edit'),
nowGraffiti = index; (graffitisClone = cloneDeep(graffitis)),
(nowGraffiti = index))
: ''
" "
> >
{{ rect.text }} {{ rect.text }}
@ -131,10 +140,7 @@
}" }"
@mouseenter="mouseenter(rect, 'top')" @mouseenter="mouseenter(rect, 'top')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'top')" @mousedown="funMouseDownEdit($event, index, 'top')"
/> />
<!-- 下 --> <!-- 下 -->
@ -150,10 +156,7 @@
}" }"
@mouseenter="mouseenter(rect, 'bottom')" @mouseenter="mouseenter(rect, 'bottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'bottom')" @mousedown="funMouseDownEdit($event, index, 'bottom')"
/> />
<!-- 右 --> <!-- 右 -->
@ -169,10 +172,7 @@
}" }"
@mouseenter="mouseenter(rect, 'right')" @mouseenter="mouseenter(rect, 'right')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'right')" @mousedown="funMouseDownEdit($event, index, 'right')"
/> />
<!-- 左 --> <!-- 左 -->
@ -188,10 +188,7 @@
}" }"
@mouseenter="mouseenter(rect, 'left')" @mouseenter="mouseenter(rect, 'left')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click=" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
rect.status = 'edit';
nowGraffiti = index;
"
@mousedown="funMouseDownEdit($event, index, 'left')" @mousedown="funMouseDownEdit($event, index, 'left')"
/> />
<!-- 左上 --> <!-- 左上 -->
@ -582,7 +579,7 @@
const scale = ref(1); const scale = ref(1);
// 放大函数 // 放大函数
function zoomIn() { function zoomIn() {
if (scale.value < 3) { if (scale.value < 4) {
scale.value += 0.1; scale.value += 0.1;
} }
} }
@ -634,11 +631,13 @@
props.nowPreviewRecord.width > 1040 && props.nowPreviewRecord.width > 1040 &&
props.nowPreviewRecord.height > 800 props.nowPreviewRecord.height > 800
) { ) {
imageWidth.value = props.nowPreviewRecord.width; scale.value = props.nowPreviewRecord.height / 800;
imageHeight.value = props.nowPreviewRecord.height; // imageWidth.value = props.nowPreviewRecord.width;
// imageHeight.value = props.nowPreviewRecord.height;
} else { } else {
imageWidth.value = 2080; scale.value = 2;
imageHeight.value = 1600; // imageWidth.value = 2080;
// imageHeight.value = 1600;
} }
} }
@ -917,7 +916,9 @@
// 拖动 // 拖动
const dragDocument: any = document.querySelector('.dragModal'); const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false; isDragging.value = false;
dragDocument.style.cursor = 'default'; if (dragDocument) {
dragDocument.style.cursor = 'default';
}
} }
} }
@ -947,82 +948,92 @@
//------------------------------------------------------------------------ //------------------------------------------------------------------------
// 鼠标聚焦 // 鼠标聚焦
function mouseenter(rect, type) { function mouseenter(rect, type) {
if (rect.status != 'edit') { if (graffitiFlag.value) {
rect.status = 'mouse'; if (rect.status != 'edit') {
document.body.style.cursor = 'pointer'; rect.status = 'mouse';
} document.body.style.cursor = 'pointer';
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
} }
if (type == 'left' || type == 'right') { if (rect.status == 'edit') {
document.body.style.cursor = 'ew-resize'; if (type == 'top' || type == 'bottom') {
} document.body.style.cursor = 'ns-resize';
if (type == 'leftTop' || type == 'rightBottom') { }
document.body.style.cursor = 'nwse-resize'; if (type == 'left' || type == 'right') {
} document.body.style.cursor = 'ew-resize';
if (type == 'leftBottom' || type == 'rightTop') { }
document.body.style.cursor = 'nesw-resize'; if (type == 'leftTop' || type == 'rightBottom') {
document.body.style.cursor = 'nwse-resize';
}
if (type == 'leftBottom' || type == 'rightTop') {
document.body.style.cursor = 'nesw-resize';
}
} }
} }
} }
// 鼠标离开 // 鼠标离开
function mouseleave(rect) { function mouseleave(rect) {
if (rect.status == 'mouse' || rect.status == 'edit') { if (graffitiFlag.value) {
if (rect.status == 'mouse') { if (rect.status == 'mouse' || rect.status == 'edit') {
rect.status = 'success'; if (rect.status == 'mouse') {
} rect.status = 'success';
if (graffitiFlag.value) { }
document.body.style.cursor = 'crosshair'; if (graffitiFlag.value) {
} else { document.body.style.cursor = 'crosshair';
document.body.style.cursor = 'pointer'; } else {
document.body.style.cursor = 'pointer';
}
} }
} }
} }
// 编辑状态下的鼠标按下 // 编辑状态下的鼠标按下
const mouseEditType = ref(''); const mouseEditType = ref('');
function funMouseDownEdit(e, index, type) { function funMouseDownEdit(e, index, type) {
// 获取相对于容器的坐标 if (graffitiFlag.value) {
// graffitisClone.value = cloneDeep(graffitis.value); // 获取相对于容器的坐标
// const rect = mouseCanvasRef.value.getBoundingClientRect(); graffitisClone.value = cloneDeep(graffitis.value);
// startX = e.x - rect.x; const rect = mouseCanvasRef.value.getBoundingClientRect();
// startY = e.y - rect.y; startX = e.x - rect.x;
// isDragging.value = true; startY = e.y - rect.y;
// nowGraffiti.value = index; isDragging.value = true;
// mouseEditType.value = type; nowGraffiti.value = index;
// window.addEventListener('mousemove', funMouseMoveEdit); mouseEditType.value = type;
// window.addEventListener('mouseup', funMouseUpEdit); window.addEventListener('mousemove', funMouseMoveEdit);
window.addEventListener('mouseup', funMouseUpEdit);
}
} }
// 编辑状态下的鼠标移动 // 编辑状态下的鼠标移动
function funMouseMoveEdit(e) { function funMouseMoveEdit(e) {
const rect = mouseCanvasRef.value.getBoundingClientRect(); if (graffitiFlag.value) {
if (!isDragging.value) return; const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = e.x - rect.x; if (!isDragging.value) return;
endY = e.y - rect.y; endX = e.x - rect.x;
if (endX < 0 && endY < 0) { endY = e.y - rect.y;
endX = startX; if (endX < 0 && endY < 0) {
endY = startY; endX = startX;
endY = startY;
}
funSetMouseDataEdit();
} }
funSetMouseDataEdit();
} }
// 编辑状态下的鼠标松开 // 编辑状态下的鼠标松开
function funMouseUpEdit(e) { function funMouseUpEdit(e) {
if (!isDragging.value) return; if (graffitiFlag.value) {
const rect = mouseCanvasRef.value.getBoundingClientRect(); if (!isDragging.value) return;
endX = e.x - rect.x; const rect = mouseCanvasRef.value.getBoundingClientRect();
endY = e.y - rect.y; endX = e.x - rect.x;
if (endX < 0 && endY < 0) { endY = e.y - rect.y;
endX = startX; if (endX < 0 && endY < 0) {
endY = startY; endX = startX;
endY = startY;
}
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
} }
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
} }
// 编辑状态下的数据 // 编辑状态下的数据
function funSetMouseDataEdit() { function funSetMouseDataEdit() {