From b79fc24370b84d5b647d11d77b3f0d8a5f6b9d3a Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Thu, 5 Dec 2024 20:38:04 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E7=BC=A9=E6=94=BE=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=88=E9=94=81=E5=AE=9A=E6=AF=94=E4=BE=8B=E6=97=B6=E5=9B=9B?= =?UTF-8?q?=E8=A7=92=E7=BC=A9=E6=94=BE=E5=88=B0=E6=9C=80=E5=B0=8F=E4=B8=8D?= =?UTF-8?q?=E4=BC=9A=E7=A0=B4=E5=9D=8F=E5=8E=9F=E6=9C=89=E6=AF=94=E4=BE=8B?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/configs/element.ts | 4 +- .../Editor/Canvas/hooks/useScaleElement.ts | 61 +++++++++++-------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/configs/element.ts b/src/configs/element.ts index a8f880a3..4c88a106 100644 --- a/src/configs/element.ts +++ b/src/configs/element.ts @@ -11,11 +11,11 @@ export const ELEMENT_TYPE_ZH: { [key: string]: string } = { } export const MIN_SIZE: { [key: string]: number } = { - text: 20, + text: 40, image: 20, shape: 20, chart: 200, - table: 20, + table: 30, video: 250, audio: 20, latex: 20, diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index f0db93cb..fb28e688 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -131,7 +131,18 @@ export default ( // 元素最小缩放限制 const minSize = MIN_SIZE[element.type] || 20 - const getSizeWithinRange = (size: number) => size < minSize ? minSize : size + const getSizeWithinRange = (size: number, type: 'width' | 'height') => { + if (!fixedRatio) return size < minSize ? minSize : size + + let minWidth = minSize + let minHeight = minSize + const ratio = element.width / element.height + if (ratio < 1) minHeight = minSize / ratio + if (ratio > 1) minWidth = minSize * ratio + + if (type === 'width') return size < minWidth ? minWidth : size + return size < minHeight ? minHeight : size + } let points: ReturnType let baseLeft = 0 @@ -267,38 +278,38 @@ export default ( // 此处计算的位置需要在后面重新进行校正，因为旋转后再缩放事实上会改变元素基点的位置（虽然视觉上基点保持不动，但这是【旋转】+【移动】共同作用的结果） // 但此处计算的大小不需要重新校正，因为前面已经重新计算需要缩放的距离，相当于大小已经经过了校正 if (command === OperateResizeHandlers.RIGHT_BOTTOM) { - width = getSizeWithinRange(elOriginWidth + revisedX) - height = getSizeWithinRange(elOriginHeight + revisedY) + width = getSizeWithinRange(elOriginWidth + revisedX, 'width') + height = getSizeWithinRange(elOriginHeight + revisedY, 'height') } else if (command === OperateResizeHandlers.LEFT_BOTTOM) { - width = getSizeWithinRange(elOriginWidth - revisedX) - height = getSizeWithinRange(elOriginHeight + revisedY) + width = getSizeWithinRange(elOriginWidth - revisedX, 'width') + height = getSizeWithinRange(elOriginHeight + revisedY, 'height') left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.LEFT_TOP) { - width = getSizeWithinRange(elOriginWidth - revisedX) - height = getSizeWithinRange(elOriginHeight - revisedY) + width = getSizeWithinRange(elOriginWidth - revisedX, 'width') + height = getSizeWithinRange(elOriginHeight - revisedY, 'height') left = elOriginLeft - (width - elOriginWidth) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.RIGHT_TOP) { - width = getSizeWithinRange(elOriginWidth + revisedX) - height = getSizeWithinRange(elOriginHeight - revisedY) + width = getSizeWithinRange(elOriginWidth + revisedX, 'width') + height = getSizeWithinRange(elOriginHeight - revisedY, 'height') top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.TOP) { - height = getSizeWithinRange(elOriginHeight - revisedY) + height = getSizeWithinRange(elOriginHeight - revisedY, 'height') top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.BOTTOM) { - height = getSizeWithinRange(elOriginHeight + revisedY) + height = getSizeWithinRange(elOriginHeight + revisedY, 'height') } else if (command === OperateResizeHandlers.LEFT) { - width = getSizeWithinRange(elOriginWidth - revisedX) + width = getSizeWithinRange(elOriginWidth - revisedX, 'width') left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.RIGHT) { - width = getSizeWithinRange(elOriginWidth + revisedX) + width = getSizeWithinRange(elOriginWidth + revisedX, 'width') } // 获取当前元素的基点坐标，与初始状态时的基点坐标进行对比，并计算差值进行元素位置的校正 @@ -334,8 +345,8 @@ export default ( if (offsetY) moveX = moveY * aspectRatio else moveY = moveX / aspectRatio } - width = getSizeWithinRange(elOriginWidth + moveX) - height = getSizeWithinRange(elOriginHeight + moveY) + width = getSizeWithinRange(elOriginWidth + moveX, 'width') + height = getSizeWithinRange(elOriginHeight + moveY, 'height') } else if (command === OperateResizeHandlers.LEFT_BOTTOM) { const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY) @@ -345,8 +356,8 @@ export default ( if (offsetY) moveX = -moveY * aspectRatio else moveY = -moveX / aspectRatio } - width = getSizeWithinRange(elOriginWidth - moveX) - height = getSizeWithinRange(elOriginHeight + moveY) + width = getSizeWithinRange(elOriginWidth - moveX, 'width') + height = getSizeWithinRange(elOriginHeight + moveY, 'height') left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.LEFT_TOP) { @@ -357,8 +368,8 @@ export default ( if (offsetY) moveX = moveY * aspectRatio else moveY = moveX / aspectRatio } - width = getSizeWithinRange(elOriginWidth - moveX) - height = getSizeWithinRange(elOriginHeight - moveY) + width = getSizeWithinRange(elOriginWidth - moveX, 'width') + height = getSizeWithinRange(elOriginHeight - moveY, 'height') left = elOriginLeft - (width - elOriginWidth) top = elOriginTop - (height - elOriginHeight) } @@ -370,31 +381,31 @@ export default ( if (offsetY) moveX = -moveY * aspectRatio else moveY = -moveX / aspectRatio } - width = getSizeWithinRange(elOriginWidth + moveX) - height = getSizeWithinRange(elOriginHeight - moveY) + width = getSizeWithinRange(elOriginWidth + moveX, 'width') + height = getSizeWithinRange(elOriginHeight - moveY, 'height') top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.LEFT) { const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null) moveX = moveX - offsetX - width = getSizeWithinRange(elOriginWidth - moveX) + width = getSizeWithinRange(elOriginWidth - moveX, 'width') left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.RIGHT) { const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null) moveX = moveX - offsetX - width = getSizeWithinRange(elOriginWidth + moveX) + width = getSizeWithinRange(elOriginWidth + moveX, 'width') } else if (command === OperateResizeHandlers.TOP) { const { offsetY } = alignedAdsorption(null, elOriginTop + moveY) moveY = moveY - offsetY - height = getSizeWithinRange(elOriginHeight - moveY) + height = getSizeWithinRange(elOriginHeight - moveY, 'height') top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.BOTTOM) { const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY) moveY = moveY - offsetY - height = getSizeWithinRange(elOriginHeight + moveY) + height = getSizeWithinRange(elOriginHeight + moveY, 'height') } }