@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/ColorSpace/App.vue

@@ -10,7 +10,7 @@ const router = useRouter();
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    window.JsView?.setGlobalConfig({
+    window.JsvCoreApi?.setRenderGlobalConfig({
       texCache: -1,
     });
 
@@ -67,7 +67,7 @@ const onKeyDown = (ev) => {
             :src="pngDemo"
           />
           <div class="underFont">
-            {{ `png有透明图片\nRGB_565下透明部分为黑色` }}
+            {{ `png有透明图片\nandroid透明部分为黑色\nwebassembly全为黑色 ` }}
           </div>
         </div>
 
@@ -79,7 +79,7 @@ const onKeyDown = (ev) => {
             :src="pngNoAlphaDemo"
           />
           <div class="underFont">
-            {{ `png无透明图片` }}
+            {{ `png无透明图片\nwebassembly为黑色` }}
           </div>
         </div>
       </div>
@@ -123,4 +123,4 @@ const onKeyDown = (ev) => {
   color: #ffffff;
   font-size: 20;
 }
-</style>
+</style>

package/CoupletsTest/App.vue

@@ -317,7 +317,7 @@ import leadWire from "./widget/images/leadWire.png";
 import sparkPng from "./widget/Sprite/spark.png";
 
 const ammo =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/App/star2.png";
 //页码
 let myIndex = shallowRef(1);
 

package/CoupletsTest/widget/Banger/Banger.vue

@@ -109,11 +109,11 @@ import {
 import { _formatInfo } from "../Common/SpriteDeal";
 
 const leadWire =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/leadWire.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/Banger/leadWire.png";
 const sparkPng =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/spark.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/Banger/spark.png";
 const sparkJson =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/spark.json";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/Banger/spark.json";
 
 //预加载
 const preload_info = [buildPreloadInfo(leadWire), buildPreloadInfo(sparkPng)];

package/CoupletsTest/widget/Banger/MaroonLoader.vue

@@ -27,15 +27,15 @@ const props = defineProps({
 
 const maroonResource = {
   star1:
-    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/redStar.png",
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/redStar.png",
   star2:
-    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/yellowStar.png",
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/yellowStar.png",
   star3:
-    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/purpleStar.png",
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/purpleStar.png",
   firecrackerPng:
-    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/firecracker.png",
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/firecracker.png",
   firecrackerJson:
-    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/firecracker.json",
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/firecracker.json",
   firecrackerSet: {
     info: shallowRef(null),
     viewSize: shallowRef(null),

package/CoupletsTest/widget/Couplets/Couplets.vue

@@ -109,13 +109,13 @@ const props = defineProps({
 });
 let myShow = shallowRef(false);
 const Couplets =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/Couplets.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/Couplets.png";
 const scrollPng =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/scroll.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/scroll.png";
 const scrollJson =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/scroll.json";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/scroll.json";
 const scroll =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/scroll1.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/scroll1.png";
 
 //预加载
 const preload_info = [

package/CoupletsTest/widget/Fireworks/Fireworks.vue

@@ -161,33 +161,33 @@ const props = defineProps({
 
 //火花图片素材
 const group1_1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_1.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group1_1.png";
 const group1_2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group1_2.png";
 const group2_1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_1.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group2_1.png";
 const group2_2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group2_2.png";
 const group3_1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_1.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group3_1.png";
 const group3_2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group3_2.png";
 const group4_1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_1.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group4_1.png";
 const group4_2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group4_2.png";
 const group5_1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_1.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group5_1.png";
 const group5_2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/group5_2.png";
 //弹药图片素材(请按需修改)
 const ammo =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/star2.png";
 //精灵图素材
 const fireworksPng =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.png";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/fireworks.png";
 const fireworksJson =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.json";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Fireworks/Fireworks/fireworks.json";
 
 //运动距离
 let moveDistance = 260;

package/CssPreprocessor/Stylus/components/stylus-group1/StylusOperations.vue

@@ -19,7 +19,6 @@ export default {
 
 <style scoped lang="stylus">
 .stylus-op {
-  color: #001100 * 16;
   font-size: 20 - 6;
 
   left: 10;

package/CssPreprocessor/utils/ContentBlock.vue

@@ -44,10 +44,10 @@ const titleStyle = {
 
 <template>
   <div :style=props.style>
-    <div class="container-font" :style=titleStyle>
+    <div class="container-config" :style=titleStyle>
       {{ title }}
     </div>
-    <div class="content-font" :style="{
+    <div class="content-config" :style="{
       top: titleStyle.lineHeight,
       width: props.style.width, height: props.style.height - 18,
       backgroundColor: 'rgba(0,0,0,' + blockOpacity + ')'
@@ -59,5 +59,5 @@ const titleStyle = {
 
 <style>
 /* css文件要单独放到没有scoped设置的style标签中，规避css属性redefine的warning */
-@import "./FontStyle.css";
+@import "./FontConfig.css";
 </style>  

package/CssPreprocessor/utils/{FontStyle.css → FontConfig.css}

@@ -1,18 +1,18 @@
 
-.title-font {
+.title-config {
   color:#877c4a;
   font-family: 黑体;
   font-size: 16;
   text-align: center;
 }
 
-.container-font {
+.container-config {
   color: #FFFFFF;
   font-family: 黑体;
   font-size: 16;
 }
 
-.content-font {
+.content-config {
   color: #000000;
   font-family: 黑体;
   font-size: 10;

package/CssPreprocessor/utils/TitleBar.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 <template>
   <div>
     <template v-for="(title, index) in props.titleData" :key="index">
-      <div class='title-font title-range' :style="{ left: props.style.width * index }">
+      <div class='title-config title-range' :style="{ left: props.style.width * index }">
         {{ title }}
       </div>
     </template>
@@ -25,5 +25,5 @@ const props = defineProps({
 </style>
 <style>
 /* css文件要单独放到没有scoped设置的style标签中，规避css属性redefine的warning */
-@import "./FontStyle.css";
+@import "./FontConfig.css";
 </style>

package/CustomShader/App.vue

@@ -8,10 +8,10 @@ import gaussianBlurShader from "./gaussianBlur.glsl?raw";
 // import testShader from "./test.glsl?raw";
 
 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 ImagePanda = "https://oss.image.qcast.cn/ai-draw/panda.jpeg";
-const ImageOwl = "https://oss.image.qcast.cn/ai-draw/owl.jpeg";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/BackgroundLongmao.jpg";
+const ImageLandscape = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/landscape.jpeg";
+const ImagePanda = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const ImageOwl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
 
 const cShaderSettings = [
   {
@@ -112,11 +112,11 @@ const onKeyDown = (ev) => {
 };
 
 onMounted(() => {
-  window.JsView?.enableFpsDisplay(true);
+  window.JsvCoreApi.enableFpsDisplay(true);
 });
 
 onUnmounted(() => {
-  window.JsView?.enableFpsDisplay(false);
+  window.JsvCoreApi.enableFpsDisplay(false);
 });
 </script>
 

package/CustomShader/gaussianBlur.glsl

@@ -12,7 +12,7 @@ int myMod(int a, int b) {
 
 vec4 blur(sampler2D sp, vec2 U, vec2 scale) {
   vec4 O = vec4(0);
-  int s = samples / sLOD;
+  const int s = samples / sLOD;
 
   for(int i = 0; i < s * s; i++) {
     vec2 d = vec2(myMod(i, s), i / s) * float(sLOD) - float(samples) / 2.;

package/DashPath/App.vue

@@ -0,0 +1,79 @@
+<template>
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundColor: '#007788',
+      }"
+    >
+      <!-- 带缺口的矩形 -->
+      <DashPath
+        :points="[
+          { x: 200, y: 0 }, // 右上角
+          { x: 200, y: 100 }, // 右边中点（缺口处）
+          { x: 150, y: 100 }, // 缺口上边
+          { x: 150, y: 150 }, // 缺口左边
+          { x: 0, y: 150 }, // 左下角
+          { x: 0, y: 0 }, // 左上角
+        ]"
+        :dash="[5, 5]"
+        :phase="0"
+        color="#FF0000"
+        :lineWidth="2"
+        :layout="{
+          left: 50,
+          top: 50,
+          width: 250,
+          height: 200,
+        }"
+      />
+
+      <!-- 三角形 -->
+      <DashPath
+        :points="[
+          { x: 100, y: 0 }, // 顶点
+          { x: 200, y: 150 }, // 右下角
+          { x: 0, y: 150 }, // 左下角
+        ]"
+        :dash="[15, 8]"
+        :phase="2"
+        color="#00FF00"
+        :lineWidth="4"
+        :layout="{
+          left: 350,
+          top: 50,
+          width: 250,
+          height: 200,
+        }"
+      />
+
+      <!-- 凸字形 -->
+      <DashPath
+        :points="[
+          { x: 0, y: 0 }, // 左上角
+          { x: 200, y: 0 }, // 右上角
+          { x: 200, y: 150 }, // 右下角
+          { x: 150, y: 150 }, // 右凹进点
+          { x: 150, y: 50 }, // 凹进上点
+          { x: 50, y: 50 }, // 凹进左上点
+          { x: 50, y: 150 }, // 凹进左下点
+          { x: 0, y: 150 }, // 左下角
+        ]"
+        :dash="[20, 10]"
+        :phase="5"
+        color="#0088FF"
+        :lineWidth="3"
+        :layout="{
+          left: 650,
+          top: 50,
+          width: 250,
+          height: 200,
+        }"
+      />
+    </div>
+  </template>
+  
+  <script setup>
+  import DashPath from "./DashPath.vue";
+  </script>
+  

package/DashPath/AppForOperator.vue

@@ -0,0 +1,35 @@
+<template>
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundColor: '#007788',
+      }"
+    >
+      <!-- 带缺口的矩形 -->
+      <DashPath
+        :points="[
+          { x: 200, y: 0 }, // 右上角
+          { x: 200, y: 100 }, // 右边中点（缺口处）
+          { x: 150, y: 100 }, // 缺口上边
+          { x: 150, y: 150 }, // 缺口左边
+          { x: 0, y: 150 }, // 左下角
+          { x: 0, y: 0 }, // 左上角
+        ]"
+        :dash="[5, 5]"
+        color="#FF0000"
+        :lineWidth="2"
+        :layout="{
+          left: 150,
+          top: 150,
+          width: 250,
+          height: 200,
+        }"
+      />
+    </div>
+  </template>
+  
+  <script setup>
+  import DashPath from "./DashPath.vue";
+  </script>
+  

package/DashPath/DashPath.vue

@@ -0,0 +1,118 @@
+<template>
+  <div :style="{ ...layout, backgroundImage: `url(jsvtexturestore://${sourceId})` }" />
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "jsview";
+import { onBeforeUnmount, computed } from "vue";
+
+const props = defineProps({
+  // 点数组，每个点包含 x 和 y 坐标
+  points: {
+    type: Array,
+    required: true,
+    validator: (value) => {
+      return value.every(point => 'x' in point && 'y' in point);
+    }
+  },
+  // 虚线配置，例如 [10, 5] 表示10px实线，5px空白
+  dash: {
+    type: Array,
+    default: () => [10, 10]
+  },
+  // 虚线起始位置偏移
+  phase: {
+    type: Number,
+    default: 0
+  },
+  // 线条颜色
+  color: {
+    type: String,
+    default: "#FFFFFF"
+  },
+  // 线条宽度
+  lineWidth: {
+    type: Number,
+    default: 2
+  },
+  // 布局样式
+  layout: {
+    type: Object,
+    required: true
+  }
+});
+
+// 计算坐标系调整值和画布尺寸
+const canvasInfo = computed(() => {
+  const xValues = props.points.map(p => p.x);
+  const yValues = props.points.map(p => p.y);
+  
+  // 找出最小坐标值
+  const minX = Math.min(...xValues);
+  const minY = Math.min(...yValues);
+  
+  // 计算偏移量（考虑线宽）
+  const offsetX = minX < 0 ? Math.abs(minX) : 0;
+  const offsetY = minY < 0 ? Math.abs(minY) : 0;
+  const lineOffset = Math.ceil(props.lineWidth / 2);
+  
+  // 计算画布尺寸（考虑线宽）
+  const width = Math.max(...xValues) - minX + props.lineWidth * 2;
+  const height = Math.max(...yValues) - minY + props.lineWidth * 2;
+  
+  return {
+    offsetX: offsetX + lineOffset,
+    offsetY: offsetY + lineOffset,
+    width,
+    height
+  };
+});
+
+// 创建画布纹理
+let sourceId = '';
+const canvasRef = JsvTextureStoreApi.canvasTexture(
+  canvasInfo.value.width,
+  canvasInfo.value.height
+);
+
+// 绘制透明背景
+canvasRef.drawColor("rgba(0,0,0,0)");
+
+// 创建自定义路径
+const path = canvasRef.customPath();
+
+// 移动到第一个调整后的点
+if (props.points.length > 0) {
+  const firstPoint = props.points[0];
+  path.moveTo(
+    firstPoint.x + canvasInfo.value.offsetX,
+    firstPoint.y + canvasInfo.value.offsetY
+  );
+  
+  // 连接后续的调整后的点
+  for (let i = 1; i < props.points.length; i++) {
+    const point = props.points[i];
+    path.lineTo(
+      point.x + canvasInfo.value.offsetX,
+      point.y + canvasInfo.value.offsetY
+    );
+  }
+  path.close();
+}
+
+// 使用虚线样式绘制路径
+path.strokeWithSetting({
+  lineWidth: props.lineWidth,
+  color: props.color,
+  dash: props.dash,
+  phase: props.phase
+});
+
+// 提交纹理并获取sourceId
+sourceId = canvasRef.commit();
+
+// 组件卸载时清理纹理
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script> 

package/DemoForOperator/AnimPic/AnimPic.vue

@@ -0,0 +1,47 @@
+<template>
+  <JsvApic2 ref="apicRef" :src="`url(${src})`" :style="layout" />
+</template>
+
+<script setup>
+import { JsvApic2, LoopType, ApicEndState } from "jsview";
+import { shallowRef, onMounted } from "vue";
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  repeat: {
+    type: [String, Number],
+    default: 0,
+  },
+  layout: {
+    type: Object,
+  },
+});
+
+const apicRef = shallowRef();
+onMounted(() => {
+  let loopType = LoopType.LOOP_DEFAULT;
+  let loopInfo = undefined;
+  if (typeof props.repeat == "number") {
+    if (props.repeat >= 0) {
+      loopType = LoopType.LOOP_FINITE;
+      loopInfo = props.repeat;
+    } else {
+      loopType = LoopType.LOOP_INFINITE;
+    }
+  } else if (typeof props.repeat == "string") {
+    switch (props.repeat) {
+      case "default":
+        loopType = LoopType.LOOP_DEFAULT;
+        break;
+      case "infinite":
+        loopType = LoopType.LOOP_INFINITE;
+        break;
+    }
+  } else {
+    throw new Error("AnimPic props.repeat must be number or string.");
+  }
+  apicRef.value.play(loopType, loopInfo, ApicEndState.LAST_FRAME);
+});
+</script>

package/DemoForOperator/AnimPic/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <anim-pic
+    :src="webpImage"
+    :repeat="3"
+    :layout="{
+      left: 50,
+      top: 50,
+      width: 300,
+      height: 300,
+    }"
+  ></anim-pic>
+  <anim-pic
+    :src="gifImage"
+    :repeat="'infinite'"
+    :layout="{
+      left: 350,
+      top: 50,
+      width: 300,
+      height: 300,
+    }"
+  ></anim-pic>
+</template>
+<script setup>
+import AnimPic from "./AnimPic.vue";
+
+const webpImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/AnimPic/App/animated_webp.webp";
+const gifImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/AnimPic/App/girl_run.gif";
+</script>

package/DemoForOperator/Banger/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <Banger
+    :top="50"
+    :left="500"
+    :num="16"
+    :leadWireTime="4"
+    :width="100"
+    :starSrcs="starSrcs"
+    :bangerSpriteSrc="bangerSpriteSrc"
+    :leadWireSrc="leadWireSrc"
+    :sparkSpriteSrc="sparkSpriteSrc"
+  ></Banger>
+</template>
+<script setup>
+import Banger from "./Banger/Banger.vue";
+
+const star1 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/redStar.png";
+const star2 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/yellowStar.png";
+const star3 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/purpleStar.png";
+const bangerSpriteSrc = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/firecracker.png";
+
+const leadWireSrc = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/leadWire.png";
+const sparkSpriteSrc = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/spark.png";
+
+const starSrcs = [star1, star2, star3];
+</script>