github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 缩放优化（锁定比例时四角缩放到最小不会破坏原有比例）

Browse Source
This commit is contained in:
pipipi-pikachu 2024-12-05 20:38:04 +08:00
parent eca440aa8e
commit b79fc24370
2 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/configs/element.ts
View File

@ -11,11 +11,11 @@ export const ELEMENT_TYPE_ZH: { [key: string]: string } = {
} }
export const MIN_SIZE: { [key: string]: number } = { export const MIN_SIZE: { [key: string]: number } = {
text: 20, text: 40,
image: 20, image: 20,
shape: 20, shape: 20,
chart: 200, chart: 200,
table: 20, table: 30,
video: 250, video: 250,
audio: 20, audio: 20,
latex: 20, latex: 20,

61
src/views/Editor/Canvas/hooks/useScaleElement.ts
View File

@ -131,7 +131,18 @@ export default (
// 元素最小缩放限制 // 元素最小缩放限制
const minSize = MIN_SIZE[element.type] || 20 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<typeof getRotateElementPoints> let points: ReturnType<typeof getRotateElementPoints>
let baseLeft = 0 let baseLeft = 0
@ -267,38 +278,38 @@ export default (
// 此处计算的位置需要在后面重新进行校正，因为旋转后再缩放事实上会改变元素基点的位置（虽然视觉上基点保持不动，但这是【旋转】+【移动】共同作用的结果） // 此处计算的位置需要在后面重新进行校正，因为旋转后再缩放事实上会改变元素基点的位置（虽然视觉上基点保持不动，但这是【旋转】+【移动】共同作用的结果）
// 但此处计算的大小不需要重新校正，因为前面已经重新计算需要缩放的距离，相当于大小已经经过了校正 // 但此处计算的大小不需要重新校正，因为前面已经重新计算需要缩放的距离，相当于大小已经经过了校正
if (command === OperateResizeHandlers.RIGHT_BOTTOM) { if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
width = getSizeWithinRange(elOriginWidth + revisedX) width = getSizeWithinRange(elOriginWidth + revisedX, 'width')
height = getSizeWithinRange(elOriginHeight + revisedY) height = getSizeWithinRange(elOriginHeight + revisedY, 'height')
} }
else if (command === OperateResizeHandlers.LEFT_BOTTOM) { else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
width = getSizeWithinRange(elOriginWidth - revisedX) width = getSizeWithinRange(elOriginWidth - revisedX, 'width')
height = getSizeWithinRange(elOriginHeight + revisedY) height = getSizeWithinRange(elOriginHeight + revisedY, 'height')
left = elOriginLeft - (width - elOriginWidth) left = elOriginLeft - (width - elOriginWidth)
} }
else if (command === OperateResizeHandlers.LEFT_TOP) { else if (command === OperateResizeHandlers.LEFT_TOP) {
width = getSizeWithinRange(elOriginWidth - revisedX) width = getSizeWithinRange(elOriginWidth - revisedX, 'width')
height = getSizeWithinRange(elOriginHeight - revisedY) height = getSizeWithinRange(elOriginHeight - revisedY, 'height')
left = elOriginLeft - (width - elOriginWidth) left = elOriginLeft - (width - elOriginWidth)
top = elOriginTop - (height - elOriginHeight) top = elOriginTop - (height - elOriginHeight)
} }
else if (command === OperateResizeHandlers.RIGHT_TOP) { else if (command === OperateResizeHandlers.RIGHT_TOP) {
width = getSizeWithinRange(elOriginWidth + revisedX) width = getSizeWithinRange(elOriginWidth + revisedX, 'width')
height = getSizeWithinRange(elOriginHeight - revisedY) height = getSizeWithinRange(elOriginHeight - revisedY, 'height')
top = elOriginTop - (height - elOriginHeight) top = elOriginTop - (height - elOriginHeight)
} }
else if (command === OperateResizeHandlers.TOP) { else if (command === OperateResizeHandlers.TOP) {
height = getSizeWithinRange(elOriginHeight - revisedY) height = getSizeWithinRange(elOriginHeight - revisedY, 'height')
top = elOriginTop - (height - elOriginHeight) top = elOriginTop - (height - elOriginHeight)
} }
else if (command === OperateResizeHandlers.BOTTOM) { else if (command === OperateResizeHandlers.BOTTOM) {
height = getSizeWithinRange(elOriginHeight + revisedY) height = getSizeWithinRange(elOriginHeight + revisedY, 'height')
} }
else if (command === OperateResizeHandlers.LEFT) { else if (command === OperateResizeHandlers.LEFT) {
width = getSizeWithinRange(elOriginWidth - revisedX) width = getSizeWithinRange(elOriginWidth - revisedX, 'width')
left = elOriginLeft - (width - elOriginWidth) left = elOriginLeft - (width - elOriginWidth)
} }
else if (command === OperateResizeHandlers.RIGHT) { 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 if (offsetY) moveX = moveY * aspectRatio
else moveY = moveX / aspectRatio else moveY = moveX / aspectRatio
} }
width = getSizeWithinRange(elOriginWidth + moveX) width = getSizeWithinRange(elOriginWidth + moveX, 'width')
height = getSizeWithinRange(elOriginHeight + moveY) height = getSizeWithinRange(elOriginHeight + moveY, 'height')
} }
else if (command === OperateResizeHandlers.LEFT_BOTTOM) { else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY) const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY)
@ -345,8 +356,8 @@ export default (
if (offsetY) moveX = -moveY * aspectRatio if (offsetY) moveX = -moveY * aspectRatio
else moveY = -moveX / aspectRatio else moveY = -moveX / aspectRatio
} }
width = getSizeWithinRange(elOriginWidth - moveX) width = getSizeWithinRange(elOriginWidth - moveX, 'width')
height = getSizeWithinRange(elOriginHeight + moveY) height = getSizeWithinRange(elOriginHeight + moveY, 'height')
left = elOriginLeft - (width - elOriginWidth) left = elOriginLeft - (width - elOriginWidth)
} }
else if (command === OperateResizeHandlers.LEFT_TOP) { else if (command === OperateResizeHandlers.LEFT_TOP) {
@ -357,8 +368,8 @@ export default (
if (offsetY) moveX = moveY * aspectRatio if (offsetY) moveX = moveY * aspectRatio
else moveY = moveX / aspectRatio else moveY = moveX / aspectRatio
} }
width = getSizeWithinRange(elOriginWidth - moveX) width = getSizeWithinRange(elOriginWidth - moveX, 'width')
height = getSizeWithinRange(elOriginHeight - moveY) height = getSizeWithinRange(elOriginHeight - moveY, 'height')
left = elOriginLeft - (width - elOriginWidth) left = elOriginLeft - (width - elOriginWidth)
top = elOriginTop - (height - elOriginHeight) top = elOriginTop - (height - elOriginHeight)
} }
@ -370,31 +381,31 @@ export default (
if (offsetY) moveX = -moveY * aspectRatio if (offsetY) moveX = -moveY * aspectRatio
else moveY = -moveX / aspectRatio else moveY = -moveX / aspectRatio
} }
width = getSizeWithinRange(elOriginWidth + moveX) width = getSizeWithinRange(elOriginWidth + moveX, 'width')
height = getSizeWithinRange(elOriginHeight - moveY) height = getSizeWithinRange(elOriginHeight - moveY, 'height')
top = elOriginTop - (height - elOriginHeight) top = elOriginTop - (height - elOriginHeight)
} }
else if (command === OperateResizeHandlers.LEFT) { else if (command === OperateResizeHandlers.LEFT) {
const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null) const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
moveX = moveX - offsetX moveX = moveX - offsetX
width = getSizeWithinRange(elOriginWidth - moveX) width = getSizeWithinRange(elOriginWidth - moveX, 'width')
left = elOriginLeft - (width - elOriginWidth) left = elOriginLeft - (width - elOriginWidth)
} }
else if (command === OperateResizeHandlers.RIGHT) { else if (command === OperateResizeHandlers.RIGHT) {
const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null) const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
moveX = moveX - offsetX moveX = moveX - offsetX
width = getSizeWithinRange(elOriginWidth + moveX) width = getSizeWithinRange(elOriginWidth + moveX, 'width')
} }
else if (command === OperateResizeHandlers.TOP) { else if (command === OperateResizeHandlers.TOP) {
const { offsetY } = alignedAdsorption(null, elOriginTop + moveY) const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
moveY = moveY - offsetY moveY = moveY - offsetY
height = getSizeWithinRange(elOriginHeight - moveY) height = getSizeWithinRange(elOriginHeight - moveY, 'height')
top = elOriginTop - (height - elOriginHeight) top = elOriginTop - (height - elOriginHeight)
} }
else if (command === OperateResizeHandlers.BOTTOM) { else if (command === OperateResizeHandlers.BOTTOM) {
const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY) const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
moveY = moveY - offsetY moveY = moveY - offsetY
height = getSizeWithinRange(elOriginHeight + moveY) height = getSizeWithinRange(elOriginHeight + moveY, 'height')
} }
} }