@shijiu/jsview-vue-samples 2.1.200 → 2.1.340-test.0

package/CoupletsTest/Sprite/scroll.json

@@ -0,0 +1,76 @@
+{"frames": [
+
+{
+	"filename": "01.png",
+	"frame": {"x":0,"y":0,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "02.png",
+	"frame": {"x":280,"y":0,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "03.png",
+	"frame": {"x":0,"y":30,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "04.png",
+	"frame": {"x":280,"y":30,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "05.png",
+	"frame": {"x":0,"y":60,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "06.png",
+	"frame": {"x":280,"y":60,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "07.png",
+	"frame": {"x":0,"y":90,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+},
+{
+	"filename": "08.png",
+	"frame": {"x":280,"y":90,"w":280,"h":30},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":280,"h":30},
+	"sourceSize": {"w":280,"h":30}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "����.png",
+	"format": "RGBA8888",
+	"size": {"w":560,"h":120},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:d628bb5ee32423e3182ff3fed396f679$"
+}
+}

package/CoupletsTest/Sprite/spark.json

@@ -0,0 +1,268 @@
+{"frames": [
+
+{
+	"filename": "火星000.png",
+	"frame": {"x":0,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星001.png",
+	"frame": {"x":130,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星002.png",
+	"frame": {"x":260,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星003.png",
+	"frame": {"x":390,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星004.png",
+	"frame": {"x":520,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星005.png",
+	"frame": {"x":650,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星006.png",
+	"frame": {"x":780,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星007.png",
+	"frame": {"x":910,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星008.png",
+	"frame": {"x":1040,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星009.png",
+	"frame": {"x":1170,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星010.png",
+	"frame": {"x":1300,"y":0,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星011.png",
+	"frame": {"x":0,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星012.png",
+	"frame": {"x":130,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星013.png",
+	"frame": {"x":260,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星014.png",
+	"frame": {"x":390,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星015.png",
+	"frame": {"x":520,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星016.png",
+	"frame": {"x":650,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星017.png",
+	"frame": {"x":780,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星018.png",
+	"frame": {"x":910,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星019.png",
+	"frame": {"x":1040,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星020.png",
+	"frame": {"x":1170,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星021.png",
+	"frame": {"x":1300,"y":130,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星022.png",
+	"frame": {"x":0,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星023.png",
+	"frame": {"x":130,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星024.png",
+	"frame": {"x":260,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星025.png",
+	"frame": {"x":390,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星026.png",
+	"frame": {"x":520,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星027.png",
+	"frame": {"x":650,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星028.png",
+	"frame": {"x":780,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星029.png",
+	"frame": {"x":910,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星030.png",
+	"frame": {"x":1040,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+},
+{
+	"filename": "火星031.png",
+	"frame": {"x":1170,"y":260,"w":130,"h":130},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":130,"h":130},
+	"sourceSize": {"w":130,"h":130}
+}],
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "火星1.png",
+	"format": "RGBA8888",
+	"size": {"w":1430,"h":390},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:d5f882130258f98a64f58cb8ed7c6892:7e6dc8bd8bb6ca3a3b52f49fa498af1e:e573f7d0271baa5852351b87eaa7b9c8$"
+}
+}

package/DemoHomepage/components/BodyFrame.vue

@@ -4,13 +4,13 @@ import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
-let mw = shallowRef(null)
+let mw = shallowRef(null);
 const props = defineProps({
   data: Array,
   name: String,
   onEdge: Function,
   tabId: Number,
-})
+});
 
 const direction = VERTICAL;
 const width = 1280;
@@ -23,7 +23,7 @@ const measures = (item) => {
     height: item.height,
     focusable: item.focusable,
   };
-}
+};
 
 const itemClick = (index, data) => {
   if (!data.path) {
@@ -33,11 +33,11 @@ const itemClick = (index, data) => {
   router.push(data.path);
   localStorage.curFocusId = index;
   localStorage.curTab = props.tabId;
-}
+};
 
 const _provideData = () => {
   return props.data;
-}
+};
 
 if (typeof localStorage.curFocusId !== "undefined") {
   initFocusId.value = parseInt(localStorage.curFocusId);
@@ -54,18 +54,34 @@ watch(
 </script>
 
 <template>
-  <metro-widget ref="mw" :name="props.name" :width="width" :height="height" :direction="direction" :provideData="_provideData"
-    :enableTouch="true" :measures="measures" :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-    :onEdge="props.onEdge" :initFocusId="initFocusId">
+  <metro-widget
+    ref="mw"
+    :name="props.name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :provideData="_provideData"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="props.onEdge"
+    :initFocusId="initFocusId"
+  >
     <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item :style="{
+      <Item
+        :style="{
           width: data.width,
           height: data.height,
           backgroundColor: data.backgroundColor,
           color: '#000000',
-        }" :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" :itemClick="itemClick">
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemClick="itemClick"
+      >
         {{ data.name }}
       </Item>
     </template>
   </metro-widget>
-</template>
+</template>

package/DemoHomepage/router.js

@@ -16,6 +16,17 @@ let routeList = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  {
+    name: '连接线Demo',
+    path: '/feature/ConnectLine',
+    component: () => import('jsview-vue-samples/ConnectLine/App.vue')
+
+  },
+  {
+    name: '离散焦点分布',
+    path: '/feature/DispersedItemSample',
+    component: () => import('jsview-vue-samples/DispersedItemSample/DispersedItemSample.vue')
+  },
   {
     name: '饼图测试',
     path: '/feature/SecTorTest',
@@ -167,6 +178,11 @@ let routeList = [
     path: '/feature/Preload',
     component: () => import('jsview-vue-samples/Preload/App.vue'),
   },
+  {
+    name: '单图片透明',
+    path: '/feature/ViewOpacity',
+    component: () => import('jsview-vue-samples/ViewOpacity/App.vue'),
+  },
   {
     name: '图片缩小算法',
     path: '/feature/ScaleDownNeon',
@@ -252,11 +268,11 @@ let routeList = [
     path: '/feature/JsvLine',
     component: () => import('jsview-vue-samples/JsvLine/App.vue'),
   },
-  {
-    name: 'FreeMove示例',
-    path: '/feature/FreeMove',
-    component: () => import('jsview-vue-samples/FreeMove/App.vue'),
-  },
+  // {
+  //   name: 'FreeMove示例',
+  //   path: '/feature/FreeMove',
+  //   component: () => import('jsview-vue-samples/FreeMove/App.vue'),
+  // },
   {
     name: '思维导图示例',
     path: '/feature/MindMap',
@@ -266,6 +282,20 @@ let routeList = [
     name: 'latex公式',
     path: '/feature/LatexFormula',
     component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
+  },{
+    name: 'Swiper3dTest',
+    path: '/Operations/Swiper3D',
+    component: () => import('jsview-vue-samples/SwiperTest/App.vue'),
+  },
+  {
+    name: '进度条',
+    path: '/Game/ProgressBar',
+    component: () => import('jsview-vue-samples/ProgressBar/App.vue'),
+  },
+  {
+    name:'春联测试',
+    path:'/Game/CoupletsTest',
+    component: () => import('jsview-vue-samples/CoupletsTest/App.vue'),
   }
 ];
 

package/DemoHomepage/views/Homepage.vue

@@ -141,7 +141,7 @@ onDeactivated(() => {
     <div class="address">
       {{ address }}
     </div>
-    <div class="logo">{{ 'JsView-Vue3 (Vite3) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
+    <div class="logo">{{ 'JsView-Vue3 (Vite5) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
 
     <jsv-focus-block
       autoFocus

package/DispersedItemSample/DispersedItemSample.vue

@@ -0,0 +1,138 @@
+<template>
+  <jsv-focus-block :onAction="{ onFocus: mainFocus }" name="main">
+    <div class="bgStyle">
+      <DispersedItemWidget
+        name="dispersed"
+        :data="data"
+        :initFocusId="2"
+        :onEdge="onEdge"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <Item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          ></Item>
+        </template>
+      </DispersedItemWidget>
+      <!-- 提示 -->
+      <div class="focusText">{{ "初始聚焦: 第2项" }}</div>
+      <div class="opText">
+        {{
+          "操作提示：按上下左右键进行焦点切换，按【OK】键对当前聚焦项进行变色，按【返回】键退出。"
+        }}
+      </div>
+      <div class="specialText">
+        {{ "第2项正常情况按右键应为第3项，通过SpecIndex重新设置到了第6项。" }}
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { useFocusHub } from "jsview";
+import { onMounted } from "vue";
+import Item from "./Item.vue";
+import DispersedItemWidget from "./DispersedItemWidget/DispersedItemWidget.vue";
+let focusHub = useFocusHub();
+const data = [
+  {
+    width: 200,
+    height: 100,
+    left: 60,
+    top: 400,
+    color: "#FF1213",
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 380,
+    top: 420,
+    color: "#FF1213",
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 700,
+    top: 360,
+    color: "#FF1213",
+    SpecIndex: {
+      right: 6,
+    },
+  },
+  {
+    width: 300,
+    height: 200,
+    left: 900,
+    top: 500,
+    color: "#FF1213",
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 1060,
+    top: 200,
+    color: "#FF1213",
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 760,
+    top: 60,
+    color: "#FF1213",
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 1060,
+    top: 380,
+    color: "#FF1213",
+  },
+];
+
+const mainFocus = () => {
+  focusHub.setFocus("dispersed");
+};
+
+const onEdge = () => {
+  console.log("到边缘了无法移动");
+};
+onMounted(() => {
+  focusHub.setFocus("main");
+});
+</script>
+
+<style lang="scss" scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.focusText {
+  width: 200;
+  height: 26;
+  font-size: 24;
+  color: #ffffff;
+  line-height: 26;
+  left: 30;
+}
+.opText {
+  width: 400;
+  height: 90;
+  font-size: 24;
+  color: #ffffff;
+  line-height: 26;
+  top: 40;
+  left: 30;
+}
+.specialText {
+  width: 400;
+  height: 90;
+  font-size: 24;
+  color: #ffffff;
+  line-height: 26;
+  top: 150;
+  left: 30;
+}
+</style>