@shijiu/jsview-vue-samples 2.2.35 → 2.2.201

package/DriftScopeTest/App.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref, shallowRef, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import { JsvDriftScope, JsvNinePatch, JsvTextureStoreApi } from "jsview";
+
+const getRandom = (start, end) => {
+  return Math.round(Math.random() * (end - start) + start);
+};
+
+const router = useRouter();
+const width = ref(300);
+const height = ref(200);
+const left = ref(50);
+const top = ref(80);
+
+// 设置设定模拟绘制.9图
+let canvasRef;
+let sourceId = null;
+let sampleImageWidth = 90;
+canvasRef = JsvTextureStoreApi.canvasTexture(
+  sampleImageWidth,
+  sampleImageWidth
+); // 创建画布
+
+let circleInnerDiameter = 70; // 环形内直径, 为所要包括图形的borderRadius的一倍
+let circleLineWidth = 6; // 线宽
+let circleRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 绘制线是圆圈的轨迹中线
+let customPath = canvasRef.circlePath(
+  Math.floor(sampleImageWidth / 2),
+  Math.floor(sampleImageWidth / 2),
+  circleRadius
+); // 创建圆环绘制路径，圆形在画布的中心点位置
+canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
+customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
+sourceId = canvasRef.commit(); // texture和div的textureStore绑定
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 13) {
+    left.value = getRandom(50, 400);
+    top.value = getRandom(80, 200);
+    width.value = getRandom(100, 300);
+    height.value = getRandom(100, 300);
+  }
+  return true;
+};
+
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :style="{
+      width: 1280,
+      height: 720,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      透视镜效果,OK键进行随机位置+尺寸变换
+    </div>
+
+    <jsv-drift-scope
+      :frameStyle="{
+        left: left,
+        top: top,
+        transition: 'top 0.5s, left 0.5s',
+        transfrom: 'rotate3d(0deg, 0deg, 30deg)',
+      }"
+      :scopeStyle="{
+        width: width,
+        height: height,
+        transition: 'width 0.5s, height 0.5s',
+      }"
+    >
+      <template #Frame>
+        <div
+          :style="{
+            width: width,
+            height: height,
+            backgroundColor: 'rgba(0, 128, 128, 0.7)',
+            transition: 'width 0.5s, height 0.5s',
+          }"
+        />
+      </template>
+
+      <template #Scene>
+        <div
+          :style="{
+            width: 1280,
+            height: 720,
+            backgroundImage:
+              'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/fly2.jpg',
+          }"
+        />
+      </template>
+    </jsv-drift-scope>
+    <jsv-nine-patch
+      :style="{
+        left: left,
+        top: top,
+        width: width,
+        height: height,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId}`"
+      :imageWidth="sampleImageWidth"
+      :centerWidth="2"
+      :borderOutset="Math.floor((sampleImageWidth - circleInnerDiameter) / 2)"
+      :animTime="500"
+    />
+  </jsv-focus-block>
+</template>

package/FocusMoveStyle/App.vue

@@ -5,6 +5,8 @@ import {
   getTextWidth,
   FixPositionSlide,
   ListWidget,
+  SeamlessSlide,
+  METRO_WIDGET_CONST
 } from "jsview";
 import FoldableItem from "./FoldableItem.vue";
 import redCircle from "./assets/redCircle.png";
@@ -17,20 +19,33 @@ const randomColor = () => {
     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
   );
 };
-const slideType = new FixPositionSlide();
+// const slideType = new FixPositionSlide();
+const slideType = new SeamlessSlide({ startPercent: .5, endPercent: .5});
+
 const focusHub = useFocusHub();
 
 const creepFocus = ref(null);
 const showFocus = ref(true);
 let currentFocusRect = {};
+let expandItemCount = 0;
 const focusFrameController = {
-  focusVisible: (visible) => {
-    showFocus.value = visible ? true : false;
-  },
   onFocusChange: (rect, focusIndex, doAnim) => {
     creepFocus.value?.changeRect(rect, doAnim);
     currentFocusRect = rect;
   },
+  onItemSizeChange: (ifExpand) => {
+    if (ifExpand) {
+      expandItemCount++;
+    } else {
+      expandItemCount--;
+    }
+    if (expandItemCount <= 0) {
+      showFocus.value = true;
+      expandItemCount = 0;
+    }  else {
+      showFocus.value = false;
+    }
+  }
 };
 provide("focusFrameController", focusFrameController);
 
@@ -85,6 +100,7 @@ for (let i = 0; i < 12; ++i) {
     content: contentData[i],
     marginRight: 10,
     name: "item_" + i, // focus name
+    expandWhenFocus: contentData[i] == "云影院" || contentData[i] == "综艺",
     childTab: {
       width: totalWidth, //4个item + 3个gap
       list: childList,
@@ -110,6 +126,7 @@ const measures = (item) => {
     width: item.width,
     height: item.height,
     marginRight: item.marginRight,
+    itemSlide: item.expandWhenFocus ? METRO_WIDGET_CONST.ITEM_SLIDE.DISABLE : METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
   };
 };
 

package/FocusMoveStyle/FoldableItem.vue

@@ -30,6 +30,12 @@ const width = ref(props.data.width);
 const widgetRef = shallowRef(null);
 const widgetLeft = ref(0);
 
+/**
+ * 关键代码
+ * 焦点快速往复移动时, 复用一个子widget会导致slideToDiv焦点位置的偏移, 因此每次缩放时都创建新的widget
+ */
+const changeToken = ref(0);
+
 const focusRectController = {
   onFocusChange: (rect) => {
     creepFocus.value?.changeRect(rect);
@@ -51,15 +57,17 @@ const measures = (data) => {
 
 // 注册回调
 const onFocus = () => {
-  focusFrameController.focusVisible(true);
   focused.value = true;
   folded.value = true;
+  if (props.data.expandWhenFocus) {
+    expand();
+  }
 };
 
 const foldSubTab = () => {
   if (!folded.value) {
     if (width.value == props.data.childTab.width) {
-      // showFocus.value = false;
+      changeToken.value++;
       width.value = props.data.width;
       let index =
         widgetRef.value?.getCurrentFocusIndex() ?? props.data.initFocus;
@@ -86,13 +94,16 @@ const foldSubTab = () => {
         },
         {
           duration: DURATION,
-          onEnd: () => {
-            focusFrameController.focusVisible(true);
-            folded.value = true;
-            console.log("fold anim end.");
+          anchor: getAnchor(widgetRef.value.getCurrentFocusIndex()),
+          onEnd: (cancel) => {
+            if (!(focused.value && props.data.expandWhenFocus)) {
+              folded.value = true;
+            }
+            console.log("fold anim end.", cancel);
           },
         }
       );
+      focusFrameController.onItemSizeChange(false);
     }
     focusHub.returnFocusToParent();
   }
@@ -166,11 +177,16 @@ const getAnchor = (index) => {
   return anchor;
 };
 
-const onClick = () => {
+const expand = () => {
   if (folded.value) {
+    changeToken.value++;
+
     itemKeepScale.value = false;
     showFocus.value = true;
     widgetLeft.value = 0;
+    /**
+     * 动画未结束时, widgetLeft不为0, 此时又获焦那一帧同时设置的widgetLeft值未同步到div, slideToDiv获取的就不是展开后item的正确位置
+     */
     folded.value = false;
     width.value = props.data.childTab.width;
     //为了居中而计算锚点
@@ -195,8 +211,16 @@ const onClick = () => {
       }
     );
 
-    focusHub.setFocus(props.data.name);
-    focusFrameController.focusVisible(false);
+    focusHub.setFocus(props.data.name + changeToken.value);
+    focusFrameController.onItemSizeChange(true);
+
+    // focusFrameController.focusVisible(false);
+  }
+};
+
+const onClick = () => {
+  if (!props.data.expandWhenFocus) {
+    expand();
   }
 };
 props.onAction.register("onFocus", onFocus);
@@ -205,8 +229,10 @@ props.onAction.register("onClick", onClick);
 
 const onKeyDown = (ev) => {
   if (ev.keyCode === 10000 || ev.keyCode === 8 || ev.keyCode === 27) {
-    itemKeepScale.value = true;
-    foldSubTab();
+    if (!props.data.expandWhenFocus) {
+      itemKeepScale.value = true;
+      foldSubTab();
+    }
     return true;
   }
   return false;
@@ -251,8 +277,9 @@ const onKeyDown = (ev) => {
       }"
     >
       <list-widget
+        :key="changeToken"
         ref="widgetRef"
-        :name="data.name"
+        :name="data.name + changeToken"
         :width="data.childTab.width"
         :height="data.height"
         :provideData="provideData"

package/FreeMove/App.vue

@@ -53,46 +53,46 @@ const procKeyDown = (ev) => {
 };
 // ******* 直接跳转位置 *******
 window.DebugResetPos = (x, y) => {
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportTo(x, y),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(x, y),
   ]);
 
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.action().teleportTo(x, y + 50),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(x, y + 50),
   ]);
 };
 
 window.DebugResetOffsetPos = (x, y) => {
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportOffset(x, y),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportOffset(x, y),
   ]);
 
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.action().teleportOffset(x, y),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportOffset(x, y),
   ]);
 };
 
 // ******* 有参照物的刹车测试，仅X轴移动 *******
 window.DebugBrakeToPosX = () => {
   // 参照物
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportTo(400, 50),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(400, 50),
   ]);
   // 运动体
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.state().setStartPos(0, 200),
-    actorControl2.action().moveTo(300, undefined, 10, undefined),
-    actorControl2
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(0, 200),
+    cmds.action().moveTo(300, undefined, 10, undefined),
+    cmds
       .condition()
       .reachPosition(200, undefined)
       .then([
-        actorControl2.action(1).brakeToPosition(
+        cmds.action(1).brakeToPosition(
           400,
           undefined,
           (a, b, c, d) => {
@@ -111,20 +111,20 @@ window.DebugBrakeToPosX = () => {
 // ******* 有参照物的刹车测试，XY都移动 *******
 window.DebugBrakeToPosXY = () => {
   // 参照物
-  actorControl.run([
-    actorControl.state().clearAllConditions(),
-    actorControl.action().teleportTo(400, 50),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.action().teleportTo(400, 50),
   ]);
   // 运动体
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.state().setStartPos(800, 400),
-    actorControl2.action().moveTo(100, 50, 10, undefined),
-    actorControl2
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(800, 400),
+    cmds.action().moveTo(100, 50, 10, undefined),
+    cmds
       .condition()
       .reachPosition(400, undefined)
       .then([
-        actorControl2.action(3).brakeToPosition(
+        cmds.action(3).brakeToPosition(
           100,
           50,
           (a, b, c, d) => {
@@ -142,20 +142,20 @@ window.DebugBrakeToPosXY = () => {
 
 // ******* 定向移动 *******
 window.DebugMoveTarget = () => {
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.state().setStartPos(0, 400),
-    actorControl2.action().moveTo(300, undefined, 10, undefined),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(0, 400),
+    cmds.action().moveTo(300, undefined, 10, undefined),
   ]);
 };
 
 // ******* 定向移动 + 回调监听 和 共享结束监听(OnNexusEvent) *******
 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) => {
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(160, 150),
+    cmds.action(0, 0, actRef).moveTo(x, y, 2, 2, (a, b, c, d) => {
       console.log(
         "LudlDebugCB DebugTestMove enter " +
           " a=" +
@@ -168,7 +168,7 @@ window.DebugTestMove = (x, y) => {
           d
       );
     }),
-    actorControl
+    cmds
       .condition()
       .onNexusEvent(actRef, actEvents.ActFinish)
       .then([
@@ -180,39 +180,37 @@ window.DebugTestMove = (x, y) => {
 };
 
 window.DebugTestOffset = (control, startPos) => {
-  control.run([
-    actorControl.state().clearAllConditions(),
-    control.state().setStartPos(startPos, 150),
-    control.action().altSpeed(3, undefined, 0),
-    control
+  control.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(startPos, 150),
+    cmds.action().altSpeed(3, undefined, 0),
+    cmds
       .condition(undefined, true)
       .reachPosition(460, undefined)
-      .then([actorControl.action(1, 0).teleportOffset(-300, undefined)]),
+      .then([cmds.action(1, 0).teleportOffset(-300, undefined)]),
   ]);
 };
 window.DebugTestThrowStart = () => {
   // 参照物
-  actorControl2.run([
-    actorControl2.state().clearAllConditions(),
-    actorControl2.action().teleportTo(400, 300),
+  actorControl2.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.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()]),
-        ]);
-      }),
+  actorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    cmds.state().setStartPos(100, 300),
+    cmds.action().setSpeed(2, undefined),
+    cmds.action(1).setSpdAndAccel(undefined, -20, undefined, 0.3, null, () => {
+      console.log("on pole");
+      // 在接触地板时停止
+      actorControl.run((cmds) => [
+        cmds
+          .condition(undefined, true)
+          .reachPosition(undefined, 300)
+          .then([cmds.action(3, 3).stopMoving()]),
+      ]);
+    }),
   ]);
 };
 

package/FreeMoveChildAttract/App.vue

@@ -0,0 +1,105 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgStyle">
+      <jsv-free-move-div
+        ref="mActRef1"
+        :style="{
+          top: 200,
+          left: 400,
+          width: 500,
+          height: 350,
+          backgroundColor: '#00F00F',
+        }"
+      >
+        <jsv-free-move-div
+          ref="mActRef2"
+          :style="{
+            width: 50,
+            height: 50,
+            backgroundColor: '#FF0000',
+          }"
+        />
+      </jsv-free-move-div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvFreeMoveDiv, ForgeConst } from "jsview";
+import { shallowRef, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const procKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+
+  return false;
+};
+
+const mActRef1 = shallowRef(null);
+const mActRef2 = shallowRef(null);
+let mActControl1 = null;
+let mActControl2 = null;
+
+onMounted(() => {
+  mActControl1 = mActRef1.value.control;
+  mActControl2 = mActRef2.value.control;
+
+  mActControl1
+    .getBindedView()
+    .DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_FIRST_START);
+  mActControl2
+    .getBindedView()
+    .DragEnables?.(
+      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
+        ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
+        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
+    );
+
+  mActControl1.run([mActControl1.state().setTouchAttractChild(mActControl2)]);
+
+  console.log(`OnMoved starting onMovement`);
+  mActControl2.run([
+    mActControl2
+      .condition(0, true) // 通过第二个参数设置回调为多次触发
+      .onMovement(12) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
+      .then([
+        (pointInfo) => {
+          console.log(`OnMoved x=${pointInfo.xPos} y=${pointInfo.yPos}`);
+        },
+      ]),
+  ]);
+  window.DebugControl = mActControl1;
+});
+</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/FreeMoveLink/App.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { FreeMoveFunc, ForgeConst } from "jsview";
+
+const div1 = ref();
+const div2 = ref();
+
+const control1 = new FreeMoveFunc.ActControlDebug();
+const control2 = new FreeMoveFunc.ActControlDebug();
+
+onMounted(() => {
+  const linkNexusId = FreeMoveFunc.newNexus();
+
+  let div1View = div1.value.jsvGetProxyView();
+  control1.bindForgeView(div1View, true);
+  div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
+
+  control1.run([
+    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
+  ]);
+
+  let div2View = div2.value.jsvGetProxyView();
+  control2.bindForgeView(div2View, true);
+  div2View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
+  control2.run([
+    control2
+      .condition()
+      .movementSync(linkNexusId)
+      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
+  ]);
+});
+</script>
+
+<template>
+  <div
+    ref="div1"
+    :style="{
+      left: 50,
+      top: 50,
+      width: 300,
+      height: 300,
+      backgroundColor: '#FF0000',
+    }"
+  ></div>
+  <div
+    ref="div2"
+    :style="{
+      left: 550,
+      top: 50,
+      width: 100,
+      height: 100,
+      backgroundColor: '#00FF00',
+    }"
+  ></div>
+</template>