|
|
|
|
@ -7,14 +7,14 @@
|
|
|
|
|
ref="mouseCanvasRef_1"
|
|
|
|
|
class="dragModal_1"
|
|
|
|
|
@wheel="onWheel"
|
|
|
|
|
@mousedown="onMouseDown($event, '1')"
|
|
|
|
|
@mousedown="onMouseDown($event, 1)"
|
|
|
|
|
:style="{
|
|
|
|
|
position: 'relative',
|
|
|
|
|
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
|
|
|
|
transition: 'transform 0.2s',
|
|
|
|
|
width: `100%`,
|
|
|
|
|
height: `100%`,
|
|
|
|
|
background: `url(${nowImageGroup?.url1}) no-repeat center center`,
|
|
|
|
|
background: `url(${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + nowImageGroup?.url1}) no-repeat center center`,
|
|
|
|
|
backgroundSize: 'contain',
|
|
|
|
|
backgroundPosition: 'center',
|
|
|
|
|
}"
|
|
|
|
|
@ -34,7 +34,7 @@
|
|
|
|
|
>
|
|
|
|
|
<!-- 文字标签 -->
|
|
|
|
|
<div
|
|
|
|
|
v-if="nowGraffiti == index || rect.text"
|
|
|
|
|
v-if="nowGraffiti == index || (rect.text && rect.type == 'hand')"
|
|
|
|
|
:style="{
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
left: '0px',
|
|
|
|
|
@ -128,6 +128,20 @@
|
|
|
|
|
{{ rect.text }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
v-if="rect.text && rect.type == 'ai'"
|
|
|
|
|
:style="{
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
left: '0px',
|
|
|
|
|
top: '-20px',
|
|
|
|
|
width: '50px',
|
|
|
|
|
height: 30 + 'px',
|
|
|
|
|
background: '#ffffff00',
|
|
|
|
|
color: rect.color,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
{{ rect.text }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 上 -->
|
|
|
|
|
<div
|
|
|
|
|
:style="{
|
|
|
|
|
@ -136,13 +150,13 @@
|
|
|
|
|
top: '0px',
|
|
|
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
|
|
|
height: '4px',
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'top')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'top')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'top', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 下 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -152,13 +166,13 @@
|
|
|
|
|
bottom: `0px`,
|
|
|
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
|
|
|
height: '4px',
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'bottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -168,13 +182,13 @@
|
|
|
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
|
|
|
width: '4px',
|
|
|
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'right')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'right')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'right', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -184,13 +198,13 @@
|
|
|
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
|
|
|
width: '4px',
|
|
|
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'left')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'left')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'left', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左上 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -205,7 +219,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'leftTop')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftTop')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftTop', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右下 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -220,7 +234,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'rightBottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右上 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -235,7 +249,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'rightTop')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightTop')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightTop', 1)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左下 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -250,7 +264,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'leftBottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom', 1)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -262,14 +276,14 @@
|
|
|
|
|
ref="mouseCanvasRef_2"
|
|
|
|
|
class="dragModal_2"
|
|
|
|
|
@wheel="onWheel"
|
|
|
|
|
@mousedown="onMouseDown($event, '2')"
|
|
|
|
|
@mousedown="onMouseDown($event, 2)"
|
|
|
|
|
:style="{
|
|
|
|
|
position: 'relative',
|
|
|
|
|
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
|
|
|
|
transition: 'transform 0.2s',
|
|
|
|
|
width: `100%`,
|
|
|
|
|
height: `100%`,
|
|
|
|
|
background: `url(${nowImageGroup?.url2}) no-repeat center center`,
|
|
|
|
|
background: `url(${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + nowImageGroup?.url2}) no-repeat center center`,
|
|
|
|
|
backgroundSize: 'contain',
|
|
|
|
|
backgroundPosition: 'center',
|
|
|
|
|
}"
|
|
|
|
|
@ -391,13 +405,13 @@
|
|
|
|
|
top: '0px',
|
|
|
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
|
|
|
height: '4px',
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'top')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'top')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'top', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 下 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -407,13 +421,13 @@
|
|
|
|
|
bottom: `0px`,
|
|
|
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
|
|
|
height: '4px',
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'bottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -423,13 +437,13 @@
|
|
|
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
|
|
|
width: '4px',
|
|
|
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'right')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'right')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'right', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -439,13 +453,13 @@
|
|
|
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
|
|
|
width: '4px',
|
|
|
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
|
|
|
background: `${rect.color}`,
|
|
|
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
|
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'left')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'left')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'left', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左上 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -460,7 +474,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'leftTop')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftTop')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftTop', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右下 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -475,7 +489,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'rightBottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右上 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -490,7 +504,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'rightTop')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightTop')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'rightTop', 2)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左下 -->
|
|
|
|
|
<div
|
|
|
|
|
@ -505,7 +519,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'leftBottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom')"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom', 2)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -521,10 +535,20 @@
|
|
|
|
|
<LeftOutlined @click="clickLeftOrRightButton('left')" />
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button">
|
|
|
|
|
{{ nowImageGroupIndex }}
|
|
|
|
|
<div :class="inputFlag ? 'buttonInput' : 'button'">
|
|
|
|
|
<span v-if="!inputFlag" style="width: 100px" @click="focusInput">
|
|
|
|
|
{{ nowImageGroupIndex }}
|
|
|
|
|
</span>
|
|
|
|
|
<a-input
|
|
|
|
|
ref="inputRef"
|
|
|
|
|
v-if="inputFlag"
|
|
|
|
|
v-model:value="nowImageGroupIndex"
|
|
|
|
|
style="width: 46px"
|
|
|
|
|
@blur="blurInput"
|
|
|
|
|
@keypress.enter="blurInput"
|
|
|
|
|
/>
|
|
|
|
|
/
|
|
|
|
|
{{ nowRecord.imageGroup.length }}
|
|
|
|
|
{{ props.nowRecord.imageGroup.length }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 下一个 -->
|
|
|
|
|
<div class="button">
|
|
|
|
|
@ -581,36 +605,24 @@
|
|
|
|
|
<RedoOutlined @click="refresh" />
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 锁定 -->
|
|
|
|
|
<div class="button">
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>锁定</span>
|
|
|
|
|
</template>
|
|
|
|
|
<LockOutlined @click="lockOut" />
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 解锁 -->
|
|
|
|
|
<div class="button">
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>解锁</span>
|
|
|
|
|
</template>
|
|
|
|
|
<UnlockOutlined @click="unlockOut" />
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="color: gray; margin-left: 5px; margin-right: 5px">|</span>
|
|
|
|
|
<span style="color: gray; margin-left: 5px; margin-right: 5px" v-if="props.isEdit">|</span>
|
|
|
|
|
<!-- 涂鸦标记 -->
|
|
|
|
|
<div class="button">
|
|
|
|
|
<div class="button" v-if="props.isEdit">
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>涂鸦标记</span>
|
|
|
|
|
<span> {{ graffitiFlag ? '关闭手动涂鸦标记' : '开启手动涂鸦标记' }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<EditOutlined @click="setGraffiti" />
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 退出涂鸦 -->
|
|
|
|
|
<div class="escTip" v-if="graffitiFlag">
|
|
|
|
|
<div class="whiteEsc">Esc</div>
|
|
|
|
|
<div class="blackTip">退出涂鸦</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
@ -624,8 +636,6 @@
|
|
|
|
|
EditOutlined,
|
|
|
|
|
FontColorsOutlined,
|
|
|
|
|
RedoOutlined,
|
|
|
|
|
LockOutlined,
|
|
|
|
|
UnlockOutlined,
|
|
|
|
|
CloseOutlined,
|
|
|
|
|
ExportOutlined,
|
|
|
|
|
DownloadOutlined,
|
|
|
|
|
@ -638,11 +648,40 @@
|
|
|
|
|
ExpandOutlined,
|
|
|
|
|
CompressOutlined,
|
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
|
import { ref, watch, onMounted, computed } from 'vue';
|
|
|
|
|
import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
|
|
|
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
|
|
|
const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
|
|
|
|
|
|
|
|
|
|
const props = defineProps(['recordList', 'nowRecord']);
|
|
|
|
|
const emit = defineEmits(['']);
|
|
|
|
|
const props = defineProps(['recordList', 'nowRecord', 'groupIndex', 'isEdit', 'graffitiColor']);
|
|
|
|
|
const emits = defineEmits(['chooseNowImageGroup']);
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => props.isEdit,
|
|
|
|
|
() => {
|
|
|
|
|
if (!props.isEdit) {
|
|
|
|
|
refresh();
|
|
|
|
|
graffitiFlag.value = false;
|
|
|
|
|
document.body.style.cursor = 'pointer';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
watch(
|
|
|
|
|
() => props.groupIndex,
|
|
|
|
|
() => {
|
|
|
|
|
refresh();
|
|
|
|
|
nowImageGroupIndex.value = props.groupIndex;
|
|
|
|
|
nowImageGroup.value = props.nowRecord.imageGroup[props.groupIndex - 1];
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
watch(
|
|
|
|
|
() => props.graffitiColor,
|
|
|
|
|
() => {},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
function chooseNowImageGroup(index) {
|
|
|
|
|
emits('chooseNowImageGroup', index);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 当前图片组-----------------------------------
|
|
|
|
|
const nowImageGroup: any = ref();
|
|
|
|
|
@ -657,20 +696,25 @@
|
|
|
|
|
if (direction == 'left') {
|
|
|
|
|
if (index == 0) {
|
|
|
|
|
nowImageGroup.value = imageGroupList[imageGroupList.length - 1];
|
|
|
|
|
chooseNowImageGroup(imageGroupList.length);
|
|
|
|
|
} else {
|
|
|
|
|
nowImageGroup.value = imageGroupList[index - 1];
|
|
|
|
|
chooseNowImageGroup(index);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (direction == 'right') {
|
|
|
|
|
if (index == imageGroupList.length - 1) {
|
|
|
|
|
nowImageGroup.value = imageGroupList[0];
|
|
|
|
|
chooseNowImageGroup(1);
|
|
|
|
|
} else {
|
|
|
|
|
nowImageGroup.value = imageGroupList[index + 1];
|
|
|
|
|
chooseNowImageGroup(index + 2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
getNowImageGroup();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
getNowImageGroup();
|
|
|
|
|
refresh();
|
|
|
|
|
}
|
|
|
|
|
// 当前图片组的索引
|
|
|
|
|
function getNowImageGroup() {
|
|
|
|
|
@ -692,7 +736,34 @@
|
|
|
|
|
deep: true,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// -----------------------------------------------
|
|
|
|
|
const inputFlag = ref(false);
|
|
|
|
|
const inputRef = ref();
|
|
|
|
|
// input鼠标聚焦
|
|
|
|
|
function focusInput() {
|
|
|
|
|
inputFlag.value = true;
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
if (inputRef.value && inputRef.value.focus) {
|
|
|
|
|
inputRef.value.focus();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// input鼠标聚焦后离开or点击Enter
|
|
|
|
|
function blurInput() {
|
|
|
|
|
inputFlag.value = false;
|
|
|
|
|
// 检测是否是数字
|
|
|
|
|
if (/^-?\d+(\.\d+)?$/.test(nowImageGroupIndex.value.toString())) {
|
|
|
|
|
if (parseInt(nowImageGroupIndex.value) > props.nowRecord.imageGroup.length) {
|
|
|
|
|
nowImageGroupIndex.value = props.nowRecord.imageGroup.length;
|
|
|
|
|
} else if (parseInt(nowImageGroupIndex.value) < 1) {
|
|
|
|
|
nowImageGroupIndex.value = 1;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
nowImageGroupIndex.value = 1;
|
|
|
|
|
}
|
|
|
|
|
nowImageGroup.value = props.nowRecord.imageGroup[nowImageGroupIndex.value - 1];
|
|
|
|
|
chooseNowImageGroup(nowImageGroupIndex.value);
|
|
|
|
|
}
|
|
|
|
|
// 缩放比例、旋转-----------------------------------
|
|
|
|
|
const scale = ref(1);
|
|
|
|
|
const rotationAngle = ref(0);
|
|
|
|
|
@ -737,7 +808,6 @@
|
|
|
|
|
|
|
|
|
|
// 设置画笔---------------------------------------------------------------
|
|
|
|
|
const graffitiFlag = ref(false);
|
|
|
|
|
const graffitiColor = ref('#E23C39');
|
|
|
|
|
const nowGraffiti = ref(-1);
|
|
|
|
|
const nowMouseGraffiti = ref(0);
|
|
|
|
|
// 设置鼠标格式
|
|
|
|
|
@ -769,7 +839,7 @@
|
|
|
|
|
// 所有已创建的矩形
|
|
|
|
|
const graffitis: any = ref([]);
|
|
|
|
|
const graffitisClone: any = ref([]);
|
|
|
|
|
let comparisoNnum = '';
|
|
|
|
|
let comparisoNnum = 0;
|
|
|
|
|
const mouseCanvasRef_1 = ref();
|
|
|
|
|
const mouseCanvasRef_2 = ref();
|
|
|
|
|
|
|
|
|
|
@ -785,7 +855,7 @@
|
|
|
|
|
comparisoNnum = num;
|
|
|
|
|
// 获取相对于容器的坐标
|
|
|
|
|
const rect =
|
|
|
|
|
comparisoNnum == '1'
|
|
|
|
|
comparisoNnum == 1
|
|
|
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
|
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
|
|
|
startX = event.x - rect.x;
|
|
|
|
|
@ -797,7 +867,7 @@
|
|
|
|
|
y: startY,
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
color: graffitiColor.value,
|
|
|
|
|
color: props.graffitiColor != '#ffffff' ? props.graffitiColor : '#E23C39',
|
|
|
|
|
text: '',
|
|
|
|
|
status: 'edit',
|
|
|
|
|
type: 'hand',
|
|
|
|
|
@ -828,7 +898,7 @@
|
|
|
|
|
function onMouseMoveGraffit(event) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
const rect =
|
|
|
|
|
comparisoNnum == '1'
|
|
|
|
|
comparisoNnum == 1
|
|
|
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
|
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
@ -845,7 +915,7 @@
|
|
|
|
|
// 涂鸦
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
const rect =
|
|
|
|
|
comparisoNnum == '1'
|
|
|
|
|
comparisoNnum == 1
|
|
|
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
|
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
|
|
|
endX = event.x - rect.x;
|
|
|
|
|
@ -900,6 +970,18 @@
|
|
|
|
|
graffitis.value[graffitis.value.length - 1].height = Math.abs(endY - startY);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加保存涂鸦
|
|
|
|
|
function addGraffiti() {
|
|
|
|
|
// UpdatePicStatus({
|
|
|
|
|
// id: props.nowPreviewRecord.id,
|
|
|
|
|
// fileTags: JSON.stringify(fileTags.value),
|
|
|
|
|
// graffitiJson: JSON.stringify(graffitis.value),
|
|
|
|
|
// display: props.nowPreviewRecord.display0,
|
|
|
|
|
// showOnMap: props.nowPreviewRecord.showOnMap,
|
|
|
|
|
// }).then((res) => {
|
|
|
|
|
// emits('handleSuccessPreview');
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
// 删除鼠标涂鸦
|
|
|
|
|
function deleteGraffiti(index = undefined, value = undefined) {
|
|
|
|
|
graffitis.value.splice(index, 1);
|
|
|
|
|
@ -917,6 +999,151 @@
|
|
|
|
|
scale.value -= 0.1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//------------------------------------------------------------------------
|
|
|
|
|
// 鼠标聚焦
|
|
|
|
|
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';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'left' || type == 'right') {
|
|
|
|
|
document.body.style.cursor = 'ew-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) {
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
if (rect.status == 'mouse' || rect.status == 'edit') {
|
|
|
|
|
if (rect.status == 'mouse') {
|
|
|
|
|
rect.status = 'success';
|
|
|
|
|
}
|
|
|
|
|
if (rect.status == 'edit') {
|
|
|
|
|
document.body.style.cursor = 'crosshair';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的鼠标按下
|
|
|
|
|
const mouseEditType = ref('');
|
|
|
|
|
function funMouseDownEdit(e, index, type, num) {
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
// 获取相对于容器的坐标
|
|
|
|
|
graffitisClone.value = cloneDeep(graffitis.value);
|
|
|
|
|
comparisoNnum = num;
|
|
|
|
|
// 获取相对于容器的坐标
|
|
|
|
|
const rect =
|
|
|
|
|
comparisoNnum == 1
|
|
|
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
|
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
|
|
|
startX = e.x - rect.x;
|
|
|
|
|
startY = e.y - rect.y;
|
|
|
|
|
isDragging.value = true;
|
|
|
|
|
nowGraffiti.value = index;
|
|
|
|
|
mouseEditType.value = type;
|
|
|
|
|
window.addEventListener('mousemove', funMouseMoveEdit);
|
|
|
|
|
window.addEventListener('mouseup', funMouseUpEdit);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的鼠标移动
|
|
|
|
|
function funMouseMoveEdit(e) {
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
const rect =
|
|
|
|
|
comparisoNnum == 1
|
|
|
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
|
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
endX = e.x - rect.x;
|
|
|
|
|
endY = e.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
funSetMouseDataEdit();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的鼠标松开
|
|
|
|
|
function funMouseUpEdit(e) {
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
const rect =
|
|
|
|
|
comparisoNnum == 1
|
|
|
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
|
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
|
|
|
endX = e.x - rect.x;
|
|
|
|
|
endY = e.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的数据
|
|
|
|
|
function funSetMouseDataEdit() {
|
|
|
|
|
if (['top', 'leftTop', 'rightTop'].includes(mouseEditType.value)) {
|
|
|
|
|
graffitis.value[nowGraffiti.value].height =
|
|
|
|
|
graffitis.value[nowGraffiti.value].height + graffitis.value[nowGraffiti.value].y - endY;
|
|
|
|
|
graffitis.value[nowGraffiti.value].y = endY;
|
|
|
|
|
}
|
|
|
|
|
if (['bottom', 'leftBottom', 'rightBottom'].includes(mouseEditType.value)) {
|
|
|
|
|
graffitis.value[nowGraffiti.value].height = endY - graffitis.value[nowGraffiti.value].y;
|
|
|
|
|
}
|
|
|
|
|
if (['left', 'leftTop', 'leftBottom'].includes(mouseEditType.value)) {
|
|
|
|
|
graffitis.value[nowGraffiti.value].width =
|
|
|
|
|
graffitis.value[nowGraffiti.value].width + graffitis.value[nowGraffiti.value].x - endX;
|
|
|
|
|
graffitis.value[nowGraffiti.value].x = endX;
|
|
|
|
|
}
|
|
|
|
|
if (['right', 'rightTop', 'rightBottom'].includes(mouseEditType.value)) {
|
|
|
|
|
graffitis.value[nowGraffiti.value].width = endX - graffitis.value[nowGraffiti.value].x;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加键盘事件监听器
|
|
|
|
|
const addEventListener = () => {
|
|
|
|
|
window.addEventListener('keydown', handleKeydown);
|
|
|
|
|
};
|
|
|
|
|
// 移除键盘事件监听器
|
|
|
|
|
const removeEventListener = () => {
|
|
|
|
|
window.removeEventListener('keydown', handleKeydown);
|
|
|
|
|
};
|
|
|
|
|
// 处理按键按下事件
|
|
|
|
|
const handleKeydown = (event: KeyboardEvent) => {
|
|
|
|
|
if (event.code === 'Escape' && graffitiFlag.value) {
|
|
|
|
|
setGraffiti();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 在组件挂载时添加监听器
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
addEventListener();
|
|
|
|
|
});
|
|
|
|
|
// 在组件卸载时移除监听器
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
removeEventListener();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.imageDiv_ {
|
|
|
|
|
@ -1005,6 +1232,12 @@
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttonInput {
|
|
|
|
|
position: relative;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1016,4 +1249,38 @@
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 退出涂鸦
|
|
|
|
|
.escTip {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0%;
|
|
|
|
|
bottom: 120px;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
background: #9c9c9c77;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
|
|
|
|
.whiteEsc {
|
|
|
|
|
height: 30px;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blackTip {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
