diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue index 01731b1a..5a12b764 100644 --- a/src/views/components/element/ImageElement/ImageClipHandler.vue +++ b/src/views/components/element/ImageElement/ImageClipHandler.vue @@ -39,7 +39,7 @@ :key="point" @mousedown.stop="$event => scaleClipRange($event, point)" > - + store.state.canvasScale) + const ctrlOrShiftKeyActive = computed(() => store.getters.ctrlOrShiftKeyActive) const topImgWrapperPosition = reactive({ top: 0, @@ -198,17 +199,17 @@ export default defineComponent({ emit('clip', clipedEmitData) } - const keyboardClip = (e: KeyboardEvent) => { + const keyboardListener = (e: KeyboardEvent) => { const key = e.key.toUpperCase() if (key === KEYS.ENTER) handleClip() } onMounted(() => { initClipPosition() - document.addEventListener('keydown', keyboardClip) + document.addEventListener('keydown', keyboardListener) }) onUnmounted(() => { - document.removeEventListener('keydown', keyboardClip) + document.removeEventListener('keydown', keyboardListener) }) const getRange = () => { @@ -304,6 +305,8 @@ export default defineComponent({ height: topImgWrapperPosition.height, } + const aspectRatio = topImgWrapperPosition.width / topImgWrapperPosition.height + document.onmousemove = e => { if (!isMouseDown) return @@ -313,6 +316,11 @@ export default defineComponent({ let moveX = (currentPageX - startPageX) / canvasScale.value / props.width * 100 let moveY = (currentPageY - startPageY) / canvasScale.value / props.height * 100 + if (ctrlOrShiftKeyActive.value) { + if (type === 'b-r' || type === 't-l') moveY = moveX / aspectRatio + if (type === 'b-l' || type === 't-r') moveY = -moveX / aspectRatio + } + let targetLeft, targetTop, targetWidth, targetHeight // 根据不同缩放点,计算目标大小和位置,同时做大小和范围的限制 @@ -459,8 +467,8 @@ export default defineComponent({ .clip-point { position: absolute; - width: 12px; - height: 12px; + width: 16px; + height: 16px; left: 0; top: 0; transform-origin: 0 0; @@ -473,27 +481,27 @@ export default defineComponent({ } &.t-l { - cursor: nwse-resize; left: 0; top: 0; + cursor: nwse-resize; } &.t-r { - cursor: nesw-resize; left: 100%; top: 0; transform: rotate(90deg); + cursor: nesw-resize; } &.b-l { - cursor: nesw-resize; left: 0; top: 100%; transform: rotate(-90deg); + cursor: nesw-resize; } &.b-r { - cursor: nwse-resize; left: 100%; top: 100%; transform: rotate(180deg); + cursor: nwse-resize; } } \ No newline at end of file