@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/ColorSpace/App.vue

@@ -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>

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/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 = [
   {

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,80 @@
+<template>
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundColor: '#007788',
+      }"
+    >
+      <!-- 带缺口的矩形 -->
+      <JsvDashPath
+        :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,
+        }"
+      />
+
+      <!-- 三角形 -->
+      <JsvDashPath
+        :points="[
+          { x: -50, y: -50 }, // 顶点
+          { x: 50, y: -50 }, // 右下角
+          { x: 50, y: 150 }, // 左下角
+        ]"
+        :dash="[15, 8]"
+        :phase="2"
+        color="#00FF00"
+        :lineWidth="4"
+        :layout="{
+          left: 350,
+          top: 100,
+        }"
+      />
+      <div :style="{
+        left: 350,
+        top: 100,
+        width: 5,
+        height: 5,
+        backgroundColor: '#00FF00',
+      }"></div>
+
+      <!-- 凸字形 -->
+      <JsvDashPath
+        :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="10"
+        :layout="{
+          left: 650,
+          top: 50,
+        }"
+      />
+    </div>
+  </template>
+  
+  <script setup>
+  import { JsvDashPath } from "jsview";
+</script>
+  

package/DashPath/AppForOperator.vue

@@ -0,0 +1,33 @@
+<template>
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundColor: '#007788',
+      }"
+    >
+      <!-- 带缺口的矩形 -->
+      <JsvDashPath
+        :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,
+        }"
+      />
+    </div>
+  </template>
+  
+  <script setup>
+  import { JsvDashPath } from "jsview";
+  </script>
+  

package/DemoForOperator/AnimPic/AnimPic.vue

@@ -0,0 +1,69 @@
+<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({
+  /**
+   * 动画资源路径（必填）
+   * @type {String}
+   * @required
+   */
+  src: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * 动画循环配置
+   * @type {Number|String}
+   * @default 0
+   * @property {Number} [>=0] - 有限循环次数（0表示不循环）
+   * @property {Number} [-1] - 无限循环
+   * @property {String} ['default'] - 使用动画默认循环设置
+   * @property {String} ['infinite'] - 无限循环
+   */
+  repeat: {
+    type: [String, Number],
+    default: 0, // 默认不循环
+  },
+
+  /**
+   * 布局样式配置
+   * @type {Object}
+   * @optional
+   */
+  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>