@shijiu/jsview-vue-samples 2.1.435 → 2.1.476-test.0

package/BasicFocusControl/App.vue

@@ -35,9 +35,8 @@
 
 <script setup>
 import { useRouter } from "vue-router";
-import { onMounted } from "vue"
 import MainArea from "./components/MainArea.vue";
-import { useFocusHub } from "jsview"
+import { useFocusHub } from "jsview";
 
 const router = useRouter();
 const onKeyDown = (ev) => {
@@ -51,12 +50,7 @@ const onKeyDown = (ev) => {
 };
 
 window.DebugMyHub = useFocusHub();
-
-onMounted(()=>{
-  // 通过NameSpace进行全局设置
-  window.DebugMyHub.setFocus("main.R1C1");
-});
-
+window.DebugMyHub.enableFocusTrace(); // 激活焦点变化堆栈
 </script>
 
 <template>
@@ -64,7 +58,7 @@ onMounted(()=>{
   <jsv-focus-block :onKeyDown="onKeyDown">
     <div class="title">可上下左右切换焦点</div>
     <div class="body">
-      <MainArea/>
+      <MainArea />
     </div>
   </jsv-focus-block>
 </template>
@@ -86,4 +80,4 @@ onMounted(()=>{
   left: 100;
   top: 120;
 }
-</style>
+</style>

package/DemoHomepage/router.js

@@ -43,6 +43,11 @@ let routeList = [
     path: '/feature/TextureStoreTest',
     component: () => import('jsview-vue-samples/TextureStoreTest/App.vue'),
   },
+  {
+    name: 'NinePatch对齐测试',
+    path: '/feature/NinePatchTester',
+    component: () => import('jsview-vue-samples/NinePatchTester/App.vue'),
+  },
   {
     name: 'NativeSharedView测试',
     path: '/feature/TestNativeSharedView',

package/FilterDemo/VideoLayer.vue

@@ -1,5 +1,8 @@
 <script setup>
-import { JsvPlayer, globalLoadJsvPlayerPlugin } from "jsview";
+import {
+  JsvPlayer,
+  globalLoadJsvPlayerPlugin,
+} from "@shijiu/jsview-vue/utils/JsViewPlugin/JsvPlayer";
 
 const props = defineProps({
   top: {
@@ -20,9 +23,9 @@ const props = defineProps({
   },
 });
 
-globalLoadJsvPlayerPlugin((status)=>{
+globalLoadJsvPlayerPlugin((status) => {
   console.log("JsvPlayer plugin load status: " + status);
-})
+});
 
 // const video_url = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20210207/52fae4231350c85fec605b47bbe479c5.mp4";
 const video_url =
@@ -63,4 +66,4 @@ const video_url =
       }"
     />
   </div>
-</template>
+</template>

package/MindMap/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { JsvMindMap } from "jsview";
+import { onMounted } from "vue"
+import { JsvMindMap, useFocusHub } from "jsview";
 import Item from "./Item.vue";
 import { data } from "./data"
 
@@ -7,6 +8,8 @@ const provideData = () => {
   return data;
 };
 
+const focusHub = useFocusHub();
+
 const lineColor = {
   0: "#ff0000",
   1: "#00ff00",
@@ -33,10 +36,16 @@ const formatNode = (item, depth) => {
 const onEdge = (info) => {
   console.log("onEdge ", info);
 };
+
+const componentName = "mindMapDemo";
+onMounted(() => {
+  focusHub.setFocus(componentName);
+})
 </script>
 
 <template>
   <jsv-mind-map
+    :name="componentName"
     :left="200"
     :top="100"
     :width="500"

package/NinePatchTester/App.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="bgStyle">
+    <div :style="{ top: 50, left: 80 }">
+      <div
+        :style="{
+          top: (sampleImageWidth - innerRadius2) / 2,
+          left: (sampleImageWidth - innerRadius2) / 2,
+          width: innerRadius2,
+          height: innerRadius2,
+          fontSize: 10,
+          textAlign: 'center',
+          lineHeight: innerRadius2,
+          backgroundColor: '#FF0000',
+        }"
+      >
+        {{ `圆环内径方形${innerRadius2}x${innerRadius2}` }}
+      </div>
+      <div
+        :style="{
+          width: sampleImageWidth,
+          height: sampleImageWidth,
+          backgroundImage: `jsvtexturestore://${sourceId}`,
+        }"
+      />
+      <div
+        :style="{
+          top: sampleImageWidth + 5,
+          width: sampleImageWidth,
+          height: 12,
+          fontSize: 10,
+          textAlign: 'center',
+          lineHeight: 12,
+        }"
+      >
+        {{ `NinePatch原图尺寸 ${sampleImageWidth}x${sampleImageWidth}` }}
+      </div>
+    </div>
+
+    <div :style="{ top: 50, left: 80 + sampleImageWidth + 20 }">
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(255,0,0)',
+        }"
+      />
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(0,100,200)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{
+            `需要外框对齐的带圆角矩形\n\nborderRadius = 圆环内径 / 2\n= ${innerRadius2} / 2`
+          }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div
+      :style="{
+        top: 50,
+        left: 80 + sampleImageWidth + 20 + vTargetRectWidth + 20,
+      }"
+    >
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(0,100,200)',
+        }"
+      />
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(0,0,255)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      />
+      <JsvNinePatch
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+        }"
+        :imageUrl="`jsvtexturestore://${sourceId}`"
+        :imageWidth="vImageWidth"
+        :centerWidth="vCenterWidth"
+        :imageDspWidth="vImageDspWidth"
+        :borderOutset="vBorderOutset"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{
+            `带圆角矩形 和 NinePatch图形伸缩\n\nborderOutset = (原图高 - 圆环内径) / 2\n= (${sampleImageWidth} - ${innerRadius2}) / 2\n\ncenterWidth = 1`
+          }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onBeforeUnmount } from "vue";
+import { JsvNinePatch, JsvTextureStoreApi, JsvFlexDiv } from "jsview";
+
+// 调试参数输入设定
+const innerRadius2 = 110; // 最右边图片的内直径(也是右边图矩形的边长值)
+const circleLineWidth = 10; // 最右边图的边缘粗细
+const sampleImageWidth = 148; // 最右边图形的画布尺寸，画布为正方形
+
+const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight = 300; // 需要对齐区域的矩形高
+const vTargetRectRaidus = innerRadius2 / 2; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 计算后的对应NinePatch参数
+let vBorderOutset = (sampleImageWidth - innerRadius2) / 2; // 设置值为图片长度减去内直径除以2
+let vImageWidth = sampleImageWidth; // 原图尺寸设置
+let vImageDspWidth = sampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
+let vCenterWidth = 1; // 圆形的.9图, 中心固定为1
+
+// 设置设定模拟绘制.9图
+let canvasRef;
+let sourceId = shallowRef("");
+canvasRef = JsvTextureStoreApi.canvasTexture(
+  sampleImageWidth,
+  sampleImageWidth
+); // 创建画布
+
+let circleRadius =
+  Math.floor(innerRadius2 / 2) + Math.floor(circleLineWidth / 2); // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
+let customPath = canvasRef.circlePath(
+  Math.floor(sampleImageWidth / 2),
+  Math.floor(sampleImageWidth / 2),
+  circleRadius
+); // 创建圆环绘制路径，圆形在画布的中心点位置
+canvasRef.drawColor("rgba(200,200,200,0.5)"); // 画布绘制半透明底色
+customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
+sourceId.value = canvasRef.commit(); // texture和div的textureStore绑定
+
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId.value); // 释放texture资源
+});
+</script>
+
+<style lang="css" scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #819864;
+}
+</style>

package/SceneTransition/App.vue

@@ -7,6 +7,7 @@
     <div class="bgStyle">
       <div :style="{ width: 640, height: 360, backgroundImage: bg, top: 100 }">
         <JsvSceneTransition
+          ref="control"
           v-show="isShow"
           :imageUrl="fly1"
           :ArraySet="SelectArray"
@@ -21,7 +22,7 @@
       </div>
       <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
       <div class="text" :style="{ left: 400, top: 500 }">
-        {{ "按需采用碎片式的图片来进行遮罩，此例只展示一组遮罩素材。" }}
+        {{ "按需采用碎片式的图片来进行遮罩，此例只展示当前随机这组遮罩素材。" }}
       </div>
       <!-- 报错小框 -->
       <div v-if="boxSwitch" class="smallBox">
@@ -49,111 +50,13 @@
         }"
       ></div>
       <div
+        v-for="(item, index) in SelectArray"
         :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[0].url,
-          top: 500,
-          left: 700,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[1].url,
-          top: 500,
-          left: 800,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[2].url,
-          top: 500,
-          left: 920,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[3].url,
-          top: 550,
-          left: 700,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[4].url,
-          top: 550,
-          left: 820,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[5].url,
-          top: 550,
-          left: 920,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[6].url,
-          top: 600,
-          left: 700,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[7].url,
-          top: 600,
-          left: 770,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 80,
-          height: 60,
-          backgroundImage: ArraySet1[8].url,
-          top: 600,
-          left: 860,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 60,
-          height: 60,
-          backgroundImage: ArraySet1[9].url,
-          top: 600,
-          left: 930,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 30,
-          height: 30,
-          backgroundImage: ArraySet1[10].url,
-          top: 590,
-          left: 950,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 40,
-          height: 60,
-          backgroundImage: ArraySet1[11].url,
-          top: 600,
-          left: 980,
+          width: Math.round((item.width / 1280) * 320),
+          height: Math.round((item.height / 720) * 180),
+          backgroundImage: item.url,
+          top: 500 + Math.round(((item.top * 1.05) / 720) * 180),
+          left: 700 + Math.round(((item.left * 1.05) / 1280) * 320),
         }"
       ></div>
     </div>
@@ -163,7 +66,7 @@
 <script setup>
 import { shallowRef, onBeforeUnmount } from "vue";
 import { JsvPreload, buildPreloadInfo } from "jsview";
-import JsvSceneTransition from "./jsvSceneTransition.vue";
+import JsvSceneTransition from "./JsvSceneTransition.vue";
 import { ArraySet1 } from "./maskConfig/config1";
 import { ArraySet2 } from "./maskConfig/config2";
 import { ArraySet3 } from "./maskConfig/config3";
@@ -213,15 +116,18 @@ const randomSelect = () => {
   }
 };
 const SelectArray = randomSelect();
-
+let control = shallowRef(null);
+let down = shallowRef(false);
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
-    case 13:
-      if (isDone.value == true) {
+    //按方向键下，开始调用下垂运动状态的函数
+    case 40:
+      if (isDone.value == true && down.value == false) {
         bg.value = fly2;
-        onOff.value = true;
         isShow.value = true;
-      } else {
+        control.value.sag();
+        down.value = true;
+      } else if (isDone.value == false) {
         boxSwitch.value = true;
         timer.id = setTimeout(() => {
           boxSwitch.value = false;
@@ -230,6 +136,13 @@ const onKeyDown = (ev) => {
 
       break;
 
+    //按方向键上调用组件的恢复函数
+    case 38:
+      if (down.value == true) {
+        control.value.fireNeEvent();
+        down.value = false;
+      }
+      break;
     default:
       break;
   }

package/SceneTransition/JsvSceneTransition.vue

@@ -6,7 +6,9 @@
  *          displayWidth {Number}    (必填) 想要展示的宽度
  *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
  *          style        {Object}    (必填) 模板配置总长度和总宽度。(width,height)
- *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
+ *      defineExpose说明:
+ *          sag          {Function}  控制组件变成碎片进行下垂运动的方法
+ *          recover      {Function}  控制碎片还原的方法
 -->
 
 <template>
@@ -47,16 +49,17 @@
 </template>
 
 <script setup>
-import { JsvMaskClipDiv, JsvFreeMoveActor } from "jsview";
-import { onMounted, watch } from "vue";
+import { JsvMaskClipDiv, JsvFreeMoveActor, FreeMoveFunc } from "jsview";
+import { onMounted } from "vue";
 
 const props = defineProps({
   imageUrl: { type: String, require: true },
   displayWidth: { type: Number, require: true },
   ArraySet: { type: Array, require: true },
   style: { type: Object, require: true },
-  onOff: { type: Boolean, require: true },
 });
+
+let interactNexus = FreeMoveFunc.newNexus();
 //FreeMove引用
 const refArray = [];
 const controlArray = new Array(props.ArraySet.length).fill(null);
@@ -76,16 +79,9 @@ props.ArraySet.forEach((item, index) => {
     y: centerY,
   });
 });
+//召回点坐标队列
+let recallArray = new Array(props.ArraySet.length);
 
-//监听控制开关的值
-watch(
-  () => props.onOff,
-  (n, o) => {
-    if (n == true) {
-      MoveFunc();
-    }
-  }
-);
 //Y轴方向随机初速度
 const randomYArray = [-60, -70, -80];
 const randomSelect = () => {
@@ -98,8 +94,8 @@ const randomSelect = () => {
     return randomYArray[2];
   }
 };
-//运动函数
-const MoveFunc = () => {
+//往下运动函数
+const sag = () => {
   centerItemArray.forEach((item, index) => {
     if (center.x - item.x <= Math.abs(60)) {
       controlArray[index].run([
@@ -149,19 +145,65 @@ const MoveFunc = () => {
         controlArray[index]
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([
+            controlArray[index].action().stopMoving(),
+          ]),
       ]);
     }
+    //给所有运动物体创建onNexusEvent条件以便召回
+    controlArray[index].run([
+      controlArray[index]
+        .condition()
+        .onNexusEvent(interactNexus, 1001 + index)
+        .then([
+          (a) => {
+            //给还原数组赋值
+            recallArray[index] = {
+              x: a.xPos,
+              y: a.yPos,
+            };
+            recover(index);
+          },
+        ]),
+    ]);
+  });
+};
+
+const fireNeEvent = () => {
+  controlArray.forEach((item, index) => {
+    item.run([
+      item.action().stopMoving(),
+      item.state().fireNexusEvent(interactNexus, 1001 + index),
+    ]);
   });
 };
+//往回恢复的函数
+const recover = (index) => {
+  controlArray[index].run([
+    controlArray[index]
+      .action()
+      .moveTo(
+        0,
+        0,
+        (Math.abs(recallArray[index].x) * (recallArray[index].y / 15)) /
+          Math.abs(recallArray[index].y),
+        recallArray[index].y / 15,
+        () => {
+          controlArray[index].run([
+            controlArray[index].action().teleportTo(0, 0),
+            controlArray[index].state().clearAllConditions(),
+          ]);
+        }
+      ),
+  ]);
+};
+
 onMounted(() => {
   for (let i = 0; i < refArray.length; i++) {
     controlArray[i] = refArray[i].control;
   }
-  if (props.onOff == true) {
-    MoveFunc();
-  }
 });
+defineExpose({ sag, fireNeEvent });
 </script>
 
 <style scoped></style>

package/SpriteImage/App.vue

@@ -23,10 +23,15 @@
  -->
 
 <script setup>
-import { JsvSpriteAnim, JsvSpriteLoader } from "jsview";
+import {
+  JsvSpriteAnim,
+  JsvSpriteLoader,
+  JsvSpriteStatic,
+  JsvSpriteTools,
+} from "jsview";
 import localSpriteImage from "./images/egg_break.png";
 import localConfigJson from "./images/egg_break.json";
-import { shallowRef } from "vue";
+import { shallowRef, watchEffect } from "vue";
 import { useRouter } from "vue-router";
 
 console.log(
@@ -40,7 +45,11 @@ let useLocalData = shallowRef(true);
 let animateImage = shallowRef(null);
 let preloadJsonUrl = shallowRef(null);
 let preloadCallback = shallowRef(null);
-let spriteJsonIfno = shallowRef(null);
+let spriteJsonInfo = shallowRef(null);
+let spriteOriginSize = shallowRef(null);
+let spriteStaticJsonInfo1 = shallowRef(null);
+let spriteStaticJsonInfo2 = shallowRef(null);
+let spriteStaticJsonInfo3 = shallowRef(null);
 
 const _UseLocalData = () => {
   console.log("using local data");
@@ -48,19 +57,29 @@ const _UseLocalData = () => {
   animateImage.value = `url(${localSpriteImage})`;
   preloadJsonUrl.value = null;
   preloadCallback.value = null;
-  spriteJsonIfno.value = _formatInfo(localConfigJson).info;
+  spriteJsonInfo.value = _formatInfo(localConfigJson).info;
+  _applyStaticInfo(spriteJsonInfo.value, currentStatiIndex);
+
+  // 调整设置的原图尺寸设置
+  const guessSize = JsvSpriteTools.guessOriginSize(spriteJsonInfo.value);
+  spriteOriginSize.value = guessSize;
 };
 
 const _UseRemoteData = () => {
   const testRemoteImageUrl = "http://192.168.2.179:8077/images/egg_break.png";
   const testRemoteConfigUrl = "http://192.168.2.179:8077/images/egg_break.json";
 
-  console.log("using remote data");
   useLocalData.value = false;
   animateImage.value = testRemoteImageUrl;
   preloadJsonUrl.value = testRemoteConfigUrl;
   preloadCallback.value = (config_json, resolve_set) => {
-    spriteJsonIfno.value = _formatInfo(config_json).info;
+    spriteJsonInfo.value = _formatInfo(config_json).info;
+    _applyStaticInfo(spriteJsonInfo.value, currentStatiIndex);
+
+    // 调整设置的原图尺寸设置
+    const guessSize = JsvSpriteTools.guessOriginSize(spriteJsonInfo.value);
+    spriteOriginSize.value = guessSize;
+
     resolve_set(); // 通知loader数组设置完成
   };
 };
@@ -82,9 +101,51 @@ const _formatInfo = (config_json) => {
       source: config_json.frames[i].frame,
     });
   }
+
   return { info };
 };
 
+const _applyStaticInfo = (wholeJsonInfo, index) => {
+  let length = wholeJsonInfo.frames.length;
+  // 设置第一张静图
+  let useIndex = index % length;
+  spriteStaticJsonInfo1.value = {
+    frames: [wholeJsonInfo.frames[useIndex]],
+    meta: {
+      size: wholeJsonInfo.meta.size,
+    },
+  };
+
+  // 设置第二张静图
+  useIndex = (index + 1) % length;
+  spriteStaticJsonInfo2.value = {
+    frames: [wholeJsonInfo.frames[useIndex]],
+    meta: {
+      size: wholeJsonInfo.meta.size,
+    },
+  };
+
+  // 设置第三张静图
+  useIndex = (index + 2) % length;
+  spriteStaticJsonInfo3.value = {
+    frames: [wholeJsonInfo.frames[useIndex]],
+    meta: {
+      size: wholeJsonInfo.meta.size,
+    },
+  };
+};
+
+let staticFromIndex = shallowRef(0);
+let currentStatiIndex = 0;
+watchEffect(() => {
+  if (staticFromIndex.value != currentStatiIndex) {
+    currentStatiIndex = staticFromIndex.value;
+    if (spriteJsonInfo.value != null) {
+      _applyStaticInfo(spriteJsonInfo.value, currentStatiIndex);
+    }
+  }
+});
+
 const spriteController = shallowRef(null);
 
 let show = shallowRef(true);
@@ -96,6 +157,9 @@ const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
+  } else if (ev.keyCode == 13) {
+    // 静态引用信息变化
+    staticFromIndex.value++;
   }
   return true;
 };
@@ -114,28 +178,75 @@ _UseLocalData();
       onKeyDown: onKeyDown,
     }"
   >
+    <div class="bgStyle" />
+
+    <!-- 静态精灵图测试 -->
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 100,
+        top: 75,
+        width: 280,
+        height: 100,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      {{ "精灵图效果(静态)\nOK键切换图组" }}
+    </div>
+    <JsvSpriteLoader
+      :imageUrl="animateImage"
+      :configUrl="preloadJsonUrl"
+      :noNeedResource="useLocalData"
+    >
+      <div :style="{ left: 140, top: 175 }">
+        <JsvSpriteStatic
+          :spriteInfo="spriteStaticJsonInfo1"
+          :viewSize="{ w: 200 }"
+          :spriteFrameSize="spriteOriginSize"
+          :imageUrl="animateImage"
+        />
+      </div>
+      <div :style="{ left: 140, top: 325 }">
+        <JsvSpriteStatic
+          :spriteInfo="spriteStaticJsonInfo2"
+          :viewSize="{ w: 200 }"
+          :spriteFrameSize="spriteOriginSize"
+          :imageUrl="animateImage"
+        />
+      </div>
+      <div :style="{ left: 140, top: 505 }">
+        <JsvSpriteStatic
+          :spriteInfo="spriteStaticJsonInfo3"
+          :viewSize="{ w: 200 }"
+          :spriteFrameSize="spriteOriginSize"
+          :imageUrl="animateImage"
+        />
+      </div>
+    </JsvSpriteLoader>
+
+    <!-- 动态精灵图测试 -->
     <div
       :style="{
         textAlign: 'center',
         fontSize: 30,
         lineHeight: 50,
         color: '#ffffff',
-        left: 200,
+        left: 460,
         top: 100,
-        width: 434,
+        width: 280,
         height: 50,
         backgroundColor: 'rgba(27,38,151,0.8)',
       }"
     >
-      精灵图效果
+      精灵图效果(动态)
     </div>
     <!--
                 通过show进行 清理精灵图，用于验证精灵图清理后，StyleSheet中cssRules的keyFrame清理工作能正常完成
             -->
-    <div
-      v-if="show"
-      :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }"
-    >
+    <div v-show="show" :style="{ left: 460, top: 150 }">
       <JsvSpriteLoader
         :imageUrl="animateImage"
         :configUrl="preloadJsonUrl"
@@ -144,9 +255,11 @@ _UseLocalData();
       >
         <JsvSpriteAnim
           ref="spriteController"
-          :spriteInfo="spriteJsonIfno"
+          :spriteInfo="spriteJsonInfo"
           :loop="3"
           :duration="0.8"
+          :viewSize="{ w: 280 }"
+          :spriteFrameSize="spriteOriginSize"
           :autostart="true"
           :onAnimEnd="spriteAnimEnd"
           :imageUrl="animateImage"
@@ -160,7 +273,7 @@ _UseLocalData();
         fontSize: 30,
         lineHeight: 50,
         color: '#ffffff',
-        left: 700,
+        left: 800,
         top: 100,
         width: 434,
         height: 50,
@@ -171,7 +284,7 @@ _UseLocalData();
     </div>
     <div
       :style="{
-        left: 700,
+        left: 800,
         top: 150,
         width: 434,
         height: 372,
@@ -180,3 +293,11 @@ _UseLocalData();
     />
   </jsv-focus-block>
 </template>
+
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #4d5e8c;
+}
+</style>

package/TextureStoreTest/App.vue

@@ -123,9 +123,8 @@
 </template>
 
 <script setup>
-import JsvNinePatch from "@shijiu/jsview-vue/utils/JsViewVueWidget/JsvNinePatch.vue";
 import { shallowRef, onBeforeUnmount } from "vue";
-import { JsvTextureStoreApi } from "jsview";
+import { JsvTextureStoreApi, JsvNinePatch } from "jsview";
 let canvasRef;
 let canvasRef2;
 let canvasRef3;
@@ -190,7 +189,7 @@ const multiColorSet = {
   color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
   position: [0, 0.3, 0.8, 1],
 };
- canvasRef4.drawLinearGradientRect(
+canvasRef4.drawLinearGradientRect(
   0,
   0,
   0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.435",
+  "version": "2.1.476-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",