@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/DynamicClass/style2.json

@@ -0,0 +1,164 @@
+{
+  "bg": {
+    "width": 1280,
+    "height": 720,
+    "top": 0,
+    "left": 0,
+    "backgroundColor": "#CCCCCC"
+  },
+  "bg1": {
+    "width": 1280,
+    "height": 720,
+    "top": 0,
+    "left": 0,
+    "backgroundColor": "#FDDBBB"
+  },
+  "floor1-bg": {
+    "width": 1280,
+    "height": 300,
+    "top": 100,
+    "left": 0,
+    "fontSize": 20,
+    "lineHeight": 30,
+    "color": "#DAAD21"
+  },
+  "floor1Metro": {
+    "width": 1280,
+    "height": 300,
+    "top": 0,
+    "left": 0,
+    "padding": { "left": 28 },
+    "data": {
+      "width": 200,
+      "height": 300,
+      "marginRight": 56,
+      "marqueeData": {
+        "width": 200,
+        "height": 30,
+        "fontSize": 18,
+        "lineHeight": 30,
+        "direction": "ltr",
+        "top": 270
+      }
+    }
+  },
+  "poster1": {
+    "width": 200,
+    "height": 300,
+    "backgroundColor": "#BBBBAA",
+    "textAlign": "center"
+  },
+  "title1": {
+    "width": 200,
+    "height": 30,
+    "left": 0,
+    "top": 240,
+    "backgroundColor": "#FFFFFF"
+  },
+  "focusBg1": {
+    "backgroundColor": "#DD8888"
+  },
+  "blurBg1": {
+    "backgroundColor": "#BBBBAA"
+  },
+  "floor2-bg": {
+    "width": 1280,
+    "height": 400,
+    "top": 500,
+    "left": 0,
+    "fontSize": 38,
+    "lineHeight": 50,
+    "color": "#FFFFFF"
+  },
+  "floor2Metro": {
+    "width": 1280,
+    "height": 400,
+    "top": 0,
+    "left": 0,
+    "padding": { "left": 0 },
+    "data": {
+      "width": 620,
+      "height": 400,
+      "marginRight": 40,
+      "marqueeData": {
+        "width": 620,
+        "height": 40,
+        "fontSize": 30,
+        "lineHeight": 40,
+        "direction": "ltr",
+        "top": 360
+      }
+    }
+  },
+  "poster2": {
+    "width": 620,
+    "height": 400,
+    "backgroundColor": "#BBAAAA",
+    "textAlign": "center"
+  },
+  "title2": {
+    "width": 620,
+    "height": 50,
+    "left": 0,
+    "top": 310,
+    "backgroundColor": "#FFF221"
+  },
+  "focusBg2": {
+    "backgroundColor": "#BBFF66"
+  },
+  "blurBg2": {
+    "backgroundColor": "#BBAAAA"
+  },
+  "floor3-bg": {
+    "width": 1280,
+    "height": 300,
+    "top": 980,
+    "left": 0,
+    "fontSize": 20,
+    "lineHeight": 30,
+    "color": "#FDD312"
+  },
+  "floor3Metro": {
+    "width": 1280,
+    "height": 300,
+    "top": 0,
+    "left": 0,
+    "padding": { "left": 5 },
+    "data": {
+      "width": 150,
+      "height": 300,
+      "marginRight": 30,
+      "marqueeData": {
+        "width": 150,
+        "height": 30,
+        "fontSize": 18,
+        "lineHeight": 30,
+        "direction": "ltr",
+        "top": 270
+      }
+    }
+  },
+  "poster3": {
+    "width": 150,
+    "height": 300,
+    "backgroundColor": "#BBBBBB",
+    "textAlign": "center"
+  },
+  "title3": {
+    "width": 150,
+    "height": 30,
+    "left": 0,
+    "top": 240,
+    "backgroundColor": "#FFFFFF"
+  },
+  "focusBg3": {
+    "backgroundColor": "#DD8888"
+  },
+  "blurBg3": {
+    "backgroundColor": "#BBBBBB"
+  },
+  "grow": {
+    "transition": "transform 0.35s cubic-bezier(0.42, 3.96, 0.62, 0)",
+    "transform": "scale3d(1,1.1,1)"
+  }
+}

package/FilterDemo/App.vue

@@ -121,7 +121,7 @@ onMounted(() => {
       left: 10,
       top: 30,
       width: 400,
-      height: 200,
+      height: 800,
     }"
   >
     {{

package/FocusMoveStyle/App.vue

@@ -16,6 +16,11 @@ const styleShell = getKeyFramesGroup();
 
 const animationCache = {};
 const addAnimation = (fromRect, toRect, name) => {
+  if (animationCache.hasOwnProperty(name)) {
+    styleShell.removeRule(name);
+    delete animationCache[name];
+  }
+  console.log("LudlDebug anim");
   if (!(name in animationCache)) {
     const animStr = `@keyframes ${name} {
       0% {
@@ -66,6 +71,8 @@ const focusSize = reactive({
   onTransitionEnd: null,
 });
 
+let animateChange = 0; // A B版动画切换，解决animation属性不变化引起不刷新问题
+
 const focusFrameController = {
   preRect: null,
   curRect: null,
@@ -75,7 +82,8 @@ const focusFrameController = {
     this.preRect = this.curRect;
     this.curRect = rect;
     if (this.focusIndex >= 0) {
-      const animName = "test_" + focusIndex + this.focusIndex;
+      const animName = "test_focusMove_" + animateChange;
+      animateChange = animateChange == 0 ? 1 : 0; // A B 版切换
       addAnimation(this.preRect, this.curRect, animName);
       focusSize.animation = `${animName} 0.3s linear`;
     }
@@ -135,7 +143,7 @@ onBeforeUnmount(() => {
   for (let name in animationCache) {
     removeAnimation(name);
   }
-})
+});
 </script>
 
 <template>

package/FreeMove/App.vue

@@ -0,0 +1,291 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgStyle">
+      <div v-for="(item, index) in 6">
+        <div v-show="index == num - 1">
+          <jsv-free-move-actor :ref="(el) => (actRef[index] = el)">
+            <div class="box">{{ "测试文字1" }}</div>
+          </jsv-free-move-actor>
+          <jsv-free-move-actor :ref="(el) => (actRef2[index] = el)">
+            <div class="box" :style="{ backgroundColor: '#b52489' }">
+              {{ "测试文字2" }}
+            </div>
+          </jsv-free-move-actor>
+        </div>
+      </div>
+      <div class="tip">{{ "左右键翻页 " + `${num}/6 页` }}</div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvFreeMoveActor, FreeMoveDef } from "jsview";
+import { shallowRef, onMounted, watch } from "vue";
+
+const actEvents = FreeMoveDef.ActEventDefine;
+const keepFlags = FreeMoveDef.KeepFlags;
+
+let actRef = shallowRef([]);
+let actRef2 = shallowRef([]);
+let actorControl = null;
+let actorControl2 = null;
+
+let num = shallowRef(1);
+const procKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 13:
+      console.log("procKeyDown get ok key");
+      break;
+    case 37:
+      if (num.value !== 1) {
+        num.value -= 1;
+      } else {
+        num.value = 1;
+      }
+      break;
+    case 39:
+      if (num.value !== 6) {
+        num.value += 1;
+      } else {
+        num.value = 6;
+      }
+  }
+};
+// ******* 直接跳转位置 *******
+window.DebugResetPos = (x, y) => {
+  actorControl.run([
+    actorControl.state().clearAllConditions(),
+    actorControl.action().teleportTo(x, y),
+  ]);
+
+  actorControl2.run([
+    actorControl2.state().clearAllConditions(),
+    actorControl2.action().teleportTo(x, y + 50),
+  ]);
+};
+
+window.DebugResetOffsetPos = (x, y) => {
+  actorControl.run([
+    actorControl.state().clearAllConditions(),
+    actorControl.action().teleportOffset(x, y),
+  ]);
+
+  actorControl2.run([
+    actorControl2.state().clearAllConditions(),
+    actorControl2.action().teleportOffset(x, y),
+  ]);
+};
+
+// ******* 有参照物的刹车测试，仅X轴移动 *******
+window.DebugBrakeToPosX = () => {
+  // 参照物
+  actorControl.run([
+    actorControl.state().clearAllConditions(),
+    actorControl.action().teleportTo(400, 50),
+  ]);
+  // 运动体
+  actorControl2.run([
+    actorControl2.state().clearAllConditions(),
+    actorControl2.state().setStartPos(0, 200),
+    actorControl2.action().moveTo(300, undefined, 10, undefined),
+    actorControl2
+      .condition()
+      .reachPosition(200, undefined)
+      .then([
+        actorControl2.action(1).brakeToPosition(
+          400,
+          undefined,
+          (a, b, c, d) => {
+            console.log(
+              `LudlDebugCB DebugBrakeToPos enter a=${a} b=${b} c=${c} d=${d}`
+            );
+          },
+          () => {
+            console.log("LudlDebugCB DebugBrakeToPos onRejected");
+          }
+        ),
+      ]),
+  ]);
+};
+
+// ******* 有参照物的刹车测试，XY都移动 *******
+window.DebugBrakeToPosXY = () => {
+  // 参照物
+  actorControl.run([
+    actorControl.state().clearAllConditions(),
+    actorControl.action().teleportTo(400, 50),
+  ]);
+  // 运动体
+  actorControl2.run([
+    actorControl2.state().clearAllConditions(),
+    actorControl2.state().setStartPos(800, 400),
+    actorControl2.action().moveTo(100, 50, 10, undefined),
+    actorControl2
+      .condition()
+      .reachPosition(400, undefined)
+      .then([
+        actorControl2.action(3).brakeToPosition(
+          100,
+          50,
+          (a, b, c, d) => {
+            console.log(
+              `LudlDebugCB DebugBrakeToPos enter a=${a} b=${b} c=${c} d=${d}`
+            );
+          },
+          () => {
+            console.log("LudlDebugCB DebugBrakeToPos onRejected");
+          }
+        ),
+      ]),
+  ]);
+};
+
+// ******* 定向移动 *******
+window.DebugMoveTarget = () => {
+  actorControl2.run([
+    actorControl2.state().clearAllConditions(),
+    actorControl2.state().setStartPos(0, 400),
+    actorControl2.action().moveTo(300, undefined, 10, undefined),
+  ]);
+};
+
+// ******* 定向移动 + 回调监听 和 共享结束监听(onActEvent) *******
+window.DebugTestMove = (x, y) => {
+  let actRef = {};
+  actorControl.run([
+    actorControl.state().clearAllConditions(),
+    actorControl.state().setStartPos(160, 150),
+    actorControl.action(0, 0, actRef).moveTo(x, y, 2, 2, (a, b, c, d) => {
+      console.log(
+        "LudlDebugCB DebugTestMove enter " +
+          " a=" +
+          a +
+          " b=" +
+          b +
+          " c=" +
+          c +
+          " d=" +
+          d
+      );
+    }),
+    actorControl
+      .condition()
+      .onActEvent(actRef, actEvents.ActFinish)
+      .then([
+        () => {
+          console.log("on move finished");
+        },
+      ]),
+  ]);
+};
+
+window.DebugTestOffset = (control, startPos) => {
+  control.run([
+    actorControl.state().clearAllConditions(),
+    control.state().setStartPos(startPos, 150),
+    control.action().altSpeed(3, undefined, 0),
+    control
+      .condition(undefined, true)
+      .reachPosition(460, undefined)
+      .then([actorControl.action(1, 0).teleportOffset(-300, undefined)]),
+  ]);
+};
+window.DebugTestThrowStart = () => {
+  // 参照物
+  actorControl2.run([
+    actorControl2.state().clearAllConditions(),
+    actorControl2.action().teleportTo(400, 300),
+  ]);
+
+  actorControl.run([
+    actorControl.state().clearAllConditions(),
+    actorControl.state().setStartPos(100, 300),
+    actorControl.action().setSpeed(2, undefined),
+    actorControl
+      .action(1)
+      .setSpdAndAccel(undefined, -20, undefined, 0.3, null, () => {
+        console.log("on pole");
+        // 在接触地板时停止
+        actorControl.run([
+          actorControl
+            .condition(undefined, true)
+            .reachPosition(undefined, 300)
+            .then([actorControl.action(3, 3).stopMoving()]),
+        ]);
+      }),
+  ]);
+};
+
+window.DebugTestThrow = () => {};
+
+watch(num, (n, o) => {
+  switch (n) {
+    case 1:
+      actorControl = actRef.value[0].control;
+      actorControl2 = actRef2.value[0].control;
+      window.DebugTestMove(200, 200);
+      break;
+    case 2:
+      actorControl = actRef.value[1].control;
+      actorControl2 = actRef2.value[1].control;
+      window.DebugTestOffset(actorControl, 160);
+      window.DebugTestOffset(actorControl2, 310);
+      break;
+    case 3:
+      actorControl = actRef.value[2].control;
+      actorControl2 = actRef2.value[2].control;
+      window.DebugMoveTarget();
+      break;
+    case 4:
+      actorControl = actRef.value[3].control;
+      actorControl2 = actRef2.value[3].control;
+      window.DebugBrakeToPosX();
+      break;
+    case 5:
+      actorControl = actRef.value[4].control;
+      actorControl2 = actRef2.value[4].control;
+      window.DebugTestThrowStart();
+      break;
+    case 6:
+      actorControl = actRef.value[5].control;
+      actorControl2 = actRef2.value[5].control;
+      window.DebugBrakeToPosXY();
+      break;
+    default:
+      break;
+  }
+});
+onMounted(() => {
+  actorControl = actRef.value[0].control;
+  actorControl2 = actRef2.value[0].control;
+  window.DebugControl = actorControl;
+  window.DebugTestMove(200, 200);
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.box {
+  width: 150;
+  height: 150;
+  font-size: 30;
+  color: #000000;
+  background-color: #3fb524;
+}
+.tip {
+  width: 300;
+  height: 30;
+  line-height: 28;
+  font-size: 28;
+  left: 980;
+  top: 680;
+  text-align: center;
+  font-weight: bold;
+  color: #ffffff;
+}
+</style>

package/GetBoundingClientRect/App.vue

@@ -0,0 +1,177 @@
+<script setup>
+import img from "../assets/jpegDemo.jpeg";
+import { ref, shallowRef, onMounted } from "vue";
+
+const ref1 = shallowRef();
+const ref2 = shallowRef();
+const ref3 = shallowRef();
+const ref4 = shallowRef();
+const ref5 = shallowRef();
+
+const targetRect1 = {
+  left: 20,
+  top: 120,
+  width: 200,
+  height: 200,
+};
+const targetRect2 = {
+  left: 230,
+  top: 120,
+  width: 210,
+  height: 210,
+};
+const targetRect3 = {
+  left: 440,
+  top: 120,
+  width: 200,
+  height: 200,
+};
+const targetRect4 = {
+  left: 640,
+  top: 110,
+  width: 220,
+  height: 220,
+};
+const targetRect5 = {
+  left: 860,
+  top: 120,
+  width: 220,
+  height: 220,
+};
+
+const color1 = ref("#FFFF00");
+const color2 = ref("#FFFF00");
+const color3 = ref("#FFFF00");
+const color4 = ref("#FFFF00");
+const color5 = ref("#FFFF00");
+
+const isMatch = (d1, d2) => {
+  return (
+    d1.left == d2.left &&
+    d1.top == d2.top &&
+    d1.width == d2.width &&
+    d1.height == d2.height
+  );
+};
+onMounted(() => {
+  ref1.value.jsvGetBoundingClientRect().then((data) => {
+    console.log("rect1", targetRect1, data);
+    color1.value = isMatch(data, targetRect1) ? "#00FF00" : "#FF0000";
+  });
+  ref2.value.jsvGetBoundingClientRect().then((data) => {
+    console.log("rect2", targetRect2, data);
+    color2.value = isMatch(data, targetRect2) ? "#00FF00" : "#FF0000";
+  });
+  ref3.value.jsvGetBoundingClientRect().then((data) => {
+    console.log("rect3", targetRect3, data);
+    color3.value = isMatch(data, targetRect3) ? "#00FF00" : "#FF0000";
+  });
+  ref4.value.jsvGetBoundingClientRect().then((data) => {
+    console.log("rect4", targetRect4, data);
+    color4.value = isMatch(data, targetRect4) ? "#00FF00" : "#FF0000";
+  });
+  ref5.value.jsvGetBoundingClientRect().then((data) => {
+    console.log("rect5", targetRect5, data);
+    color5.value = isMatch(data, targetRect5) ? "#00FF00" : "#FF0000";
+  });
+});
+</script>
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#FFFFFF',
+    }"
+  ></div>
+
+  <div
+    :style="{
+      top: 20,
+      width: 1280,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#007788',
+      color: '#FFFFFF',
+      textAlign: 'center'
+    }"
+  >
+    获取div区域检测, 绿色为正确, 红色为错误(浏览器端的控制台会影响结果, 注意关闭)
+  </div>
+  <div :style="{ top: 120 }">
+    <div :style="{ left: 20 }">
+      <img ref="ref1" class="view-size" :src="`url(${img})`" />
+      <div
+        class="result"
+        :style="{
+          backgroundColor: color1,
+        }"
+      ></div>
+    </div>
+    <div :style="{ left: 230 }">
+      <div ref="ref2" :style="{ width: 210, height: 210 }">
+        <img class="view-size" :src="`url(${img})`" />
+      </div>
+      <div
+        class="result"
+        :style="{
+          backgroundColor: color2,
+        }"
+      ></div>
+    </div>
+    <div :style="{ left: 440 }">
+      <div ref="ref3">
+        <img class="view-size" :src="`url(${img})`" />
+      </div>
+      <div
+        class="result"
+        :style="{
+          backgroundColor: color3,
+        }"
+      ></div>
+    </div>
+    <div :style="{ left: 650 }">
+      <div
+        ref="ref4"
+        :style="{
+          transform: 'scale3d(1.1, 1.1, 1)',
+          width: 200,
+          height: 200,
+          backgroundColor: '#007788',
+        }"
+      >
+        <img class="view-size" :src="`url(${img})`" />
+      </div>
+      <div
+        class="result"
+        :style="{
+          backgroundColor: color4,
+        }"
+      ></div>
+    </div>
+    <div :style="{ left: 860 }">
+      <div ref="ref5" :style="{ transform: 'scale3d(1.1, 1.1, 1)' }">
+        <img class="view-size" :src="`url(${img})`" />
+      </div>
+      <div
+        class="result"
+        :style="{
+          backgroundColor: color5,
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.view-size {
+  width: 200;
+  height: 200;
+}
+
+.result {
+  top: 220;
+  height: 50;
+  width: 200;
+}
+</style>

package/GiftRain/App.vue

@@ -50,9 +50,9 @@
 
       </div>
       <!-- 音频 -->
-      <JsvSystemAudio key="AudioBg" :src="resourceMap._AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
+      <JsvAudio key="AudioBg" :src="resourceMap._AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
 
-      <JsvSystemAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
+      <JsvAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
 
 
     </div>
@@ -60,7 +60,7 @@
 </template>
 <script setup>
 /* eslint-disable */
-import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo, JsvSystemAudio } from "jsview";
+import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo, JsvAudio } from "jsview";
 import { shallowRef, onMounted, onBeforeUnmount, provide } from "vue";
 import { useRouter } from "vue-router";
 import Score from "./components/Score.vue";