feat: 保存

packages/qjkankan-editor/public/static/template/skin/vtourskin.xml

@@ -1392,6 +1392,6 @@
       <hotspot width="32%" name="nadirlogo" awlays="true" renderer="css3d" visible="false" keep="true" url="masking.png" ath="0" atv="90"  handcursor="false" zoom="true" height="prop" distorted="true" scale="1" rotate="0.0" />
 
       <!-- 顶部logo -->
-      <hotspot width="32%" name="peaklogo" awlays="true" renderer="css3d" visible="true" keep="true" url="masking.png" ath="0" atv="-90"  height="prop" handcursor="false" zoom="true" distorted="true" scale="1" rotate="0.0" />
+      <hotspot width="32%" name="peaklogo" awlays="true" renderer="css3d" visible="false" keep="true" url="masking.png" ath="0" atv="-90"  height="prop" handcursor="false" zoom="true" distorted="true" scale="1" rotate="0.0" />
 
 </krpano>

packages/qjkankan-editor/src/Store/modules/scene.js

@@ -6,21 +6,21 @@ const initCustomMask = {
     icon: "",
     scale: 1,
     fodderId: "",
-    antidistorted: false,
+    antidistorted: true,
   },
   earth: {
     isShow: false,
     icon: "",
     scale: 1,
     fodderId: "",
-    antidistorted: false,
+    antidistorted: true,
   },
 };
 const initVisual = {
   vlookat: null,
   hlookat: null,
-  vlookatmin: 0,
-  vlookatmax: 0,
+  vlookatmin: -90,
+  vlookatmax: 90,
 };
 
 export default {

packages/qjkankan-editor/src/assets/images/icons/navs/mask_normal.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>mask_normal</title>
+    <g id="编辑器" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-182, -48)">
+            <g id="mask_normal" transform="translate(182, 48)">
+                <circle id="椭圆形" stroke="#767676" stroke-width="1.5" cx="9" cy="9" r="8.25"></circle>
+                <path d="M9,14 C11.7614237,14 14,11.7614237 14,9 C14,6.23857625 11.7614237,4 9,4 C6.23857625,4 4,6.23857625 4,9 C4,11.7614237 6.23857625,14 9,14 Z" id="椭圆形" stroke="#767676" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="1,0.5"></path>
+                <circle id="椭圆形" fill="#4E4E4E" cx="9" cy="9" r="2"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

packages/qjkankan-editor/src/assets/images/icons/navs/mask_selected.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>mask_selected</title>
+    <g id="编辑器" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-182, -80)">
+            <g id="mask_selected" transform="translate(182, 80)">
+                <circle id="椭圆形" stroke="#0076F6" stroke-width="1.5" cx="9" cy="9" r="8.25"></circle>
+                <circle id="椭圆形" stroke="#0076F6" stroke-width="1.5" cx="9" cy="9" r="6"></circle>
+                <circle id="椭圆形" fill="#7FBAFA" cx="9" cy="9" r="4"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

packages/qjkankan-editor/src/config/menu.js

@@ -49,7 +49,7 @@ const PCMenu = [
   },
   {
     text: i18n.t("edit_page.cover"),
-    icon: "explanation",
+    icon: "mask",
     link: "/cover",
     name: "cover",
     hasPreviewArea: true,

packages/qjkankan-editor/src/views/base/Toolbar.vue

@@ -172,7 +172,7 @@ export default {
         "cruise" /**自动巡游 */,
         "bgm" /**背景音乐 */,
         "logo" /**自定义LOGO */,
-        "customCover" /**自定义遮罩 */,
+        // "customCover" /**自定义遮罩 */,
         "customButton" /**自定义按钮 */,
       ],
       activeTab: "openTips",

packages/qjkankan-view/public/showviewer/lib/krpano/skin/vtourskin.xml

@@ -1270,11 +1270,11 @@
     <!-- 现行热点 -->
      <include url="%SWFPATH%/tooltip.xml" />
 
-	<!-- 底部logo -->
-	<hotspot name="nadirlogo" renderer="css3d"  visible="false" keep="true" url="masking.png" ath="0" atv="90" width="26%" handcursor="false" zoom="true" height="prop" distorted="true" scale="0.5" rotate="0.0" />
+   <!-- 底部logo -->
+      <hotspot width="32%" name="nadirlogo" awlays="true" renderer="css3d" visible="false" keep="true" url="masking.png" ath="0" atv="90"  handcursor="false" zoom="true" height="prop" distorted="true" scale="1" rotate="0.0" />
 
-	<!-- 顶部logo -->
-	<hotspot name="peaklogo" renderer="css3d"	visible="false" keep="true" url="masking.png" ath="0" atv="-90" width="26%" height="prop" handcursor="false" zoom="true" distorted="true" scale="0.5" rotate="0.0" />
+      <!-- 顶部logo -->
+      <hotspot width="32%" name="peaklogo" awlays="true" renderer="css3d" visible="false" keep="true" url="masking.png" ath="0" atv="-90"  height="prop" handcursor="false" zoom="true" distorted="true" scale="1" rotate="0.0" />
 
 	<action name="animationComplete">
 			set(control.usercontrol, all);

packages/qjkankan-view/src/components/Pano/index.vue

@@ -20,7 +20,7 @@ import { getFdkkInfo } from "@/apis";
 import { isUpgradeAdapter } from "@/utils/fixVersion";
 import browser from "@/utils/browser";
 import config from "@/utils/config";
-import { useI18n } from "vue-i18n";
+import { useI18n, getLocale } from "@/i18n";
 const { t } = useI18n({ useScope: "global" });
 const store = useStore();
 const isMobile = computed(() => browser.isMobile());
@@ -39,7 +39,7 @@ const hadGetInfo = ref(false);
 const loadScene = async (currentScene) => {
   let app = await getApp();
   // await new Promise((r) => setTimeout(r, 10000));
-  console.error("loadScene", unref(currentScene));
+  console.error("loadScene", unref(currentScene).id);
   if (app.krpanoDom) {
     let { sceneCode, initVisual, someData } = currentScene;
     app.krpanoDom.call(
@@ -47,10 +47,22 @@ const loadScene = async (currentScene) => {
         initVisual ? initVisual.vlookat : "0"
       },${initVisual ? initVisual.hlookat : "0"})`
     );
-    console.log(sceneCode, someData);
+
     if (someData && someData.hotspots && someData.hotspots.length > 0) {
       app.Tags.initHotspot(someData.hotspots, false);
     }
+
+    const { vlookat, hlookat, vlookatmax, vlookatmin } =
+      currentScene.initVisual;
+    app.krpanoDom.set(`view.limitview`, "lookat");
+    app.krpanoDom.set(`view.vlookat`, vlookat);
+    app.krpanoDom.set(`view.hlookat`, hlookat);
+    app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
+    app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+
+    console.log("customMasks", currentScene.customMask);
+    const { earth, sky } = currentScene.customMask;
+    handleMasksUpdate(sky, earth, app);
   }
 };
 
@@ -84,7 +96,7 @@ watch(
       store.dispatch("audio/setLock", false);
       nextTick(() => {
         loadScene(newVal);
-        console.log(newVal, "newVal");
+        // console.log(newVal, "newVal");
       });
     } else {
       getFdkkInfo({ num: newVal.sceneCode }).then(async (data) => {
@@ -101,7 +113,7 @@ watch(
             data.data.bgMusic != "0" &&
             data.data.bgMusic != "Cheerful" &&
             data.data.bgMusic != "noMusic";
-   
+
           console.error("是否有V3--BGM", flag);
           store.commit("fdkk/setV3FdkkBGM", flag);
           store.dispatch("audio/initV3BGM", flag);
@@ -193,6 +205,45 @@ onMounted(() => {
     }
   });
 });
+
+const handleMasksUpdate = (skyMask, earthMask, app) => {
+  const lang = getLocale();
+  let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
+  if (skyMask) {
+    if ("isShow" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].visible`, Boolean(skyMask.isShow));
+    }
+
+    if (skyMask.icon) {
+      app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.icon);
+    } else {
+      app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
+    }
+    if ("scale" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].scale`, skyMask.scale);
+    }
+    if ("antidistorted" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].distorted`, skyMask.antidistorted);
+    }
+  }
+  if (earthMask) {
+    if ("isShow" in earthMask) {
+      app.krpanoDom.set(`hotspot[nadirlogo].visible`, Boolean(skyMask.isShow));
+    }
+    if (earthMask.icon) {
+      app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.icon);
+    }
+    if ("scale" in earthMask) {
+      app.krpanoDom.set(`hotspot[nadirlogo].scale`, earthMask.scale);
+    }
+    if ("antidistorted" in earthMask) {
+      app.krpanoDom.set(
+        `hotspot[nadirlogo].distorted`,
+        earthMask.antidistorted
+      );
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-view/src/pages/show.vue

@@ -112,7 +112,7 @@ onMounted(async () => {
     // 所有audio入口
 
     const currentSceneData = firstScene || data.scenes[0];
-    
+
     store.dispatch(
       "audio/initNormalBGM",
       data.backgroundMusic ? data.backgroundMusic.ossPath : ""
@@ -207,34 +207,8 @@ onMounted(async () => {
       if (isHavePano) {
         app.Scene.on("sceneReady", () => {
           if (app.krpanoDom) {
-            let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
-
-            if (earthMask.value) {
-              app.krpanoDom.set(`hotspot[nadirlogo].url`, defaultMask);
-              app.krpanoDom.set(
-                `hotspot[nadirlogo].visible`,
-                earthMask.value.isShow
-              );
-
-              if (earthMask.value.icon) {
-                app.krpanoDom.set(
-                  `hotspot[nadirlogo].url`,
-                  earthMask.value.icon
-                );
-              }
-            }
-
-            if (skyMask.value) {
-              app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
-              app.krpanoDom.set(
-                `hotspot[peaklogo].visible`,
-                skyMask.value.isShow
-              );
-              if (skyMask.value.icon) {
-                app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.value.icon);
-              }
-            }
-
+            const { sky, earth } = currentScene.value.customMask;
+            handleMasksUpdate(sky, earth, app);
             app.krpanoDom.set(
               `layer[webvr_exitbutton].html`,
               t("common.exit_vr")
@@ -247,8 +221,8 @@ onMounted(async () => {
                 ? JSON.parse(currentScene.value.someData).hotspots
                 : currentScene.value.someData.hotspots;
           }
-          console.log(hotspots, "hotspots");
           app.Tags.initHotspot(hotspots, false);
+          handleVisualLimit(app, currentScene.value);
         });
       }
 
@@ -260,6 +234,53 @@ onMounted(async () => {
 const handlePass = () => {
   hasPasswordLock.value = false;
 };
+const handleVisualLimit = (app, currentScene) => {
+  const { vlookatmax, vlookatmin } = currentScene.initVisual;
+  // console.log('initVisual',currentScene.initVisual)
+  app.krpanoDom.set(`view.limitview`, "lookat");
+  app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
+  app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+};
+
+const handleMasksUpdate = (skyMask, earthMask, app) => {
+  const lang = getLocale();
+  let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
+  console.log("defaultMask", defaultMask);
+  if (skyMask) {
+    if ("isShow" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].visible`, Boolean(skyMask.isShow));
+    }
+
+    if (skyMask.icon) {
+      app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.icon);
+    } else {
+      app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
+    }
+    if ("scale" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].scale`, skyMask.scale);
+    }
+    if ("antidistorted" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].distorted`, skyMask.antidistorted);
+    }
+  }
+  if (earthMask) {
+    if ("isShow" in earthMask) {
+      app.krpanoDom.set(`hotspot[nadirlogo].visible`, Boolean(skyMask.isShow));
+    }
+    if (earthMask.icon) {
+      app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.icon);
+    }
+    if ("scale" in earthMask) {
+      app.krpanoDom.set(`hotspot[nadirlogo].scale`, earthMask.scale);
+    }
+    if ("antidistorted" in earthMask) {
+      app.krpanoDom.set(
+        `hotspot[nadirlogo].distorted`,
+        earthMask.antidistorted
+      );
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-view/src/pages/showMobile.vue

@@ -205,34 +205,8 @@ onMounted(async () => {
       if (isHavePano) {
         app.Scene.on("sceneReady", () => {
           if (app.krpanoDom) {
-            let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
-
-            if (earthMask.value) {
-              app.krpanoDom.set(`hotspot[nadirlogo].url`, defaultMask);
-              app.krpanoDom.set(
-                `hotspot[nadirlogo].visible`,
-                Boolean(earthMask.value.isShow)
-              );
-
-              if (earthMask.value.icon) {
-                app.krpanoDom.set(
-                  `hotspot[nadirlogo].url`,
-                  earthMask.value.icon
-                );
-              }
-            }
-
-            if (skyMask.value) {
-              app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
-              app.krpanoDom.set(
-                `hotspot[peaklogo].visible`,
-                Boolean(skyMask.value.isShow)
-              );
-              if (skyMask.value.icon) {
-                app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.value.icon);
-              }
-            }
-
+            const { sky, earth } = currentScene.value.customMask;
+            handleMasksUpdate(sky, earth, app);
             app.krpanoDom.set(
               `layer[webvr_exitbutton].html`,
               t("common.exit_vr")
@@ -247,6 +221,7 @@ onMounted(async () => {
                 : currentScene.value.someData.hotspots;
           }
           app.Tags.initHotspot(hotspots, false);
+          handleVisualLimit(app, currentScene.value);
         });
       }
       initWxShare(lang);
@@ -260,6 +235,51 @@ onMounted(async () => {
 const handlePass = () => {
   hasPasswordLock.value = false;
 };
+const handleVisualLimit = (app, currentScene) => {
+  const { vlookatmax, vlookatmin } = currentScene.initVisual;
+  // console.log('initVisual',currentScene.initVisual)
+  app.krpanoDom.set(`view.limitview`, "lookat");
+  app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
+  app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+};
+const handleMasksUpdate = (skyMask, earthMask, app) => {
+  const lang = getLocale();
+  let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
+  if (skyMask) {
+    if ("isShow" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].visible`, Boolean(skyMask.isShow));
+    }
+
+    if (skyMask.icon) {
+      app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.icon);
+    } else {
+      app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
+    }
+    if ("scale" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].scale`, skyMask.scale);
+    }
+    if ("antidistorted" in skyMask) {
+      app.krpanoDom.set(`hotspot[peaklogo].distorted`, skyMask.antidistorted);
+    }
+  }
+  if (earthMask) {
+    if ("isShow" in earthMask) {
+      app.krpanoDom.set(`hotspot[nadirlogo].visible`, Boolean(skyMask.isShow));
+    }
+    if (earthMask.icon) {
+      app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.icon);
+    }
+    if ("scale" in earthMask) {
+      app.krpanoDom.set(`hotspot[nadirlogo].scale`, earthMask.scale);
+    }
+    if ("antidistorted" in earthMask) {
+      app.krpanoDom.set(
+        `hotspot[nadirlogo].distorted`,
+        earthMask.antidistorted
+      );
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-view/src/sdk/QJKanKan/modules/Scene.js

@@ -70,7 +70,7 @@ export default class Scene extends Emiter {
         },
 
         onready: (pano) => {
-          console.log("pano", pano);
+          // console.log("pano", pano);
           this.emit("ready");
         },
         onerror: function (error) {

packages/qjkankan-view/src/store/modules/scene.js

@@ -71,7 +71,7 @@ export default {
     customTelephone: (state, getters, rootState, rootGetters) => {
       let metadata = getters.metadata;
       if (metadata.customButton) {
-        console.log(metadata.customButton);
+        // console.log(metadata.customButton);
         let temp = JSON.parse(JSON.stringify(metadata.customButton));
         const res = covertCustomButton(temp);
         return temp.find((item) => item.type == "phone");
@@ -88,19 +88,13 @@ export default {
     },
 
     earthMask: (state, getters) => {
-      let metadata = getters.metadata;
-      if (metadata.customMask && metadata.customMask.earth) {
-        return metadata.customMask.earth;
-      }
-      return null;
+      const { earth } = getters.currentScene.customMask;
+      return earth || null;
     },
 
     skyMask: (state, getters) => {
-      let metadata = getters.metadata;
-      if (metadata.customMask && metadata.customMask.sky) {
-        return metadata.customMask.sky;
-      }
-      return null;
+      const { sky } = getters.currentScene.customMask;
+      return sky || null;
     },
   },
   mutations: {

packages/qjkankan-view/src/utils/debuggerHelper.js

@@ -2,7 +2,7 @@
 import { useToast } from "vue-toastification";
 
 export const debuggerHelper = (show = true) => {
-  const version = "1.5.1--" + process.env.VUE_APP_DEBBUG_FLAG;
+  const version = "1.6.0--" + process.env.VUE_APP_DEBBUG_FLAG;
   if (show) {
     // log.setColors({
     var css = "background: #28b561; color:#fff;font-size:14px;padding:5px;";