@shijiu/jsview-vue-samples 2.3.0 → 3.0.0-next-vue.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",
+};
+let 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;

package/DemoForOperator/Genie/App.vue

@@ -6,7 +6,7 @@
       onKeyDown,
     }"
   >
-    <Genie
+    <GenieSlot
       ref="cGenieRef"
       :width="width"
       :height="height"
@@ -16,7 +16,7 @@
       :position="position"
       :time="1"
       :onAnimEnd="onAnimEnd"
-      :initShow="true"
+      :initShow="false"
     >
       <img
         :src="`url(${imageUrl})`"
@@ -44,12 +44,12 @@
       >
         按OK键进场/出场
       </div>
-    </Genie>
+    </GenieSlot>
   </jsv-focus-block>
 </template>
 <script setup>
-import Genie from "./geniePakcer/Genie.vue";
-import { shallowRef } from "vue";
+import GenieSlot from "./geniePakcer/GenieSlot.vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 
 const cGenieRef = shallowRef();
 const position = { x: -80, y: 600 };
@@ -59,13 +59,27 @@ const imageUrl =
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
 
 let imgLoaded = false;
+let unmounted = false;
+
+onBeforeUnmount(()=>{
+  unmounted = true;
+})
+
 function onImgLoaded() {
-  imgLoaded = true;
+  // 进行setTimeout(1), 为了规避已加载的图片onLoad太早破坏了先绘制再截图的时序
+  setTimeout(()=>{
+    imgLoaded = true;
+    if (!unmounted) {
+      cGenieRef.value.switcher();
+    }
+  }, 1)
 }
+
 const onAnimEnd = () => {
   console.log("anim end");
 };
 
+
 function onKeyDown(ev) {
   if (ev.keyCode == 13) {
     if (imgLoaded) {

package/DemoForOperator/Genie/App2.vue

@@ -0,0 +1,61 @@
+<template>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+    <jsv-focus-block
+      autoFocus
+      :onAction="{
+        onKeyDown,
+      }"
+    >
+      <GenieImage
+        ref="cGenieRef"
+        :width="width"
+        :height="height"
+        :left="128"
+        :top="72"
+        direction="horizontal"
+        :position="position"
+        :time="1"
+        :onAnimEnd="onAnimEnd"
+        :initShow="false"
+        :imageUrl="imageUrl"
+      >
+       
+      </GenieImage>
+    </jsv-focus-block>
+  </template>
+  <script setup>
+  import GenieImage from "./geniePakcer/GenieImage.vue";
+  import { shallowRef, onBeforeUnmount, onMounted } from "vue";
+  
+  const cGenieRef = shallowRef();
+  const position = { x: -80, y: 600 };
+  const width = 1024;
+  const height = 576;
+  const imageUrl =
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+  
+  let imgLoaded = false;
+  let unmounted = false;
+  
+  onBeforeUnmount(()=>{
+    unmounted = true;
+  })
+  
+  const onAnimEnd = () => {
+    console.log("anim end");
+  };
+  
+  function onKeyDown(ev) {
+    if (ev.keyCode == 13) {
+      cGenieRef.value.switcher();
+      return true;
+    }
+    return false;
+  }
+
+  onMounted(()=>{
+    cGenieRef.value.switcher();
+  })
+
+  </script>
+