fix: 全景模糊

Code/src/App.tsx

@@ -87,6 +87,17 @@ export default function App() {
       rootRef.current.style.left = '0'
       rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH}) rotate(0deg)`
       rootRef.current.style.transformOrigin = 'center'
+
+      store.dispatch({
+        type: 'layout/style',
+        payload: {
+          width: planSize.width,
+          moveX: -moveX,
+          moveY: -moveY,
+          sizeW,
+          sizeH
+        }
+      })
     } else {
       // 竖屏
       isHHTemp = false

Code/src/components/KrpanoMiddleware.tsx

@@ -9,13 +9,13 @@ export interface KrpanoMiddlewareMethods {
   ready: () => void
 }
 
+const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent)
+
 export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddlewareProps>(
   ({ children }, ref) => {
+    const rootStyle = useSelector((state: any) => state.A0Layout.style)
     const isHH = useSelector((state: any) => state.A0Layout.isHH)
-    const fakeEvent = useMemo(
-      () => !isHH && /Mobi|Android|iPhone/i.test(navigator.userAgent),
-      [isHH]
-    )
+    const fakeEvent = useMemo(() => !isHH && isMobile, [isHH])
     const startX = useRef(0)
     const startY = useRef(0)
 
@@ -49,6 +49,7 @@ export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddle
 
     useImperativeHandle(ref, () => ({
       ready: () => {
+        console.log(rootStyle)
         if (fakeEvent) {
           window.ReactKrpanoActionProxy?.krpanoRenderer?.call("set(control.usercontrol, 'off');")
         }
@@ -65,7 +66,19 @@ export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddle
 
     return (
       <div
-        style={{ width: '100%', height: '100%' }}
+        style={
+          !isMobile && Object.keys(rootStyle).length
+            ? {
+                position: 'relative',
+                left: `-${(window.innerWidth - rootStyle.width) / 2}px`,
+                width: '100vw',
+                height: '100vh',
+                transform: `translate(${rootStyle.moveX * -1}px, ${rootStyle.moveY * -1}px) scale(${
+                  1 / rootStyle.sizeW
+                }, ${1 / rootStyle.sizeH})`
+              }
+            : { width: '100%', height: '100%' }
+        }
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
       >

Code/src/store/reducer/layout.ts

@@ -1,10 +1,11 @@
 // 初始化状态
 const initState = {
-  isHH: false
+  isHH: false,
+  style: {}
 }
 
 // 定义 action 类型
-type LayoutActionType = { type: 'layout/isHH'; payload: boolean }
+type LayoutActionType = { type: string; payload: any }
 
 // 频道 reducer
 export default function layoutReducer(state = initState, action: LayoutActionType) {
@@ -12,7 +13,8 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
     // 是横屏还是竖屏
     case 'layout/isHH':
       return { ...state, isHH: action.payload }
-
+    case 'layout/style':
+      return { ...state, style: action.payload }
     default:
       return state
   }