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

package/DemoForOperator/BookFlip/BookFlip/flip.glsl

@@ -0,0 +1,135 @@
+#define PI 3.14159265359
+#define RADIUS .05
+#define LIGHT_DIR vec3(5,3,1)
+#define SPECULAR_SHININESS 24.0
+#define SPECULAR_COLOR vec3(1.0,1.0,1.0)
+#define SPECULAR_POWER 10.0
+//书籍范围的百分比
+#define BOOK_BOUND vec4(0.00, 0.20, 1.00, 1.00)
+
+// 优化的快速反正弦函数
+float fastAsin(float x) {
+  // 使用更少的项来近似计算
+  // return x + (1.0 / 6.0) * x3 + (3.0 / 40.0) * x5 + (5.0 / 112.0) * x7;
+  return x + x*x*x*(1.0/6.0) + x*x*x*x*x*(3.0/40.0);
+}
+
+// 优化的矩形检测函数
+bool inRect(vec2 uv, vec4 rect) {
+    return all(greaterThanEqual(uv, rect.xy)) && all(lessThanEqual(uv, rect.zw));
+}
+
+vec3 fakeSpine(vec3 col, float t, float darken)
+{
+    return mix(col * darken, col, min(1.0, sqrt(abs(t) * 30.0)));
+}
+
+vec3 fakeNormal(float t, float center)
+{
+    t -= center;
+    float interp = (1.0 - abs(t * 2.0)) * PI + PI * 0.75;
+        
+    vec3 normal = vec3(abs(sin(interp)) ,0. , abs(cos(interp)));
+
+    return mix(normal, vec3(0.0, 0.0, 1.0), min(1.0, sqrt(abs(t) * 5.0)));
+}
+
+vec3 specular(vec3 viewDir, vec3 normal)
+{
+    vec3 lightDir = normalize(LIGHT_DIR);
+    float dist = length(lightDir);
+    vec3 halfV = normalize(lightDir + normalize(viewDir));
+
+    float NdotH = dot(normal, halfV);
+    float intensity = pow(max(NdotH, 0.0), SPECULAR_SHININESS);
+
+    return intensity * SPECULAR_COLOR * SPECULAR_POWER / dist; 
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 aspect = iResolution.xy / iResolution.y;
+  vec2 uv = fragCoord / iResolution.y;
+  // vec2 mouse = iMouse.xy / iResolution.y;
+  
+  vec4 bgColor = vec4(0.0, 0.0, 0.0, 0.0);
+  
+  vec4 viewBounds = vec4(0., 0., aspect);
+  vec4 bookBounds = vec4(BOOK_BOUND.xy * aspect, BOOK_BOUND.zw * aspect);
+  vec2 bookSize = bookBounds.zw - bookBounds.xy;
+  vec2 bookAspect = bookSize.xy / bookSize.y;
+  vec4 bookUvBounds = vec4(0.0, 0.0, bookAspect);
+  vec2 bookUv = (uv - bookBounds.xy) / bookSize.y;
+  // mouse = (mouse - bookBounds.xy) / bookSize.y;
+  
+  // 优化鼠标轨迹计算
+  float timeFact = 1. - iTime / iDuration;
+  vec2 mouse = vec2(timeFact, 1.2 * timeFact * (timeFact - 1.0) + 1.0) * bookAspect;
+  // 防止鼠标超出书本范围
+  mouse = clamp(mouse, vec2(0.0), bookAspect - vec2(1e-2));
+  
+  //bookAspect为bookUv的右上角
+  vec2 mouseDir = normalize(bookAspect - mouse);
+  vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
+  vec2 axisPos = (mouse + bookAspect) * 0.5; // 使用乘法代替除法
+  
+  float axisDist = length(axisPos - origin);
+
+  float proj = dot(bookUv - origin, mouseDir);
+  float dist = proj - axisDist;
+  vec2 linePoint = bookUv - dist * mouseDir;
+
+  float radius = clamp(2.0 * mouse.x * RADIUS, 0.0, RADIUS);
+  
+  // 提前计算常用值
+  bool inBookBounds = inRect(uv, bookBounds);
+  
+  if(dist > radius) {
+    if (inRect(uv, bookBounds)) {
+      fragColor = jsvTexture2D(iChannel1, bookUv / bookAspect);
+    } else {
+      fragColor = bgColor;
+    }
+  } else if(dist >= 0.0) {
+    //圆柱体部分
+    if (radius > 1e-5) {
+        float theta = fastAsin(dist / radius);
+        vec2 p1 = linePoint + mouseDir * theta * radius;
+        vec2 p2 = linePoint + mouseDir * (PI - theta) * radius;
+        
+        vec2 uv2 = p2 / bookAspect;
+        uv2.x = 1.0 - uv2.x;
+        
+        vec2 uv1 = p1 / bookAspect;
+        
+        bool inP2 = inRect(p2, bookUvBounds);
+        bool inP1 = inRect(p1, bookUvBounds);
+        
+        if(inP2) {
+            fragColor = jsvTexture2D(iChannel1, uv2);
+            fragColor.xyz += specular(vec3(0.0, 0.0, 1.0), fakeNormal(dist - radius * 0.5, 0.0)) * 0.2;
+        } else if(inP1) {
+            fragColor = jsvTexture2D(iChannel0, uv1);
+        } else {
+            fragColor = bgColor;
+        }
+    }    
+  } else {
+    vec2 p = linePoint + mouseDir * (abs(dist) + PI * radius);
+    bool inP = inRect(p, bookUvBounds);
+    
+    if (inP) {
+        vec2 uv = p / bookAspect;
+        uv.x = 1.0 - uv.x;
+        fragColor = jsvTexture2D(iChannel1, uv);
+    } else if (inRect(bookUv, bookUvBounds) ) {
+        vec2 uv2 = bookUv / bookAspect;
+        fragColor = jsvTexture2D(iChannel0, uv2);
+    } else {
+        fragColor = bgColor;
+    }
+  }
+  
+  if (inBookBounds) {
+    fragColor.xyz = fakeSpine(fragColor.xyz, dist - radius, 0.0);
+  }
+}

package/DemoForOperator/BookFlip/BookPage.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :style="pageStyle">
+    <div class="page-number">{{ index }}</div>
+    <div
+      class="page-detail"
+      :style="{
+        left: 30,
+        top: 30,
+        width: pageStyle.width - 60,
+        height: pageStyle.height - 60,
+        textOverflow: 'ellipsis',
+        backgroundColor: 'rgba(0,0,128,0.5)',
+      }"
+    >
+      {{ TextList[index % 3] }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onUnmounted, onMounted } from "vue";
+
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+  flushTrigger: {
+    type: Function,
+    required: true,
+  },
+});
+
+const TextList = [
+  "以下是长句子:\n" +
+    "1.石室诗士施氏，嗜狮，誓食十狮。2.施氏时时适市视狮。3.十时，适十狮适市。4.是时，适施氏适市。5.施氏视是十狮，恃矢势，使是十狮逝世。6.氏拾是十狮尸，适石室。7.石室湿，氏使侍拭石室。8.石室拭，施氏始试食是十狮尸。9.食时，始识是十狮尸，实十石狮尸。10.试释是事。\n",
+  "以下是长句子:\n" + "君不见，黄河之水天上来，奔流到海不复回。\n",
+  "以下是长句子:\n" +
+    'ABC انجليزي "abc" سعر الملابس 180  ABC انجليزي "abc" سعر الملابس 180 \n',
+];
+
+console.log("页面构建(测试BookFlip用key来保持prevPage)" + props.index);
+
+const pageStyle = computed(() => {
+  const randomColor = `#${Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, "0")}`;
+  return {
+    width: `${props.width}`,
+    height: `${props.height}`,
+    backgroundColor: randomColor,
+  };
+});
+
+onMounted(() => {
+  console.log("页面挂载(测试BookFlip用key来保持prevPage)" + props.index);
+  props.flushTrigger(props.index); // 若有图片，要用jsvPreload进行图片预加载，并在预加载完成后调用flushTrigger
+});
+
+onUnmounted(() => {
+  console.log("页面销毁(测试BookFlip用key来保持prevPage)" + props.index);
+});
+</script>
+
+<style scoped>
+.page-number {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 1);
+}
+.page-detail {
+  font-size: 30px;
+  color: rgb(207, 52, 168);
+}
+</style>

package/DemoForOperator/Bounce/Bounce.vue

@@ -22,10 +22,32 @@ import { shallowRef } from "vue";
 import { buildBounce } from "./FreeMoveBuilder";
 
 const props = defineProps({
+  /**
+   * 图片资源路径
+   * @type {String}
+   * @required
+   * @example
+   * // 正确用法
+   * src: "/images/ball.png"
+   */
   src: {
     type: String,
     required: true,
   },
+
+  /**
+   * 布局配置对象
+   * @type {Object}
+   * @required
+   * @typedef {Object} LayoutConfig
+   * @property {number} top - 组件顶部位置（单位：px）
+   * @property {number} left - 组件左侧位置（单位：px）
+   * @property {number} width - 组件宽度（单位：px）
+   * @property {number} height - 组件高度（单位：px）
+   * @example
+   * // 正确配置示例
+   * { top: 100, left: 200, width: 50, height: 50 }
+   */
   layout: {
     type: Object,
     required: true,
@@ -35,14 +57,24 @@ const props = defineProps({
 let actorRef = shallowRef(null);
 let vLeftSnakeControl = null;
 
+/**
+ * 启动弹跳动画
+ * @param {number} left - 目标位置X坐标（单位：px）
+ * @param {number} top - 目标位置Y坐标（单位：px）
+ * @param {number} bounceTimes - 弹跳次数（建议1-5次）
+ * @description 调用此方法后组件会从当前位置向目标位置执行弹跳动画
+ * @example
+ * // 在(200,300)位置弹跳3次
+ * start(200, 300, 3)
+ */
 function startSnakeAnim(left, top, bounceTimes) {
-  // showSnake.value = true;
   vLeftSnakeControl = actorRef.value.control;
   vLeftSnakeControl.run((cmds) => [
     ...buildBounce(cmds, 1, left, top, bounceTimes, 2.0, (state) => {}),
   ]);
 }
 
+// 暴露给父组件的方法
 defineExpose({
   start: startSnakeAnim,
 });

package/DemoForOperator/ChunLian/Couplets.vue

@@ -103,7 +103,17 @@ import {
   buildPreloadInfo,
 } from "jsview";
 import { shallowRef, onBeforeUnmount, watch } from "vue";
+
 const props = defineProps({
+  /**
+   * 春联图片资源配置对象
+   * @type {Object}
+   * @property {string} leftContent - 左侧春联图片URL
+   * @property {string} rightContent - 右侧春联图片URL
+   * @property {string} scrollSprite - 滚轴精灵图URL
+   * @property {string} scrollStatic - 静态滚轴图片URL
+   * @required
+   */
   sourceMap: {
     type: Object,
     require: true,
@@ -116,6 +126,14 @@ const props = defineProps({
       );
     },
   },
+
+  /**
+   * 春联尺寸配置
+   * @type {Object}
+   * @property {number} width - 春联宽度
+   * @property {number} height - 春联高度
+   * @required
+   */
   size: {
     type: Object,
     required: true,
@@ -123,6 +141,14 @@ const props = defineProps({
       return "width" in value && "height" in value;
     },
   },
+
+  /**
+   * 左侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 左侧春联的水平位置
+   * @property {number} top - 左侧春联的垂直位置
+   * @required
+   */
   leftPosition: {
     type: Object,
     require: true,
@@ -130,6 +156,14 @@ const props = defineProps({
       return "left" in value && "top" in value;
     },
   },
+
+  /**
+   * 右侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 右侧春联的水平位置
+   * @property {number} top - 右侧春联的垂直位置
+   * @required
+   */
   rightPosition: {
     type: Object,
     require: true,
@@ -137,7 +171,16 @@ const props = defineProps({
       return "left" in value && "top" in value;
     },
   },
-  duration: { type: Number, require: true },
+
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @required
+   */
+  duration: { 
+    type: Number, 
+    require: true 
+  }
 });
 const layouts = [{ ...props.leftPosition, isLeft: true }, props.rightPosition];
 let myShow = shallowRef(false);

package/DemoForOperator/ClickSpriteAnim/App.vue

@@ -0,0 +1,130 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import { onMounted, shallowRef } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 0,
+    },
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 1,
+    },
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 2,
+      spriteSrc:
+        "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ClickSpriteAnim/good.png",
+    },
+  ];
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  console.log(TAG, "onEdge", edgeInfo);
+};
+
+const onFocus = () => {
+  console.log(TAG, "onFocus");
+};
+
+const onBlur = () => {
+  console.log(TAG, "onBlur");
+};
+
+const onScroll = (start, range, totalSize) => {
+  console.log(TAG, "onScroll", start, range, totalSize);
+};
+
+const widgetLayout = {
+  left: (1280 - 180) / 2,
+  top: 100,
+  width: 180,
+  height: 300,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+
+const widgetRef = shallowRef(null);
+window.widgetRef = widgetRef;
+
+const show = shallowRef(false);
+setTimeout(() => {
+  show.value = true;
+}, 1000);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    v-if="show"
+    ref="widgetRef"
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+    :onScroll="onScroll"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      width: 1280,
+      height: 80,
+      lineHeight: 80,
+      backgroundColor: '#00000077',
+      fontSize: 30,
+      textAlign: 'center',
+      color: '#ffffff',
+    }"
+  >
+    第三项摁OK会有动画
+  </div>
+</template>

package/DemoForOperator/ClickSpriteAnim/Item.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+import Sprite from "../Sprite/Sprite.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const spriteController = shallowRef(null);
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  spriteController.value?.play();
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: focused ? '#22222299' : '#00000000',
+      borderRadius: Math.round(data.width / 2),
+    }"
+  ></div>
+  <Sprite
+    v-if="data.spriteSrc"
+    ref="spriteController"
+    :spriteSrc="data.spriteSrc"
+    :repeat="0"
+    :layout="{
+      width: data.width,
+      height: data.height,
+    }"
+    :onEnd="onAnimEnd"
+    :duration="1"
+    endFrame="end"
+    :autoStart="false"
+  ></Sprite>
+  <div
+    v-else
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: '#ffffff',
+      textAlign: 'center',
+      lineHeight: data.height,
+      backgroundColor: '#ffffff33',
+      borderRadius: Math.round(data.width / 2),
+    }"
+  >
+    {{ data.index }}
+  </div>
+</template>