feat: --

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
+const baseUrlLoc = 'http://localhost:8080/staticData/'
 
 // Build开发资源目录
 const baseUrlAtl = 'https://houseoss.4dkankan.com/project/henan/staticData/'

Code/src/components/KrpanoMiddleware.tsx

@@ -0,0 +1,59 @@
+import { FC, forwardRef, useImperativeHandle, useRef } from "react";
+import { useSelector } from "react-redux";
+
+export interface KrpanoMiddlewareProps {
+  children: React.ReactNode;
+}
+
+export interface KrpanoMiddlewareMethods {
+  ready: () => void;
+}
+
+export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddlewareProps>(({ children }, ref) => {
+  const isHH = useSelector((state: any) => state.A0Layout.isHH)
+  const startX = useRef(0);
+  const startY = useRef(0);
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    const touch = e.touches[0]
+    startX.current = touch.clientX
+    startY.current = touch.clientY
+  }
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    const touch = e.touches[0]
+    const deltaX = touch.clientX - startX.current
+    const deltaY = touch.clientY - startY.current
+
+    const krpano = window.ReactKrpanoActionProxy
+    if (krpano) {
+      const currentHlookat = krpano.get("view.hlookat")
+      const currentVlookat = krpano.get("view.vlookat")
+
+      const newHlookat = currentHlookat - deltaY * 0.1
+      const newVlookat = currentVlookat + deltaX * 0.1
+
+      krpano.set("view.hlookat", newHlookat)
+      krpano.set("view.vlookat", newVlookat)
+    }
+
+    startX.current = touch.clientX
+    startY.current = touch.clientY
+  }
+
+  useImperativeHandle(ref, () => ({
+    ready: () => {
+      if (!isHH && /Mobi|Android|iPhone/i.test(navigator.userAgent)) {
+        window.ReactKrpanoActionProxy?.krpanoRenderer?.call("set(control.usercontrol, 'off');")
+      }
+    }
+  }))
+
+  return (
+    <div style={{width: '100%', height: '100%'}}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+    >
+      {children}
+    </div>
+  )
+})

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -1,10 +1,11 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import Hot1 from './Hot1'
 import Hot2 from './Hot2'
-import { baseURL, myData } from '@/utils/http'
+import { otherUrl, myData } from '@/utils/http'
 import HotIcon from '@/components/HotIcon'
 import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
+import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
 
 window.draggbleHotspotEvent = (ath: number, atv: number) => {
   console.log(`ath: ${ath}, atv: ${atv}`)
@@ -14,57 +15,53 @@ function PanoVideo() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
   const [activeIdx, setActiveIdx] = useState(-1)
+  const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
   const data = useMemo(() => {
     if (ind !== -1) return myData.visit.hot[ind].data
     else return []
   }, [ind])
 
-  const onReady = () => {
-    window.ReactKrpanoActionProxy?.krpanoRenderer?.call('set(control.dragging, false);')
-  }
-
-  return (
-    <>
-      <Krpano className={styles.PanoVideo} currentScene='scene1' onReady={onReady}>
-        <VideoScene
-          name='scene1'
-          videointerfaceXmlUrl='/skin/videointerface.xml'
-          videoplayerUrl='/plugins/videoplayer.js'
+  return <>
+    <KrpanoMiddleware ref={middlewareIns}>
+      <Krpano className={styles.PanoVideo} currentScene='scene1' onReady={() => middlewareIns.current?.ready()}>
+        <VideoScene name='scene1'
+          videointerfaceXmlUrl="./skin/videointerface.xml"
+          videoplayerUrl="./plugins/videoplayer.js"
           sourceList={[
             {
-              res: '2000x1000',
-              url: baseURL + '/pano/1.mp4',
-              poster: ''
-            }
+              res: "2000x1000",
+              url: otherUrl + "pano/1.mp4",
+              poster: "",
+            },
           ]}
-          playRes='2000x1000'
+          playRes="2000x1000"
           onVisibility={() => {
-            if (document.visibilityState === 'visible') {
-              videoSceneModel.play()
+            if (document.visibilityState === "visible") {
+              videoSceneModel.play();
             }
           }}
         >
           <View
             hlookat={0}
             vlookat={0}
-            fovType='MFOV'
+            fovType="MFOV"
             fov={100}
             maxPixelZoom={2}
             fovMin={70}
             fovMax={140}
-            limitView='auto'
+            limitView="auto"
           />
 
           {myData.visit.hot.map((item, index) => (
             // 热点图标
             <HotSpot
               key={index}
-              type='text'
+              type="text"
               name={item.name}
               atv={item.atv}
               ath={item.ath}
-              edge='top'
+              edge="top"
               distorted={true}
               scale={item.size}
               bg={false}
@@ -82,14 +79,14 @@ function PanoVideo() {
           ))}
         </VideoScene>
       </Krpano>
+    </KrpanoMiddleware>
 
-      {ind === -1 ? null : ind === 0 ? (
-        <Hot1 data={data} closeFu={() => setInd(-1)} />
-      ) : (
-        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
-      )}
-    </>
-  )
+    {ind === -1 ? null : ind === 0 ? (
+      <Hot1 data={data} closeFu={() => setInd(-1)} />
+    ) : (
+      <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
+    )}
+  </>
 }
 
 const MemoPanoVideo = React.memo(PanoVideo)