@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/DemoForOperator/Firework1/Fireworks.vue

@@ -1,11 +1,4 @@
-<!--
- * 【模块 export 内容】
- * Fireworks：放烟花组件
- *      props说明:
- *          left          {Number}   烟花Left位置
- *          top           {Number}   烟花Top位置 
- * 
--->
+
 <template>
   <JsvPreload
     :preloadList="preload_info"
@@ -154,10 +147,62 @@ import {
 } from "jsview";
 import { _formatInfo } from "./SpriteDeal";
 import { shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
+
+/**
+ * 组件属性定义
+ */
 const props = defineProps({
-  top: { type: Number, require: true },
-  left: { type: Number, require: true },
-  srcConfig: { type: Object, require: true },
+  /**
+   * 烟花中心顶部位置
+   * @type {Number}
+   * @required
+   * @default undefined
+   * @unit px
+   */
+  top: { 
+    type: Number, 
+    require: true 
+  },
+  
+  /**
+   * 烟花中心左侧位置
+   * @type {Number}
+   * @required
+   * @default undefined
+   * @unit px
+   */
+  left: { 
+    type: Number, 
+    require: true 
+  },
+  
+  /**
+   * 资源路径配置对象
+   * @type {Object}
+   * @required
+   * @property {String} group1_1 粒子效果组1-1图片路径
+   * @property {String} group1_2 粒子效果组1-2图片路径
+   * @property {String} group2_1 粒子效果组2-1图片路径
+   * @property {String} group2_2 粒子效果组2-2图片路径
+   * @property {String} group3_1 粒子效果组3-1图片路径
+   * @property {String} group3_2 粒子效果组3-2图片路径
+   * @property {String} group4_1 粒子效果组4-1图片路径
+   * @property {String} group4_2 粒子效果组4-2图片路径
+   * @property {String} group5_1 粒子效果组5-1图片路径
+   * @property {String} group5_2 粒子效果组5-2图片路径
+   * @property {String} ammo 弹药轨迹图片路径
+   * @property {String} fireworkSpriteSrc 烟花精灵图路径
+   */
+  srcConfig: { 
+    type: Object, 
+    require: true 
+  },
+  onShoot: {
+    type: Function,
+  },
+  onExplode: {
+    type: Function,
+  }
 });
 
 //火花图片素材
@@ -197,6 +242,7 @@ const spray = () => {
   timer.id2 = setTimeout(() => {
     let randomIndex = Math.floor(Math.random() * sprayArray.length);
     sprayArray[randomIndex].value = true;
+    onExplode()
     timer.id = setInterval(() => {
       let remainingItems = sprayArray.filter((item) => !item.value);
       if (remainingItems.length === 0) {
@@ -205,6 +251,7 @@ const spray = () => {
       } else {
         randomIndex = Math.floor(Math.random() * remainingItems.length);
         remainingItems[randomIndex].value = true;
+        onExplode();
       }
     }, 100);
   }, 500);
@@ -316,6 +363,14 @@ for (let i = 1; i <= 5; i++) {
   remainingGroups.splice(randomIndex, 1);
 }
 
+const onShoot = () => {
+  props.onShoot?.();
+}
+
+const onExplode = () => {
+  props.onExplode?.();
+}
+
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
     myShow.value = true;
@@ -337,11 +392,13 @@ watch(readyNum, (n, o) => {
             cmds.action().stopMoving(),
             () => {
               isSpray.value = true;
+              onExplode();
               isShow.value = false;
               spray();
             },
           ]),
       ]);
+      onShoot();
     }, 0);
   }
 });

package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue

@@ -17,6 +17,7 @@
       :shaderStr="shaderSetting.shader"
       :autoplay="true"
       :textures="shaderSetting.textures"
+      :loadComfirmed="true"
       :onEnd="onAnimEnd"
     ></jsv-frag-shader-view>
 
@@ -63,18 +64,39 @@ import {
 } from "jsview";
 
 const props = defineProps({
+  /**
+   * 布局配置对象（必填）
+   * @type {Object}
+   * @property {number} left - 组件左侧位置（单位：px）
+   * @property {number} top - 组件顶部位置（单位：px）
+   * @property {number} width - 组件宽度（单位：px）
+   * @property {number} height - 组件高度（单位：px）
+   */
   layout: {
     type: Object,
     required: true,
   },
+
+  /**
+   * 翻页动画持续时间（单位：秒）
+   * @type {number}
+   * @default 1
+   */
   duration: {
     type: Number,
     default: 1,
   },
+
+  /**
+   * 初始显示状态
+   * @type {boolean}
+   * @default true
+   * @description true表示初始显示内容，false表示初始隐藏内容
+   */
   initShow: {
     type: Boolean,
     default: true,
-  },
+  }
 });
 
 const showOrigin = shallowRef(props.initShow);
@@ -137,6 +159,13 @@ function capture() {
 }
 
 defineExpose({
+  /**
+   * 切换显示/隐藏状态
+   * @method
+   * @description 触发翻页动画切换：
+   * - 当前显示时调用会执行翻出动画
+   * - 当前隐藏时调用会执行翻入动画
+   */
   switch() {
     if (state == 0) {
       state = 1;

package/DemoForOperator/Focus/Alpha/AlphaFocusBox.vue

@@ -6,32 +6,57 @@
     :centerWidth="2"
     :imageDspWidth="sampleImageWidth"
     :borderOutset="borderWidth"
-    animation="breath 2s infinite"
+    :animation="anim"
   />
 </template>
 <script setup>
 import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
-import { onBeforeUnmount } from "vue";
+import { onBeforeUnmount, computed } from "vue";
 
 const props = defineProps({
+  /**
+   * 焦点框颜色
+   * @type {string}
+   */
   color: {
     type: String,
   },
+  /**
+   * 布局样式对象
+   * @type {Object}
+   */
   layout: {
     type: Object,
   },
+  /**
+   * 边框宽度
+   * @type {number}
+   */
   borderWidth: {
     type: Number,
   },
+  /**
+   * 呼吸动画周期时长（单位：秒）
+   * @type {number}
+   */
   duration: {
     type: Number
   },
+  /**
+   * 圆角半径
+   * @type {number}
+   * @default 10
+   */
   borderRadius: {
     type: Number,
     default: 10,
   }
 });
 
+const anim = computed(() => {
+  return props.duration ? `breath ${props.duration}s infinite` : 'breath 2s infinite';
+});
+
 let canvasRef;
 let circleRadius = props.borderRadius;
 let sampleImageWidth = circleRadius * 2 + props.borderWidth + 2;

package/DemoForOperator/Focus/Alpha/Item.vue

@@ -46,6 +46,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       明暗

package/DemoForOperator/Focus/Light/Item.vue

@@ -47,6 +47,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       旋转光

package/DemoForOperator/Focus/Light/LightFocusBox.vue

@@ -15,30 +15,71 @@
 
 <script setup>
 import RotateFrame from "./utils/RotateFrame.vue";
+
 const props = defineProps({
+  /**
+   * 聚焦框使用的图片资源路径
+   * @type {String}
+   * @required
+   */
   src: {
     type: String,
     required: true,
   },
+
+  /**
+   * 布局位置和尺寸配置
+   * @type {Object}
+   * @property {number} left - 左侧定位（单位：像素）
+   * @property {number} top - 顶部定位（单位：像素）
+   * @property {number} width - 容器宽度（单位：像素）
+   * @property {number} height - 容器高度（单位：像素）
+   */
   layout: {
     type: Object,
   },
+
+  /**
+   * 边框线宽（单位：像素）
+   * @type {Number}
+   * @default 6
+   */
   borderWidth: {
     type: Number,
     default: 6,
   },
+
+  /**
+   * 边框圆角半径（单位：像素）
+   * @type {Number}
+   */
   borderRadius: {
     type: Number,
   },
+
+  /**
+   * 边框旋转一周所需时间（单位：秒）
+   * @type {Number}
+   */
   circleTime: {
-    //秒
     type: Number,
   },
+
+  /**
+   * 是否显示光晕效果
+   * @type {Boolean}
+   */
   withHalo: {
     type: Boolean,
   },
 });
 
+/**
+ * 纹理坐标最大视图尺寸配置
+ * @type {Object}
+ * @property {number} width - 最大视图宽度
+ * @property {number} height - 最大视图高度
+ */
 const texCoord = {
   width: 500,
   height: 500,

package/DemoForOperator/Focus/Normal/Item.vue

@@ -46,6 +46,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       普通

package/DemoForOperator/Focus/Normal/NormalFocusBox.vue

@@ -12,17 +12,25 @@
 import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
 import { onBeforeUnmount } from "vue";
 
+/** 
+ * 定义组件属性
+ * @type {Props}
+ */
 const props = defineProps({
+  /** @type {String} 边框颜色 */
   color: {
     type: String,
   },
+  /** @type {Object} 布局样式配置 */
   layout: {
     type: Object
   },
+  /** @type {Number} 边框宽度（默认3像素） */
   borderWidth: {
     type: Number,
     default: 3,
   },
+  /** @type {Number} 圆角半径（默认0像素） */
   borderRadius: {
     type: Number,
     default: 0
@@ -47,6 +55,10 @@ canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
 customPath.stroke(circleLineWidth, props.color); // 以给定线宽绘制圆环
 const sourceId = canvasRef.commit(); // texture和div的textureStore绑定
 
+/**
+ * 组件卸载前的清理操作
+ * @listens onBeforeUnmount
+ */
 onBeforeUnmount(() => {
   JsvTextureStoreApi.deleteTexture(sourceId);
 });

package/DemoForOperator/FrameShadow/App.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#FFF0F0' }" />
+    <div :style="{ left: 100, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth"
+        :height="vTargetRectHeight"
+        :borderRadius="vTargetRectRaidus"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+    <div :style="{ left: 450, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth1"
+        :height="vTargetRectHeight1"
+        :borderRadius="vTargetRectRaidus1"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth1,
+          height: vTargetRectHeight1,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus1,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth1,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus1}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+    <div :style="{ left: 800, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth2"
+        :height="vTargetRectHeight2"
+        :borderRadius="vTargetRectRaidus2"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth2,
+          height: vTargetRectHeight2,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus2,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth2,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus2}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 100, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth"
+        :height="vTargetRectHeight"
+        :borderRadius="vTargetRectRaidus"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 450, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth1"
+        :height="vTargetRectHeight1"
+        :borderRadius="vTargetRectRaidus1"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth1,
+          height: vTargetRectHeight1,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus1,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth1,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus1}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 800, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth2"
+        :height="vTargetRectHeight2"
+        :borderRadius="vTargetRectRaidus2"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth2,
+          height: vTargetRectHeight2,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus2,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth2,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus2}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { JsvFlexDiv } from "jsview";
+import FrameShadow from "./FrameShadow.vue";
+
+// 圆角为45的矩形样例
+const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus = 45; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 圆角为13的矩形样例
+const vTargetRectWidth1 = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight1 = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus1 = 13; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 最小圆角尺寸样例，在此框架下不能低于4
+const vTargetRectWidth2 = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight2 = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus2 = 4; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+</script>

package/DemoForOperator/FrameShadow/FrameShadow.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <JsvNinePatch
+      :style="{
+        width: props.width,
+        height: props.height,
+      }"
+      :imageUrl="vImageUrl"
+      :imageWidth="vImageWidth"
+      :centerWidth="cCenterWidth"
+      :imageDspWidth="vImageDspWidth"
+      :borderOutset="vBorderOutset"
+    />
+  </div>
+</template>
+
+<script setup>
+import { JsvNinePatch } from "jsview";
+
+// 接收宽高作为props
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  borderRadius: {
+    type: Number,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: "surround",
+  },
+});
+
+// 图片资源映射
+const cImageMaps = {
+  surround:
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow.png",
+  down: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow-down.png",
+};
+const vImageUrl = cImageMaps[props.type];
+if (vImageUrl === undefined) {
+  vImageUrl = cImageMaps["surround"];
+}
+
+// 图片固定属性
+const cInnerRadius2 = 92; // 原始图片的内直径(也是右边图矩形的边长值)
+const cCenterWidth = 2; // 图片的中心repeat宽度
+const cInnerRadius = (cInnerRadius2 - cCenterWidth) / 2; // 原始图片圆角半径
+const cSampleImageWidth = 200; // 原始图形的画布尺寸，画布为正方形
+
+// 计算后的对应NinePatch参数
+let vBorderOutset = (cSampleImageWidth - cInnerRadius2) / 2; // 设置值为图片长度减去内直径除以2
+let vImageWidth = cSampleImageWidth; // 原图尺寸设置
+let vImageDspWidth = (props.borderRadius / cInnerRadius) * cSampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
+</script>

package/DemoForOperator/FullscreenIn/App.vue

@@ -100,6 +100,6 @@ onMounted(() => {
     v-if="fullScreenVisibility"
     :src="imageUrl"
     :width="1280"
-    :duration="800"
+    :duration="0.8"
   ></fullscreen-poster>
 </template>

package/DemoForOperator/FullscreenIn/FullscreenPoster.vue

@@ -10,24 +10,39 @@
 
 <script setup>
 const props = defineProps({
+  /**
+   * 图片资源地址
+   * @type {String}
+   * @required
+   */
   src: {
     type: String,
     required: true,
   },
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @default 0.8
+   */
   duration: {
     type: Number,
-    default: 800,
+    default: 0.8,
   },
+  /**
+   * 图片显示宽度（单位：像素）
+   * @type {Number}
+   * @required
+   */
   width: {
     type: Number,
     required: true,
   },
 });
 
-const animStr = `fade-in ${props.duration / 1000}s`;
+const animStr = `fade-in ${props.duration}s`;
 </script>
 
-<style scopped>
+<style scoped>
 @keyframes fade-in {
   from {
     opacity: 0;