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

package/DashPath/App.vue

@@ -7,7 +7,7 @@
       }"
     >
       <!-- 带缺口的矩形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
           { x: 200, y: 0 }, // 右上角
           { x: 200, y: 100 }, // 右边中点（缺口处）
@@ -23,17 +23,15 @@
         :layout="{
           left: 50,
           top: 50,
-          width: 250,
-          height: 200,
         }"
       />
 
       <!-- 三角形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
-          { x: 100, y: 0 }, // 顶点
-          { x: 200, y: 150 }, // 右下角
-          { x: 0, y: 150 }, // 左下角
+          { x: -50, y: -50 }, // 顶点
+          { x: 50, y: -50 }, // 右下角
+          { x: 50, y: 150 }, // 左下角
         ]"
         :dash="[15, 8]"
         :phase="2"
@@ -41,14 +39,19 @@
         :lineWidth="4"
         :layout="{
           left: 350,
-          top: 50,
-          width: 250,
-          height: 200,
+          top: 100,
         }"
       />
+      <div :style="{
+        left: 350,
+        top: 100,
+        width: 5,
+        height: 5,
+        backgroundColor: '#00FF00',
+      }"></div>
 
       <!-- 凸字形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
           { x: 0, y: 0 }, // 左上角
           { x: 200, y: 0 }, // 右上角
@@ -62,18 +65,16 @@
         :dash="[20, 10]"
         :phase="5"
         color="#0088FF"
-        :lineWidth="3"
+        :lineWidth="10"
         :layout="{
           left: 650,
           top: 50,
-          width: 250,
-          height: 200,
         }"
       />
     </div>
   </template>
   
   <script setup>
-  import DashPath from "./DashPath.vue";
-  </script>
+  import { JsvDashPath } from "jsview";
+</script>
   

package/DashPath/AppForOperator.vue

@@ -7,7 +7,7 @@
       }"
     >
       <!-- 带缺口的矩形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
           { x: 200, y: 0 }, // 右上角
           { x: 200, y: 100 }, // 右边中点（缺口处）
@@ -22,14 +22,12 @@
         :layout="{
           left: 150,
           top: 150,
-          width: 250,
-          height: 200,
         }"
       />
     </div>
   </template>
   
   <script setup>
-  import DashPath from "./DashPath.vue";
+  import { JsvDashPath } from "jsview";
   </script>
   

package/DemoForOperator/AnimPic/AnimPic.vue

@@ -5,18 +5,40 @@
 <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,
+    default: 0, // 默认不循环
   },
+
+  /**
+   * 布局样式配置
+   * @type {Object}
+   * @optional
+   */
   layout: {
     type: Object,
-  },
+  }
 });
 
 const apicRef = shallowRef();

package/DemoForOperator/Banger/Banger/Banger.vue

@@ -109,15 +109,79 @@ import {
 import { _formatInfo } from "./SpriteDeal";
 
 const props = defineProps({
-  top: { type: Number, default: 0 },
-  left: { type: Number, default: 0 },
-  num: { type: Number, default: 12 },
-  width: { type: Number, require: true },
-  leadWireTime: { type: Number, require: true },
-  starSrcs: { type: Array },
-  bangerSpriteSrc: { type: String },
-  sparkSpriteSrc: { type: String },
-  leadWireSrc: { type: String },
+  /**
+   * 组件顶端中心Left位置（单位：px）
+   * @type {Number}
+   * @default 0
+   */
+  left: { 
+    type: Number, 
+    default: 0 
+  },
+  /**
+   * 组件顶端中心Top位置（单位：px）
+   * @type {Number}
+   * @default 0
+   */
+  top: { 
+    type: Number, 
+    default: 0 
+  },
+  /**
+   * 鞭炮个数（决定组件长度）
+   * @type {Number}
+   * @default 12
+   */
+  num: { 
+    type: Number, 
+    default: 12 
+  },
+  /**
+   * 组件整体宽度（单位：px）
+   * @type {Number}
+   * @requires true
+   */
+  width: { 
+    type: Number, 
+    require: true 
+  },
+  /**
+   * 引线燃烧时间（单位：秒）
+   * @type {Number}
+   * @requires true
+   */
+  leadWireTime: { 
+    type: Number, 
+    require: true 
+  },
+  /**
+   * 星星特效资源路径数组
+   * @type {Array}
+   */
+  starSrcs: { 
+    type: Array 
+  },
+  /**
+   * 鞭炮资源路径
+   * @type {String}
+   */
+  bangerSpriteSrc: { 
+    type: String 
+  },
+  /**
+   * 火花特效动画资源路径
+   * @type {String}
+   */
+  sparkSpriteSrc: { 
+    type: String 
+  },
+  /**
+   * 引线图片资源路径
+   * @type {String}
+   */
+  leadWireSrc: { 
+    type: String 
+  }
 });
 
 const leadWire = props.leadWireSrc;

package/DemoForOperator/Blur/Blur.vue

@@ -0,0 +1,146 @@
+<!--
+ * @file Blur.vue
+ * 
+ * 【模块 export 内容】
+ * Blur：Vue组件，用于显示模糊效果的纹理
+ *      layout {Object}: (必填)组件布局信息对象，包含组件的位置和尺寸
+ *                     格式为 {left: number, top: number, width: number, height: number}
+ *      showRectPos {Object}: (必填)显示内容相对于原图左上角的位置
+ *                     格式为 {left: number, top: number}
+ *      borderRadius {Number}: 边框圆角半径，默认值 0
+ *      textureInfo {Object}: (必填)纹理信息对象，一般是captureBlurTexture的返回值
+ *                     格式为 {textureId: string, width: number, height: number}
+ * 
+ * captureBlurTexture(divRef, blurRadius): 捕获模糊纹理的方法
+ *      divRef {HTMLElement}: 要捕获的DOM元素引用
+ *      blurRadius {Number}: 模糊半径
+ *      返回值 {Promise<Object>}: 包含纹理信息的Promise，格式为 {textureId: string, width: number, height: number}
+ * 
+ * 注意事项:
+ *      组件会根据传入的textureInfo自动计算变换和缩放
+ *      使用前需要先调用captureBlurTexture方法获取纹理信息
+ -->
+
+<template>
+  <jsv-texture-anim
+    :key="randomKey"
+    :src="sourceSrc"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :transform="translateTransform"
+    :borderRadius="borderRadius"
+  ></jsv-texture-anim>
+</template>
+<script setup>
+import { JsvTextureAnim } from "jsview";
+import { shallowRef, computed } from "vue";
+
+const randomKey = Math.random().toString(36).substring(2, 15);
+
+const props = defineProps({
+  /**
+   * @description 布局信息对象，包含组件的位置和尺寸
+   * @property {number} left - 组件左侧位置
+   * @property {number} top - 组件顶部位置
+   * @property {number} width - 组件宽度
+   * @property {number} height - 组件高度
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @description 显示内容相对于原图左上角的位置
+   * @property {number} left - 显示区域左侧位置
+   * @property {number} top - 显示区域顶部位置
+   */
+  showRectPos: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @description 边框圆角半径
+   * @default 0
+   */
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * @description 纹理信息对象, 一般是captureBlurTexture的返回值
+   * @property {string} textureId - 纹理ID
+   * @property {number} width - 纹理宽度
+   * @property {number} height - 纹理高度
+   */
+  textureInfo: {
+    type: Object,
+    required: true,
+  },
+});
+const sourceSrc = computed(() => {
+  console.log("sourceSrc", props.textureInfo?.textureId);
+  return props.textureInfo?.textureId
+    ? `jsvtexturestore://${props.textureInfo.textureId}`
+    : "";
+});
+const translateTransform = computed(() => {
+  const leftPercent =
+    ((-props.showRectPos.left -
+      (props.layout.width - props.textureInfo.width) / 2) /
+      props.layout.width) *
+    100;
+  const topPercent =
+    ((-props.showRectPos.top -
+      (props.layout.height - props.textureInfo.height) / 2) /
+      props.layout.height) *
+    100;
+  const xScale = props.textureInfo.width / props.layout.width;
+  const yScale = props.textureInfo.height / props.layout.height;
+  const r = `translate3d(${leftPercent.toFixed(2)}%, ${topPercent.toFixed(2)}%, 0) scale3d(${xScale.toFixed(2)}, ${yScale.toFixed(2)}, 1)`;
+  console.log("ccht translateTransform", r);
+  return r;
+});
+</script>
+
+<script>
+import { JsvTextureStoreApi, CaptureProcessType } from "jsview";
+/**
+ * @description 捕获模糊纹理
+ * @param {HTMLElement} divRef - 要捕获的DOM元素引用
+ * @param {number} blurRadius - 模糊半径
+ * @returns {Promise<Object>} 返回包含纹理信息的Promise
+ * @property {string} textureId - 捕获的纹理ID
+ * @property {number} width - 纹理宽度
+ * @property {number} height - 纹理高度
+ */
+export function captureBlurTexture(divRef, blurRadius) {
+  return new Promise((resolve, reject) => {
+    try {
+      JsvTextureStoreApi.capture2Texture(
+        divRef,
+        (textureName, autoRecycle, w, h) => {
+          console.log("ccht captureBlurTexture", textureName, autoRecycle, w, h);
+          if (textureName) {
+            resolve({
+              textureId: textureName,
+              width: w,
+              height: h,
+            });
+          } else {
+            reject(new Error("Failed to capture texture"));
+          }
+        },
+        true,
+        {
+          type: CaptureProcessType.Blur,
+          radius: blurRadius,
+        }
+      );
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+</script>

package/DemoForOperator/Blur/BlurInOut/BlurInOut.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import Blur, { captureBlurTexture } from "../Blur.vue";
+import StaticBgSlide from "./StaticBgSlide.vue";
+
+const vToCapture = shallowRef(null);
+const vTextureInfo = shallowRef(null);
+
+let isBlur = false;
+function enableBlur() {
+  if (isBlur) {
+    return;
+  }
+  isBlur = true;
+  captureBlurTexture(vToCapture.value, 12).then((textureInfo) => {
+    vTextureInfo.value = textureInfo;
+    setTimeout(() => {
+      curPosition.left = 0;
+      bgAnim.value?.slide(curPosition);
+    }, 0);
+  });
+}
+
+const ImagePanda =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+
+let curPosition = {
+  left: 0,
+  top: 0,
+};
+let width1 = 300;
+let height1 = 720;
+const bgAnim = shallowRef(null);
+const onKeyDown = (ev) => {
+  console.log("ccht", ev.keyCode);
+  switch (ev.keyCode) {
+    case 37:
+      if (isBlur) {
+        curPosition.left = -width1;
+        bgAnim.value?.slide(curPosition);
+      }
+
+      break;
+    case 39:
+      if (isBlur) {
+        curPosition.left = 0;
+        bgAnim.value?.slide(curPosition);
+      } else {
+        enableBlur();
+      }
+      break;
+    // case 38:
+    //   curPosition.top = curPosition.top - 100;
+    //   bgAnim.value?.slide(curPosition);
+    //   break;
+    // case 40:
+    //   curPosition.top = curPosition.top + 100;
+    //   bgAnim.value?.slide(curPosition);
+    //   break;
+    // case 13:
+    //   enableBlur();
+    //   break;
+    default:
+      break;
+  }
+};
+
+onMounted(() => {
+  // enableBlur();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      ref="vToCapture"
+      :style="{
+        width: 1280, // 截屏区域的宽
+        height: 720, // 截屏区域的高
+      }"
+    >
+      <div
+        :style="{
+          width: 1280,
+          height: 720,
+          backgroundImage: `url(${ImagePanda})`,
+        }"
+      />
+      <div
+        :style="{
+          top: 300,
+          width: 1280,
+          // height: 81,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          color: '#ffffff',
+          // fontSize: 68,
+          textAlign: 'center',
+          // lineHeight: 81,
+
+          height: 38,
+          lineHeight: 38,
+          fontSize: 36,
+          fontWeight: 'bold',
+        }"
+      >
+        左右键展开/隐藏面板
+      </div>
+    </div>
+
+    <div v-if="vTextureInfo">
+      <StaticBgSlide
+        key="bg"
+        ref="bgAnim"
+        :imgUrl="`jsvtexturestore://${vTextureInfo.textureId}`"
+        :width="width1"
+        :height="height1"
+        :bgWidth="1280"
+        :bgHeight="720"
+        :borderRadius="'0 30 30 0'"
+        :initPosition="{
+          left: -width1,
+          top: 0,
+        }"
+      >
+        <div
+          :style="{
+            width: width1,
+            height: height1,
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: '0 30 30 0',
+            lineHeight: height1,
+            textAlign: 'center',
+            color: '#ffffff',
+            fontSize: 40,
+          }"
+        >
+          弹窗内容
+        </div>
+      </StaticBgSlide>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/DemoForOperator/Blur/BlurInOut/StaticBgSlide.vue

@@ -0,0 +1,162 @@
+<template>
+  <jsv-preload
+    v-if="needPreload"
+    key="preload"
+    :preloadList="[preloadInfo]"
+    :onPreloadDone="handlePreloadDone"
+  ></jsv-preload>
+  <div
+    :style="{
+      width: props.width,
+      height: props.height,
+      left: curPosition.left,
+      top: curPosition.top,
+      transition: `left ${props.duration}ms, top ${props.duration}ms`,
+    }"
+  >
+    <jsv-texture-anim
+      v-if="isPreloadDone"
+      ref="pandaAnim"
+      :src="props.imgUrl"
+      :width="props.width"
+      :height="props.height"
+      :animation="appliedAnim"
+      :duration="props.duration"
+      :transform="appliedTrans"
+      :borderRadius="props.borderRadius"
+      :autoStart="false"
+      :onAnimationEnd="onAnimEnd"
+    ></jsv-texture-anim>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef, computed, reactive } from "vue";
+import { JsvPreload, buildPreloadInfo } from "jsview";
+import { JsvTextureAnim } from "jsview";
+
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  bgWidth: {
+    type: Number,
+    required: true,
+  },
+  bgHeight: {
+    type: Number,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  easing: {
+    type: String,
+    default: "linear",
+  },
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  initPosition: {
+    type: Object,
+    default: () => ({
+      left: 0,
+      top: 0,
+    }),
+  },
+});
+
+const needPreload = ref(false);
+const isPreloadDone = ref(false);
+let preloadInfo = [];
+if (props.imgUrl.includes("jsvtexturestore://")) {
+  needPreload.value = false;
+  isPreloadDone.value = true;
+} else {
+  needPreload.value = true;
+  isPreloadDone.value = false;
+  preloadInfo = buildPreloadInfo(props.imgUrl);
+}
+
+const pandaAnim = shallowRef(null);
+//view相对于bg的偏移量
+const curPosition = reactive(props.initPosition);
+
+const baseScale = computed(
+  () =>
+    `scale3d(${props.bgWidth / props.width}, ${
+      props.bgHeight / props.height
+    }, 1)`
+);
+
+const scaleOffset = {
+  left: (props.width - props.bgWidth) / 2,
+  top: (props.height - props.bgHeight) / 2,
+};
+
+const getTargetTransform = (target) => {
+  return `translate3d(${
+    ((-target.left - scaleOffset.left) / props.width) * 100
+  }%, ${((-target.top - scaleOffset.top) / props.height) * 100}%, 0) ${
+    baseScale.value
+  }`;
+};
+
+const appliedTrans = ref(getTargetTransform(curPosition));
+const appliedAnim = ref(null);
+
+//TODO JsvPreload 的回调会执行多次，所以需要一个标志来判断是否已经执行过
+let loadDone = false;
+
+const handlePreloadDone = (resultMap) => {
+  if (loadDone) return;
+  loadDone = true;
+  appliedTrans.value = getTargetTransform(curPosition);
+  isPreloadDone.value = true;
+};
+
+let onAnimEnd = (normalEnd) => {
+  if (normalEnd) {
+    appliedTrans.value = getTargetTransform(curPosition);
+  }
+  appliedAnim.value = null;
+};
+
+function slide(to) {
+  const prePosition = {
+    left: curPosition.left,
+    top: curPosition.top,
+  };
+  curPosition.left = to.left ?? prePosition.left;
+  curPosition.top = to.top ?? prePosition.top;
+
+  if (
+    prePosition.left === curPosition.left &&
+    prePosition.top === curPosition.top
+  ) {
+    return;
+  }
+
+  appliedTrans.value = null;
+  appliedAnim.value = `{from {transform: ${getTargetTransform(
+    prePosition
+  )};} to {transform: ${getTargetTransform(curPosition)};}}`;
+  pandaAnim.value.start(appliedAnim.value);
+}
+
+defineExpose({
+  slide,
+});
+</script>