@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/MindMap/data.js

@@ -8,6 +8,7 @@ const n = (left, top) => {
     id: id++,
   };
 };
+
 export const data = {
   ...n(400, 500),
   moveType: "star",
@@ -57,16 +58,22 @@ export const data = {
           ...n(600, 400),
           children: [
             {
-              ...n(700, 400)
+              ...n(700, 400),
+              children: [
+                {
+                  ...n(800, 400),
+                  children: [
+                    {
+                      ...n(900, 400)
+                    }
+                  ]
+                }
+              ]
             }
           ]
         },
-        {
-          ...n(600, 500)
-        },
-        {
-          ...n(600, 600)
-        },
+        n(600, 500),
+        n(600, 600),
       ]
     },
     {
@@ -83,4 +90,23 @@ export const data = {
       ]
     },
   ]
-}
+}
+
+// export const data = {
+//   ...n(100, 100),
+//   moveType: "star",
+//   children: [
+//     {
+//       ...n(0, 100),
+//     },
+//     {
+//       ...n(100, 0),
+//     },
+//     {
+//       ...n(200, 100),
+//     },
+//     {
+//       ...n(100, 200),
+//     },
+//   ]
+// }

package/Parkour/appConfig/jsview.config.mjs

@@ -16,10 +16,6 @@ export default {
     cookies: {
       domain: '' // 当非null非空时，激活cookie功能，使ajax请求时自动带上cookies，并且document.cookie的get/set可用
     },
-
-    // (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，
-    // 用于image/import.then的相对寻址, vue3默认值是/js/
-    jsSubPath: '/js/'
   },
 
   vendorConfig: {

package/PosterPacker/App.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { onMounted, onUnmounted, ref, computed, shallowRef } from "vue";
+import Vortex from "./tools/vortexPacker/Vortex.vue";
+import Genie from "./tools/geniePakcer/Genie.vue";
+import particlePacker from "./tools/particlePacker/Particle.vue";
+import orange from "./images/orange.png";
+import pink from "./images/pink.png";
+import red from "./images/red.png";
+import yellowGreen from "./images/yellowGreen.png";
+import blue from "./images/blue.png";
+import darkGreen from "./images/darkGreen.png";
+import purple from "./images/purple.png";
+//particle特效图片素材
+const ImgData = [orange, pink, red, yellowGreen, blue, darkGreen, purple];
+
+const ImageChinChilla =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+const ImageLandscape = "https://oss.image.qcast.cn/ai-draw/landscape.jpeg";
+const ImageOwl = "https://oss.image.qcast.cn/ai-draw/owl.jpeg";
+//旋涡子组件的引用
+const cChildRef1 = ref(null);
+//genie子组件的引用
+const cChildRef2 = ref(null);
+const cShaderSettings = [
+  {
+    name: "vortex",
+    text: "左右键切换效果，【OK】键随机焦点开始",
+  },
+  {
+    name: "genie",
+    text: "【OK】键进行收或放。上下键切换样例点",
+  },
+  {
+    name: "particle",
+    text: "左右键切换效果 遮罩粒子组件",
+  },
+];
+
+const rKeyCount = ref(2);
+const rShaderInfo = computed(() => {
+  return cShaderSettings[rKeyCount.value];
+});
+
+//genie组件测试数组（14个）
+//index
+let rPositionIndex = shallowRef(0);
+//key值
+let rKey = shallowRef(1);
+//数组
+const cPositionArray = [
+  { x: -80, y: -60, direction: "horizontal" }, //左上横向
+  { x: -80, y: -60, direction: "vertical" }, //左上纵向
+  { x: 280, y: -60, direction: "vertical" }, //正上
+  { x: 1080, y: -60, direction: "horizontal" }, //右上横向
+  { x: 1080, y: -60, direction: "vertical" }, //右上纵向
+  { x: -80, y: 270, direction: "horizontal" }, //正左
+  { x: 1080, y: 270, direction: "horizontal" }, //正右
+  { x: -80, y: 600, direction: "horizontal" }, //左下横向
+  { x: -80, y: 600, direction: "vertical" }, //左下纵向
+  { x: 280, y: 600, direction: "vertical" }, //正下
+  { x: 1080, y: 600, direction: "horizontal" }, //右下横向
+  { x: 1080, y: 600, direction: "vertical" }, //右下纵向
+  { x: 200, y: 200, direction: "vertical" }, //内部纵向
+  { x: 700, y: 500, direction: "horizontal" }, //内部横向
+];
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37: {
+      rKeyCount.value =
+        rKeyCount.value > 1 ? rKeyCount.value - 1 : rKeyCount.value;
+      return true;
+    }
+    case 39: {
+      rKeyCount.value =
+        rKeyCount.value < cShaderSettings.length - 1
+          ? rKeyCount.value + 1
+          : rKeyCount.value;
+      return true;
+    }
+    case 13: {
+      if (rKeyCount.value == 0) {
+        cChildRef1.value.getRandomDecimal();
+      } else {
+        cChildRef2.value.switcher();
+      }
+
+      return true;
+    }
+    case 38: {
+      if (rKeyCount.value == 1) {
+        rPositionIndex.value =
+          rPositionIndex.value == 0 ? 0 : (rPositionIndex.value -= 1);
+        rKey.value += 1;
+        console.log(rPositionIndex.value);
+      }
+      return true;
+    }
+    case 40: {
+      if (rKeyCount.value == 1) {
+        rPositionIndex.value =
+          rPositionIndex.value == cPositionArray.length - 1
+            ? cPositionArray.length - 1
+            : (rPositionIndex.value += 1);
+        rKey.value += 1;
+        console.log(rPositionIndex.value);
+      }
+      return true;
+    }
+    default:
+      return false;
+  }
+};
+const myEnd = () => {
+  console.log("动画结束");
+};
+onMounted(() => {
+  window.JsView?.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  window.JsView?.enableFpsDisplay(false);
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage: `url(${ImageChinChilla})`,
+    }"
+  ></jsv-focus-block>
+  <Vortex
+    v-if="rKeyCount == 0"
+    ref="cChildRef1"
+    :width="640"
+    :height="360"
+  ></Vortex>
+  <Genie
+    :key="rKey"
+    v-else-if="rKeyCount == 1"
+    ref="cChildRef2"
+    :width="1024"
+    :height="576"
+    :left="128"
+    :top="72"
+    :direction="cPositionArray[rPositionIndex].direction"
+    :position="cPositionArray[rPositionIndex]"
+    :time="1"
+    :imgUrl="ImageLandscape"
+    :aniEnd="myEnd"
+    :initShow="true"
+  ></Genie>
+  <div v-else>
+    <div
+      :style="{
+        width: 600,
+        height: 300,
+        top: 210,
+        left: 340,
+        backgroundImage: ImageOwl,
+      }"
+    ></div>
+    <particlePacker
+      :style="{
+        width: 600,
+        height: 300,
+        top: 210,
+        left: 340,
+      }"
+      :imgArray="ImgData"
+    >
+    </particlePacker>
+  </div>
+
+  <div
+    :key="rKeyCount"
+    :style="{
+      top: 100,
+      left: 20,
+      width: 560,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    {{ `${rShaderInfo.name}(${rPositionIndex})` }}
+  </div>
+  <div
+    :style="{
+      top: 150,
+      left: 20,
+      width: 560,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    {{ rShaderInfo.text }}
+  </div>
+</template>