diff --git a/src/guide/guide.ts b/src/guide/guide.ts index 513aa0b0f..66f3ad94e 100644 --- a/src/guide/guide.ts +++ b/src/guide/guide.ts @@ -90,13 +90,16 @@ export default class Guide extends SuperComponent { const highlightPadding = rpx2px(step.highlightPadding ?? this.data.highlightPadding); const referenceTop = rect.top - highlightPadding; const referenceRight = systemInfo.windowWidth - rect.right - highlightPadding; - const referenceBottom = systemInfo.windowHeight - rect.bottom - highlightPadding; const referenceLeft = rect.left - highlightPadding; + const referenceWidth = rect.width + 2 * highlightPadding; + const referenceHeight = rect.height + 2 * highlightPadding; + const style = { top: `${referenceTop}px`, right: `${referenceRight}px`, - bottom: `${referenceBottom}px`, left: `${referenceLeft}px`, + width: `${referenceWidth}px`, + height: `${referenceHeight}px`, }; this.setData({ _steps: this.data.steps, @@ -213,12 +216,11 @@ export default class Guide extends SuperComponent { const space = rpx2px(32); const offsetLeft = (offset) => unitConvert(isNumber(offset?.[0]) ? `${offset?.[0]}rpx` : offset?.[0] || 0); const offsetTop = (offset) => unitConvert(isNumber(offset?.[1]) ? `${offset?.[1]}rpx` : offset?.[1] || 0); - const bottom = (place) => parseFloat(place.bottom); const left = (place) => parseFloat(place.left); const right = (place) => parseFloat(place.right); const top = (place) => parseFloat(place.top); - const height = (place) => systemInfo.windowHeight - bottom(place) - top(place); - const width = (place) => systemInfo.windowWidth - left(place) - right(place); + const height = (place) => parseFloat(place.height); + const width = (place) => parseFloat(place.width); return { center: (rect, place, offset) => ({ top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`, @@ -245,7 +247,7 @@ export default class Guide extends SuperComponent { right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`, }), 'left-bottom': (rect, place, offset) => ({ - bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`, + top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`, right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`, }), right: (rect, place, offset) => ({ @@ -257,19 +259,19 @@ export default class Guide extends SuperComponent { left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`, }), 'right-bottom': (rect, place, offset) => ({ - bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`, + top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`, left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`, }), top: (rect, place, offset) => ({ - bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`, + top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`, left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`, }), 'top-left': (rect, place, offset) => ({ - bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`, + top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`, left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`, }), 'top-right': (rect, place, offset) => ({ - bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`, + top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`, right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`, }), };