@shijiu/jsview-vue-samples 2.2.128 → 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/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/FreeMoveLink/App.vue

@@ -16,7 +16,7 @@ onMounted(() => {
   div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
 
   control1.run([
-    control1.state().startMovementSync(linkNexusId, -200, -200, 200, 200, 0b11),
+    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
   ]);
 
   let div2View = div2.value.jsvGetProxyView();
@@ -26,7 +26,7 @@ onMounted(() => {
     control2
       .condition()
       .movementSync(linkNexusId)
-      .then([control2.action().ackMovementSync(-100, -100, 100, 100, 0b11, 1)]),
+      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
   ]);
 });
 </script>

package/ImpactStop/App.vue

@@ -196,16 +196,16 @@ const procKeyDown = (ev) => {
 
       let interactNexus = FreeMoveFunc.newNexus();
 
-      actorControl.run([
-        actorControl.state().clearAllConditions(),
-        actorControl
+      actorControl.run((cmds) => [
+        cmds.state().clearAllConditions(),
+        cmds
           .condition()
           .onNextTick(1)
           .then([
             () => {
               bodyState.value = 1;
             },
-            actorControl
+            cmds
               .condition()
               .onHitBlock(1)
               .then([
@@ -213,8 +213,8 @@ const procKeyDown = (ev) => {
                   console.log("LudlDebug on hit 1");
                   bodyState.value = 0;
                 },
-                actorControl.state().revertWithHitBlock(),
-                actorControl.action().stopMoving(),
+                cmds.state().revertWithHitBlock(),
+                cmds.action().stopMoving(),
                 (a) => {
                   jumping = false;
 
@@ -239,11 +239,11 @@ const procKeyDown = (ev) => {
       ]);
 
       if (direction.value) {
-        actorControl.run([
-          actorControl
+        actorControl.run((cmds) => [
+          cmds
             .action(0, 0, interactNexus)
             .setSpdAndAccel(7.9, -24, undefined, 1, null, () => {}),
-          actorControl
+          cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
             .then([
@@ -253,11 +253,11 @@ const procKeyDown = (ev) => {
             ]),
         ]);
       } else {
-        actorControl.run([
-          actorControl
+        actorControl.run((cmds) => [
+          cmds
             .action(0, 0, interactNexus)
             .setSpdAndAccel(-7.9, -24, undefined, 1, null, () => {}),
-          actorControl
+          cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
             .then([
@@ -271,61 +271,61 @@ const procKeyDown = (ev) => {
       break;
     case 37:
       if (board == "left") {
-        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(-5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(0, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "right") {
-        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(-5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(840 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "middle") {
-        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(-5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(540 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       }
       break;
     case 39:
       if (board == "left") {
-        actorControl.run([actorControl.action().setSpeed(5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(410 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "right") {
-        actorControl.run([actorControl.action().setSpeed(5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(1240 - 30 - 40, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       } else if (board == "middle") {
-        actorControl.run([actorControl.action().setSpeed(5, 0)]);
-        actorControl.run([
-          actorControl.state().clearAllConditions(),
-          actorControl
+        actorControl.run((cmds) => [cmds.action().setSpeed(5, 0)]);
+        actorControl.run((cmds) => [
+          cmds.state().clearAllConditions(),
+          cmds
             .condition()
             .reachPosition(740 - 40 - 30, undefined)
-            .then([actorControl.action().stopMoving()]),
+            .then([cmds.action().stopMoving()]),
         ]);
       }
       break;
@@ -338,10 +338,10 @@ const procKeyUp = (ev) => {
   }
   switch (ev.keyCode) {
     case 37:
-      actorControl.run([actorControl.action().stopMoving()]);
+      actorControl.run((cmds) => [cmds.action().stopMoving()]);
       break;
     case 39:
-      actorControl.run([actorControl.action().stopMoving()]);
+      actorControl.run((cmds) => [cmds.action().stopMoving()]);
       break;
 
     default:
@@ -357,7 +357,7 @@ const onActionObj = {
 const reset = () => {
   board = "left";
   direction.value = 1;
-  actorControl.run([actorControl.action().teleportTo(0, 0)]);
+  actorControl.run((cmds) => [cmds.action().teleportTo(0, 0)]);
 };
 onMounted(() => {
   actorControl = actorRef.value.control;

package/LongImage/App.vue

@@ -32,7 +32,6 @@ const onKeyDown = (ev) => {
 };
 </script>
 
-
 <template>
   <jsv-focus-block
     autoFocus
@@ -53,7 +52,7 @@ const onKeyDown = (ev) => {
         backgroundColor: 'rgba(27,38,151,0.8)',
       }"
     >
-      可加载长或宽超过2048px的图片
+      可加载长或宽超过maxBuffer(1080p:4096px)的图片
     </div>
     <div :style="{ left: 100, top: 100 }">
       <LongImageScroll

package/LongText/App.vue

@@ -69,13 +69,13 @@ onMounted(() => {
           :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
           :textStyle="{ color: '#000000', fontSize: 20 }"
           :scrollBlockStyle="{
-            width: 10,
+            width: 15,
             height: 30,
             backgroundColor: '#555555',
           }"
           :scrollStyle="{
             left: 1005,
-            width: 10,
+            width: 15,
             height: 500,
             backgroundColor: '#DDDDDD',
           }"

package/LongText/LongTextScroll.vue

@@ -6,7 +6,7 @@ import {
   JsvFlexDiv,
   VERTICAL,
   JsvScrollBox,
-  ScrollStyle,
+  ScrollBoxStyle,
 } from "jsview";
 
 const props = defineProps({
@@ -48,7 +48,7 @@ const onAction = {
         case 38:
           if (textY !== 0) {
             text_y = textY + props.step >= 0 ? 0 : textY + props.step;
-            SlideToYByKey(text_y);
+            slideToYByKey(text_y);
           }
           break;
         case 40:
@@ -57,7 +57,7 @@ const onAction = {
               textY - props.step <= props.style.height - textTotalHeight
                 ? props.style.height - textTotalHeight
                 : textY - props.step;
-            SlideToYByKey(text_y);
+            slideToYByKey(text_y);
           } else {
             focusHub.setFocus("button");
           }
@@ -73,35 +73,37 @@ const onAction = {
   },
 };
 
-function SlideToYByKey(newY) {
+function slideToYByKey(newY) {
   // 使用新的Y来调整ScrollBox的显示位置
   rJsvScrollBox.value.updatePercent(
     -newY / (textTotalHeight - props.style.height)
   );
 
-  // 记录新的Y, 并更新右边的进度条
-  UpdateRightBar(newY);
+  recordTextY(newY);
+
+  // 不再直接更新右边进度条的进度
+  // 将由 JsvScrollBox 的syncWith机制来同步
+  // 注意: 目前这个机制在PC上没有模拟，
+  // 如果PC上也需要看到同步效果，则可通过 window.JsView 是否存在来识别非盒子情况，此时主动改变bar的top
 }
 
-function UpdateRightBar(newY) {
+function recordTextY(newY) {
+  // 记录text Y，为为下次按键的基准坐标
   textY = newY;
-
-  scrollY.value =
-    (-newY / (textTotalHeight - props.style.height)) *
-    (props.scrollStyle.height - props.scrollBlockStyle.height);
 }
 
 onMounted(() => {
   rootRef.value.requestFocus();
+
+  // 检测滚动触控触发的移动，
+  // 当 updatePercent 调用后如果移动距离大于阈值也会回调
   rJsvScrollBox.value.setSensor((percent, x, y) => {
     let newY = Math.floor(y);
     console.log(
-      `onProgress dragged percent=${percent} \
-x=${Math.floor(x)} \
-y=${newY}`
+      `onProgress dragged percent=${percent} x=${Math.floor(x)} y=${newY}`
     );
-    UpdateRightBar(newY);
-  }, 15);
+    recordTextY(newY);
+  }, 15 /* 每动15px才接收一次通知，减少js被调用的频率，从而减小对性能的影响 */);
 });
 </script>
 
@@ -110,12 +112,14 @@ y=${newY}`
     <div :style="{ overflow: 'hidden', ...style }">
       <jsv-scroll-box
         ref="rJsvScrollBox"
+        linkName="ScrollBoxTextArea"
+        syncWith="ScrollBarTextArea"
         :style="{
           width: style.width,
           height: style.height,
         }"
         :direction="VERTICAL"
-        :mode="ScrollStyle.DrawerMode"
+        :mode="ScrollBoxStyle.DrawerMode"
         :enableFling="true"
         :sliderSize="{
           height: rScrollHeight == 0 ? style.height : rScrollHeight,
@@ -235,10 +239,6 @@ y=${newY}`
         </template>
       </jsv-scroll-box>
     </div>
-    <Scroll
-      :top="scrollY"
-      :scrollStyle="scrollStyle"
-      :scrollBlockStyle="scrollBlockStyle"
-    />
+    <Scroll :scrollStyle="scrollStyle" :scrollBlockStyle="scrollBlockStyle" />
   </jsv-focus-block>
 </template>