边框调节
This commit is contained in:
@@ -528,41 +528,45 @@ const onResizeMove = (e) => {
|
||||
// 根据方向调整大小
|
||||
switch (resizeDirection.value) {
|
||||
case 'nw':
|
||||
// 左上方向:向左上拖动,宽度增加,高度增加,位置左上移
|
||||
newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
|
||||
newHeight = Math.max(30, resizeStartSize.value.height - deltaY)
|
||||
newLeft = resizeStartAreaPos.value.left + deltaX
|
||||
newTop = resizeStartAreaPos.value.top + deltaY
|
||||
break
|
||||
case 'ne':
|
||||
// 右上方向:向右上拖动,宽度增加,高度增加,位置右上移
|
||||
newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
|
||||
newHeight = Math.max(30, resizeStartSize.value.height - deltaY)
|
||||
newTop = resizeStartAreaPos.value.top + deltaY
|
||||
break
|
||||
case 'sw':
|
||||
// 左下方向:向左下拖动,宽度增加,高度增加,位置左下移
|
||||
newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
|
||||
newHeight = Math.max(30, resizeStartSize.value.height + deltaY)
|
||||
newLeft = resizeStartAreaPos.value.left + deltaX
|
||||
break
|
||||
case 'se':
|
||||
// 右下方向:向右下拖动,宽度增加,高度增加
|
||||
newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
|
||||
newHeight = Math.max(30, resizeStartSize.value.height + deltaY)
|
||||
break
|
||||
case 'n':
|
||||
// 拖动上边框时,Area向上边扩展
|
||||
// 上方向:向上拖动,高度增加,位置上移
|
||||
newHeight = Math.max(30, resizeStartSize.value.height - deltaY)
|
||||
// 当deltaY为负时,鼠标向上移动,增加高度并向上移动位置
|
||||
newTop = resizeStartAreaPos.value.top + deltaY
|
||||
break
|
||||
case 'e':
|
||||
// 右方向:向右拖动,宽度增加
|
||||
newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
|
||||
break
|
||||
case 's':
|
||||
// 下方向:向下拖动,高度增加
|
||||
newHeight = Math.max(30, resizeStartSize.value.height + deltaY)
|
||||
break
|
||||
case 'w':
|
||||
// 拖动左边框时,Area向左边扩展
|
||||
// 左方向:向左拖动,宽度增加,位置左移
|
||||
newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
|
||||
// 当deltaX为负时,鼠标向左移动,增加宽度并向左移动位置
|
||||
newLeft = resizeStartAreaPos.value.left + deltaX
|
||||
break
|
||||
}
|
||||
|
||||
@@ -470,9 +470,31 @@ const onResizeStart = (e, direction) => {
|
||||
height: currentPosition.y - startPosition.y
|
||||
};
|
||||
|
||||
// 根据方向正确计算新尺寸
|
||||
let newWidth = areaStartState.width;
|
||||
let newHeight = areaStartState.height;
|
||||
|
||||
// 宽度计算
|
||||
if (currentResizeDirection.includes('left')) {
|
||||
// 左方向:宽度增加 = 原始宽度 - deltaX(因为deltaX为负)
|
||||
newWidth = areaStartState.width - totalDelta.width;
|
||||
} else if (currentResizeDirection.includes('right')) {
|
||||
// 右方向:宽度增加 = 原始宽度 + deltaX
|
||||
newWidth = areaStartState.width + totalDelta.width;
|
||||
}
|
||||
|
||||
// 高度计算
|
||||
if (currentResizeDirection.includes('top')) {
|
||||
// 上方向:高度增加 = 原始高度 - deltaY(因为deltaY为负)
|
||||
newHeight = areaStartState.height - totalDelta.height;
|
||||
} else if (currentResizeDirection.includes('bottom')) {
|
||||
// 下方向:高度增加 = 原始高度 + deltaY
|
||||
newHeight = areaStartState.height + totalDelta.height;
|
||||
}
|
||||
|
||||
const newSize = {
|
||||
width: areaStartState.width + totalDelta.width,
|
||||
height: areaStartState.height + totalDelta.height
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
};
|
||||
|
||||
const newPosition = {
|
||||
|
||||
Reference in New Issue
Block a user