@shijiu/jsview-vue-samples 2.3.0 → 3.0.0-next-vue.0

package/FpsLimit/App.vue

@@ -0,0 +1,102 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="processKeyDown"> </jsv-focus-block>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      top: 100,
+      backgroundColor: '#00000066',
+      color: '#FFFFFF',
+    }"
+  >
+    帧率限制功能。左键切换降帧开关，右键切换保持高帧率开关，降帧开启且保持高帧率关闭时功能启动。功能开启后，任意按键后5秒内帧率正常，之后帧率下降为5fps。
+  </div>
+  <div
+    :style="{
+      left: 413,
+      top: 400,
+      width: 200,
+      height: 200,
+      backgroundColor: backgroundColor,
+      animation: 'myrotate 2s linear infinite',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 40,
+      fontSize: 30,
+      top: 210,
+      backgroundColor: '#00000066',
+      color: '#FFFFFF',
+    }"
+  >
+    {{ switchBig ? "降帧：打开" : "降帧：关闭" }}
+    {{ switchSmall ? "保持高帧率：打开" : "保持高帧率：关闭" }}
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onBeforeMount } from "vue";
+import { jJsvRuntimeBridge } from "jsview";
+
+const backgroundColor = ref("#0000FF");
+const switchBig = ref(false);
+const switchSmall = ref(false);
+
+const processKeyDown = (ev) => {
+  if (ev.keyCode == 37) {
+    switchBig.value = !switchBig.value;
+    if (switchBig.value) {
+      window.JsvCoreApi.setIdleFps(true, 5, 5000);
+    } else {
+      window.JsvCoreApi.setIdleFps(false);
+    }
+    return true;
+  }
+  if (ev.keyCode == 39) {
+    switchSmall.value = !switchSmall.value;
+    if (switchSmall.value) {
+      window.JsvCoreApi.keepFpsHighPerf(true);
+    } else {
+      window.JsvCoreApi.keepFpsHighPerf(false);
+    }
+    return true;
+  }
+  if (ev.keyCode == 13) {
+    backgroundColor.value =
+      backgroundColor.value == "#00FF00" ? "#00FFFF" : "#00FF00";
+    return true;
+  }
+  return false;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onBeforeMount(() => {
+  window.JsView?.setIdleFps?.(false);
+  window.JsView?.keepFpsHighPerf?.(false);
+});
+</script>
+
+<style scoped>
+@keyframes myrotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/FreeMoveChildAttract/App.vue

@@ -6,16 +6,16 @@
         :style="{
           top: 200,
           left: 400,
-          width: 500,
-          height: 350,
+          width: BOX_WIDTH,
+          height: BOX_HEIGHT,
           backgroundColor: '#00F00F',
         }"
       >
         <jsv-free-move-div
           ref="mActRef2"
           :style="{
-            width: 50,
-            height: 50,
+            width: MINI_BOX_WIDTH,
+            height: MINI_BOX_HEIGHT,
             backgroundColor: '#FF0000',
           }"
         />
@@ -29,6 +29,12 @@ import { JsvFreeMoveDiv, ForgeConst } from "jsview";
 import { shallowRef, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 
+const MINI_BOX_WIDTH = 50;
+const MINI_BOX_HEIGHT = 50;
+
+const BOX_WIDTH = 500;
+const BOX_HEIGHT = 350;
+
 const router = useRouter();
 const procKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -60,12 +66,16 @@ onMounted(() => {
         ForgeConst.DragFlags.TOUCH_RECV_LAST_END
     );
 
-  mActControl1.run([mActControl1.state().setTouchAttractChild(mActControl2)]);
+  mActControl1.run((cmds)=>[cmds.state().setTouchAttractChild(mActControl2)]);
 
   console.log(`OnMoved starting onMovement`);
-  mActControl2.run([
-    mActControl2
-      .condition(0, true) // 通过第二个参数设置回调为多次触发
+  mActControl2.run((cmds)=>[
+    cmds.condition({ multiTimes: true })
+     .boxPosition(0, 0, BOX_WIDTH - MINI_BOX_WIDTH, BOX_HEIGHT - MINI_BOX_HEIGHT)
+     .then([
+        cmds.action().stopMoving(true),
+      ]),
+    cmds.condition({ multiTimes: true }) // 通过第二个参数设置回调为多次触发
       .onMovement(12) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
       .then([
         (pointInfo) => {

package/FreeMoveLink/App.vue

@@ -5,6 +5,10 @@ import { FreeMoveFunc, ForgeConst } from "jsview";
 const div1 = ref();
 const div2 = ref();
 
+const AREA1_RECT = { left: 50, top: 100, width: 400, height: 400 };
+const ACTOR_SIZE = { width: 60, height: 60 };
+const AREA2_RECT = { left: 500, top: 100, width: 200, height: 200 };
+
 const control1 = new FreeMoveFunc.ActControlDebug();
 const control2 = new FreeMoveFunc.ActControlDebug();
 
@@ -15,41 +19,66 @@ onMounted(() => {
   control1.bindForgeView(div1View, true);
   div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
 
-  control1.run([
-    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
+  control1.run((cmds)=> [
+    cmds.condition({ multiTimes: true })
+      .boxPosition(0, 0, AREA1_RECT.width - ACTOR_SIZE.width, AREA1_RECT.height - ACTOR_SIZE.height)
+      .then([cmds.action().stopMoving(true)]),
+    cmds.state().startMovementSync(linkNexusId, 
+      0, AREA1_RECT.width - ACTOR_SIZE.width,
+      0, AREA1_RECT.height - ACTOR_SIZE.height, 
+      0b11),
   ]);
 
   let div2View = div2.value.jsvGetProxyView();
   control2.bindForgeView(div2View, true);
   div2View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
-  control2.run([
-    control2
-      .condition()
+  control2.run((cmds)=> [
+    // div2不设置boxPosition, 按照div1同步过来的坐标, 不应该会超过其尺寸为1/4的背景区域
+    cmds.condition({multiTimes: true})
       .movementSync(linkNexusId)
-      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
+      .then([cmds.action().ackMovementSync(
+        0, AREA2_RECT.width - ACTOR_SIZE.width, 
+        0, AREA2_RECT.height - ACTOR_SIZE.height, 
+        0b11, 1)]),
   ]);
 });
 </script>
 
 <template>
   <div
-    ref="div1"
     :style="{
-      left: 50,
-      top: 50,
-      width: 300,
-      height: 300,
-      backgroundColor: '#FF0000',
+      left: AREA1_RECT.left,
+      top: AREA1_RECT.top,
+      width: AREA1_RECT.width,
+      height: AREA1_RECT.height,
+      backgroundColor: '#552222FF',
     }"
-  ></div>
+  >
+    <div
+      ref="div1"
+      :style="{
+        width: ACTOR_SIZE.width,
+        height: ACTOR_SIZE.height,
+        backgroundColor: '#FF0000',
+      }"
+    />
+  </div>
   <div
-    ref="div2"
     :style="{
-      left: 550,
-      top: 50,
-      width: 100,
-      height: 100,
-      backgroundColor: '#00FF00',
+      left: AREA2_RECT.left,
+      top: AREA2_RECT.top,
+      width: AREA2_RECT.width,
+      height: AREA2_RECT.height,
+      backgroundColor: '#220055FF',
     }"
-  ></div>
+  >
+    <div
+      ref="div2"
+      :style="{
+        width: ACTOR_SIZE.width,
+        height: ACTOR_SIZE.height,
+        backgroundColor: '#00FF00',
+      }"
+    />
+  </div>
 </template>

package/GiftRain/components/SpriteTranslate.vue

@@ -1,72 +1,92 @@
 <template>
-    <JsvActorMove :key="`translate${item.key}`" ref="translateF"
-        :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" :control="_Control">
-        <div :key="`bg${item.key}`" ref="translate"
-            :style="{ backgroundImage: `url(${item.src})`, left: 0, top: 0, width: item.width, height: item.height }" />
-    </JsvActorMove>
+  <JsvActorMove
+    :key="`translate${item.key}`"
+    ref="translateF"
+    :style="{
+      left: item.left,
+      top: item.top,
+      width: item.width,
+      height: item.height,
+    }"
+    :control="_Control"
+  >
+    <div
+      :key="`bg${item.key}`"
+      ref="translate"
+      :style="{
+        backgroundImage: `url(${item.src})`,
+        left: 0,
+        top: 0,
+        width: item.width,
+        height: item.height,
+      }"
+    />
+  </JsvActorMove>
 </template>
 
 <script setup>
-import { shallowRef, defineProps, onMounted, onBeforeMount } from 'vue';
-import { JsvActorMove, JsvActorMoveControl, createImpactTracer, createImpactCallback, createImpactAutoFroze } from 'jsview'
+import { shallowRef, defineProps, onMounted, onBeforeMount } from "vue";
+import {
+  JsvActorMove,
+  JsvActorMoveControl,
+  createImpactTracer,
+  createImpactCallback,
+  createImpactAutoFroze,
+} from "jsview";
 //定义子ref
-let translate = shallowRef(null)
+let translate = shallowRef(null);
 //定义父ref
-let translateF=shallowRef(null)
+let translateF = shallowRef(null);
 //定义props
 const props = defineProps({
-    onDestory: Function,
-    item: Object,
-    onImpactTracer: Function,
-    MoneyBag: Object
-})
+  onDestory: Function,
+  item: Object,
+  onImpactTracer: Function,
+  MoneyBag: Object,
+});
 const control = new JsvActorMoveControl();
 const _Control = control;
 const item = props.item;
 //销毁方法
 const _onDestroy = () => {
-    if (props.onDestory) {
-        props.onDestory(props.item.key);
-    }
-}
+  if (props.onDestory) {
+    props.onDestory(props.item.key);
+  }
+};
 
 let sensor = null;
 
 const _InitItemEle = (item, ele) => {
-    if (ele && !item.ele) {
-        item.ele = ele;
-        if (props.MoneyBag) {
-            const giftrain_sensor = createImpactTracer(props.MoneyBag, ele, createImpactCallback(
-                () => {
-                    props.onImpactTracer(item);
-                    _onDestroy();
-                },
-            ),        //碰撞即停
-                createImpactAutoFroze(
-                    [props.MoneyBag,translateF.value.mainDiv],
-                    null
-                )
-            );
-            sensor = giftrain_sensor;
-        }
+  if (ele && !item.ele) {
+    item.ele = ele;
+    if (props.MoneyBag) {
+      const giftrain_sensor = createImpactTracer(
+        props.MoneyBag,
+        ele,
+        createImpactCallback(() => {
+          props.onImpactTracer(item);
+          _onDestroy();
+        }) //碰撞即停
+      );
+      sensor = giftrain_sensor;
     }
-}
-
+  }
+};
 
 //挂载时初始化
 onMounted(() => {
-    _InitItemEle(item, translate.value)
-    _Control.moveToY(720 * 1.5 + 30, 720 * 1.5 / item.duration, () => {
-        _onDestroy();
-    });
-})
+  _InitItemEle(item, translate.value);
+  _Control.moveToY(720 * 1.5 + 30, (720 * 1.5) / item.duration, () => {
+    _onDestroy();
+  });
+});
 //卸载之前释放碰撞监听者
-onBeforeMount(()=>{
-    if(sensor!=null){
-    sensor.Recycle()
-    sensor=null
-    }
-})
+onBeforeMount(() => {
+  if (sensor != null) {
+    sensor.Recycle();
+    sensor = null;
+  }
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

package/HashHistory/App.vue

@@ -67,8 +67,8 @@ onMounted(() => {
           ref="routePage"
           class="childComponentStyle"
           :style="{
-            top:150,
-            overflow:'hidden'
+            top: 150,
+            overflow: 'hidden',
           }"
           @requestFocus="onRequestFocus"
         />

package/HashHistory/router.js

@@ -15,7 +15,7 @@ const routeList = [
   },
   {
     name: "SubPageFirst",
-    path: "/__MainJsvApp/SubPageFirst",
+    path: "/__MainJsvApp/SubPageFirst", 
     component: () => import("./views/SubPage.vue"),
     props: {
       name: "First",

package/Hover/App.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        left: 150,
+        top: 20,
+        width: 1000,
+        height: 30,
+        fontSize: 20,
+        backgroundColor: '#00000077',
+        color: '#ffffff',
+        textAlign: 'center',
+      }"
+    >
+      {{
+        `hover规则: 非父子关系的，只能有一个div是hover状态; 父子关系的，可以在父是hover状态时子也是hover`
+      }}
+    </div>
+    <div
+      :style="{
+        left: 150,
+        top: 150,
+        width: 300,
+        height: 300,
+        backgroundColor: '#990000',
+        transform: redHovered ? 'scale3d(1.2, 1.2, 1)' : 'scale3d(1, 1, 1)',
+        transition: 'transform 0.3s ease-in-out',
+        fontSize: 15,
+      }"
+      @mouseenter="redEnter"
+      @mouseleave="redOut"
+    >
+      父div
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          left: 100,
+          top: 100,
+          backgroundColor: '#009900',
+          transform: greenHovered ? 'scale3d(1.3, 1.3, 1)' : 'scale3d(1, 1, 1)',
+          transition: 'transform 0.3s ease-in-out',
+          fontSize: 15,
+        }"
+        @mouseenter="greenEnter"
+        @mouseleave="greenOut"
+      >
+        子div
+      </div>
+    </div>
+
+    <div
+      :style="{
+        left: 300,
+        top: 100,
+        width: 200,
+        height: 200,
+        backgroundColor: '#000099',
+        transform: blueHovered ? 'scale3d(1.2, 1.2, 1)' : 'scale3d(1, 1, 1)',
+        transition: 'transform 0.3s ease-in-out',
+      }"
+      @mouseenter="blueEnter"
+      @mouseleave="blueOut"
+    ></div>
+    <div
+      :style="{
+        left: 430,
+        top: 250,
+        width: 100,
+        height: 100,
+      }"
+      @mouseenter="emptyEnter"
+      @mouseleave="emptyOut"
+    >
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          backgroundColor: '#009900',
+          transform: emptyHovered ? 'scale3d(1.3, 1.3, 1)' : 'scale3d(1, 1, 1)',
+          transition: 'transform 0.3s ease-in-out',
+          fontSize: 15,
+        }"
+      >
+        空texture测试
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const greenHovered = ref(false);
+const blueHovered = ref(false);
+const redHovered = ref(false);
+const emptyHovered = ref(false);
+
+const blueEnter = () => {
+  console.log("blue enter");
+  blueHovered.value = true;
+};
+
+const blueOut = () => {
+  console.log("blue leave");
+  blueHovered.value = false;
+};
+
+const redEnter = () => {
+  console.log("red enter");
+  redHovered.value = true;
+};
+
+const redOut = () => {
+  console.log("red leave");
+  redHovered.value = false;
+};
+
+const greenEnter = () => {
+  greenHovered.value = true;
+  console.log("green enter");
+};
+
+const greenOut = () => {
+  greenHovered.value = false;
+  console.log("green leave");
+};
+
+const emptyEnter = () => {
+  emptyHovered.value = true;
+  console.log("empty enter");
+};
+
+const emptyOut = () => {
+  emptyHovered.value = false;
+  console.log("empty leave");
+};
+</script>