解决指示器尺寸问题
This commit is contained in:
@@ -904,55 +904,42 @@ const edgeIndicatorStyle = computed(() => {
|
|||||||
|
|
||||||
const { width, height } = safeTargetRect.value;
|
const { width, height } = safeTargetRect.value;
|
||||||
// 基础尺寸定义:
|
// 基础尺寸定义:
|
||||||
// - baseWidth: 水平指示器(上下)的宽度,也是垂直指示器(左右)的高度
|
// - baseSize: 边缘指示器的基础尺寸,与独立中心指示器(41x41px)保持协调
|
||||||
// - baseHeight: 水平指示器(上下)的高度,也是垂直指示器(左右)的宽度
|
const baseSize = 40; // 基础尺寸,与独立中心指示器(41x41px)接近
|
||||||
const baseWidth = 40; // 基础水平宽度/垂直高度(上下指示器宽40px,左右指示器高40px)
|
|
||||||
const baseHeight = 20; // 基础水平高度/垂直宽度(上下指示器高20px,左右指示器宽20px)
|
|
||||||
|
|
||||||
// 根据目标区域尺寸调整指示器大小
|
// 根据目标区域尺寸调整指示器大小
|
||||||
const minTargetSize = 100; // 从100px开始缩小,与最小显示尺寸80px保持协调
|
const minTargetSize = 100; // 从100px开始缩小,与最小显示尺寸80px保持协调
|
||||||
const maxIndicatorSizeRatio = 0.25; // 指示器最大尺寸不超过目标区域的25%,确保在小Area上不过大
|
let indicatorSize = baseSize;
|
||||||
let indicatorWidth = baseWidth;
|
|
||||||
let indicatorHeight = baseHeight;
|
|
||||||
|
|
||||||
const targetMinSize = Math.min(width, height);
|
const targetMinSize = Math.min(width, height);
|
||||||
if (targetMinSize < minTargetSize) {
|
if (targetMinSize < minTargetSize) {
|
||||||
// 按比例缩小边缘指示器
|
// 只有当目标区域小于最小尺寸时,才按比例缩小边缘指示器
|
||||||
const scaleFactor = targetMinSize / minTargetSize;
|
const scaleFactor = targetMinSize / minTargetSize;
|
||||||
|
indicatorSize = Math.floor(baseSize * scaleFactor);
|
||||||
// 计算缩小后的尺寸
|
// 确保指示器不小于最小尺寸
|
||||||
let scaledWidth = Math.floor(baseWidth * scaleFactor);
|
indicatorSize = Math.max(15, indicatorSize); // 最小尺寸15px
|
||||||
let scaledHeight = Math.floor(baseHeight * scaleFactor);
|
|
||||||
|
|
||||||
// 确保指示器不超过目标区域的最大比例
|
|
||||||
const maxWidth = Math.floor(width * maxIndicatorSizeRatio);
|
|
||||||
const maxHeight = Math.floor(height * maxIndicatorSizeRatio);
|
|
||||||
|
|
||||||
// 取较小值作为最终尺寸
|
|
||||||
indicatorWidth = Math.max(15, Math.min(scaledWidth, maxWidth)); // 降低最小宽度到15px
|
|
||||||
indicatorHeight = Math.max(8, Math.min(scaledHeight, maxHeight)); // 降低最小高度到8px
|
|
||||||
}
|
}
|
||||||
|
// 当目标区域足够大时,保持基础尺寸
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// 边缘指示器保持现有CSS的定位方式(使用top/right/bottom/left相对于容器边缘)
|
// 边缘指示器保持现有CSS的定位方式(使用top/right/bottom/left相对于容器边缘)
|
||||||
// 仅调整大小,不修改定位属性,避免与现有CSS冲突
|
// 仅调整大小,不修改定位属性,避免与现有CSS冲突
|
||||||
// 水平边缘指示器(上、下):宽 > 高
|
// 所有边缘指示器现在都是正方形,与独立中心指示器保持协调
|
||||||
indicatorTop: {
|
indicatorTop: {
|
||||||
width: `${indicatorWidth}px`, // 水平指示器宽度
|
width: `${indicatorSize}px`, // 正方形宽度
|
||||||
height: `${indicatorHeight}px` // 水平指示器高度
|
height: `${indicatorSize}px` // 正方形高度
|
||||||
},
|
},
|
||||||
indicatorBottom: {
|
indicatorBottom: {
|
||||||
width: `${indicatorWidth}px`, // 水平指示器宽度
|
width: `${indicatorSize}px`, // 正方形宽度
|
||||||
height: `${indicatorHeight}px` // 水平指示器高度
|
height: `${indicatorSize}px` // 正方形高度
|
||||||
},
|
},
|
||||||
// 垂直边缘指示器(左、右):高 > 宽
|
|
||||||
indicatorLeft: {
|
indicatorLeft: {
|
||||||
width: `${indicatorHeight}px`, // 垂直指示器宽度(使用水平指示器的高度)
|
width: `${indicatorSize}px`, // 正方形宽度
|
||||||
height: `${indicatorWidth}px` // 垂直指示器高度(使用水平指示器的宽度)
|
height: `${indicatorSize}px` // 正方形高度
|
||||||
},
|
},
|
||||||
indicatorRight: {
|
indicatorRight: {
|
||||||
width: `${indicatorHeight}px`, // 垂直指示器宽度(使用水平指示器的高度)
|
width: `${indicatorSize}px`, // 正方形宽度
|
||||||
height: `${indicatorWidth}px` // 垂直指示器高度(使用水平指示器的宽度)
|
height: `${indicatorSize}px` // 正方形高度
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user