@shijiu/jsview-vue-samples 1.9.747

package/ImpactStop/App.vue

@@ -0,0 +1,435 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-08-31 10:17:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-31 11:17:20
+ * @Description: file content
+-->
+<script setup>
+import {
+  JsvActorMoveControl,
+  JsvActorMove,
+  createImpactTracer,
+  createImpactCallback,
+  createImpactAutoFroze,
+} from "jsview";
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const CONST_BOARD_LEFT = 0;
+const CONST_BOARD_RIGHT = 1;
+const CONST_BOARD_MID = 2;
+
+const CONST_BOX_WIDTH = 30;
+const CONST_BOX_HEIGHT = 30;
+
+const horizontalControl = new JsvActorMoveControl();
+const verticalControl = new JsvActorMoveControl();
+const boxLeft = shallowRef(null);
+const boxMid = shallowRef(null);
+const boxRight = shallowRef(null);
+const actorVertical = { current: null };
+const actorHorizontal = { current: null };
+const actor = shallowRef(null);
+
+let viewsAutoFroze = null;
+let sensorList = [];
+let onBoard = CONST_BOARD_LEFT;
+let keyPressed = false;
+const actorState = {
+  jumping: false,
+  hMoving: false,
+};
+const showPrecisionGuild = ref(true);
+const direction = ref(1);
+const bodyState = ref(0);
+const isJsView = Boolean(window.JsView);
+
+const actorColor = computed(() => {
+  switch (bodyState.value) {
+    case 0: // 静止
+      return "#FF00FF";
+    case 1: // 跳起
+      return "#FFFF00";
+    case 2: // 落下
+      return "#00FFFF";
+    default:
+      return "#FFFFFF";
+  }
+});
+
+const onImpact = (impact_type) => {
+  // 根据碰撞层来调整滑块的状态(接触板信息)
+  console.log(`On impacted type=${impact_type}`);
+  bodyState.value = 0;
+  onBoard = impact_type;
+  switch (impact_type) {
+    case CONST_BOARD_MID:
+      verticalControl.jumpTo(0, -200); // jumpTo处理微小穿模的复位，-200为中间层和起始位置的高度差
+      horizontalControl.pause();
+      break;
+    case CONST_BOARD_LEFT:
+      verticalControl.jumpTo(0, 0);
+      horizontalControl.pause();
+      direction.value = 1;
+      break;
+    case CONST_BOARD_RIGHT:
+      verticalControl.jumpTo(0, 0);
+      horizontalControl.pause();
+      direction.value = -1; // 反向
+      break;
+    default:
+      break;
+  }
+  actorState.jumping = false;
+};
+
+const onLanding = () => {
+  // 滑块未与左中右任何一个板发生碰撞，落在了地板的时候
+  console.log("On landing");
+  bodyState.value = 0;
+  actorState.jumping = false;
+  reset();
+};
+
+const reset = () => {
+  console.log("On reset");
+  // 将两个运动都停止后再进行jumpTo，以保证两个jumpTo动作在同一帧完成
+  verticalControl.pause(() => {
+    horizontalControl.pause(() => {
+      verticalControl.jumpTo(0, 0);
+      horizontalControl.jumpTo(0, 0);
+      onBoard = CONST_BOARD_LEFT;
+      showPrecisionGuild.value = true;
+      direction.value = 1;
+    });
+  });
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  if (actorState.jumping) {
+    // 跳跃中，键盘锁定
+    return true;
+  }
+
+  if (keyPressed) {
+    // KeyPress控制按键连点
+    return true;
+  }
+
+  // 控制按键按下时，键盘锁定
+  keyPressed = true;
+
+  // 滑块位置可能发生变更，所以消除动画精度测试的描素文字
+  if (showPrecisionGuild.value) {
+    showPrecisionGuild.value = false;
+  }
+
+  if (ev.keyCode === 13) {
+    // 滑块跳跃(纵向和横向的配置值都是计算过的，为了进行第一跳的精度测试)
+    actorState.jumping = true;
+    // 垂直方向抛物运动
+    bodyState.value = 1;
+    verticalControl.throwAlongY(
+      -1000,
+      2450,
+      { type: "catch", position: 100, direction: 1 },
+      () => {
+        onLanding();
+      }, // 未碰撞落地时，对滑块位置进行重置
+      () => {
+        bodyState.value = 2;
+      } // 调整成落下状态
+    );
+    // 水平方向，按照direction的值，移动到屏幕两端
+    if (direction.value > 0) {
+      horizontalControl.moveToX(1200 - CONST_BOX_WIDTH, 400, null);
+    } else {
+      horizontalControl.moveToX(0, 400, null);
+    }
+  } else if (ev.keyCode === 37) {
+    // 滑块向左移动
+    actorState.hMoving = true;
+    // 分三个区域设定移动范围
+    let target_x = 0;
+    if (onBoard === CONST_BOARD_LEFT) {
+      target_x = 0;
+    } else if (onBoard === CONST_BOARD_MID) {
+      target_x = 500;
+    } else if (onBoard === CONST_BOARD_RIGHT) {
+      target_x = 800;
+    }
+    horizontalControl.moveToX(target_x, 300, null);
+  } else if (ev.keyCode === 39) {
+    // 滑块向右移动
+    actorState.hMoving = true;
+    // 分三个区域设定移动范围
+    let target_x = 0;
+    if (onBoard === CONST_BOARD_LEFT) {
+      target_x = 396 - CONST_BOX_WIDTH;
+    } else if (onBoard === CONST_BOARD_MID) {
+      target_x = 699 - CONST_BOX_WIDTH;
+    } else if (onBoard === CONST_BOARD_RIGHT) {
+      target_x = 1199 - CONST_BOX_WIDTH;
+    }
+    horizontalControl.moveToX(target_x, 350, null);
+  }
+  return true;
+};
+
+const onKeyUp = () => {
+  keyPressed = false;
+
+  if (actorState.hMoving) {
+    // 停止用户通过左右键发起的水平移动
+    horizontalControl.pause(null);
+    actorState.hMoving = false;
+  }
+};
+
+onMounted(() => {
+  /* 关联碰撞体处理要在didMount中进行 */
+
+  /* 将碰撞发生后要停止动画的元素打包 */
+  viewsAutoFroze = createImpactAutoFroze(
+    [actorVertical.current, actorHorizontal.current],
+    null
+  ); // 此句柄最好保留，未来可以通过此句柄统一进行views list更新
+
+  /* 构建左边碰撞区 */
+  sensorList.push(
+    createImpactTracer(
+      actor.value,
+      boxLeft.value,
+      createImpactCallback(() => {
+        onImpact(CONST_BOARD_LEFT);
+      }, null),
+      viewsAutoFroze
+    )
+  );
+
+  /* 构建中间碰撞区 */
+  sensorList.push(
+    createImpactTracer(
+      actor.value,
+      boxMid.value,
+      createImpactCallback(() => {
+        onImpact(CONST_BOARD_MID);
+      }, null),
+      viewsAutoFroze
+    )
+  );
+
+  /* 构建右边碰撞区 */
+  sensorList.push(
+    createImpactTracer(
+      actor.value,
+      boxRight.value,
+      createImpactCallback(() => {
+        onImpact(CONST_BOARD_RIGHT);
+      }, null),
+      viewsAutoFroze
+    )
+  );
+
+  reset();
+});
+
+onBeforeUnmount(() => {
+  /* 重要! 退出后应该释放所有碰撞监听者 */
+  for (const sensor of sensorList) {
+    sensor.Recycle();
+  }
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onKeyUp,
+    }"
+    :style="{ width: 1280, height: 720, backgroundColor: '#000000' }"
+  >
+    <div
+      v-if="isJsView"
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1280 - 200,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      JsView环境下不会穿透模型
+    </div>
+
+    <div
+      key="bottomWall"
+      :style="{
+        top: 620,
+        left: 40,
+        width: 1200,
+        height: 5,
+        backgroundColor: '#F0FFF0',
+      }"
+    />
+
+    <div
+      key="leftFloor"
+      :style="{
+        top: 520,
+        left: 40,
+        width: 397,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+
+    <!-- 碰撞体的高度要比每帧移动距离大，因为碰撞判断是每帧内进行判断，并不连续，距离太小可能穿模 -->
+
+    <div
+      key="leftFloorImp"
+      ref="boxLeft"
+      :style="{
+        top: 520,
+        left: 40,
+        width: 397,
+        height: 15,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+      }"
+    />
+
+    <div
+      key="midFloor"
+      :style="{
+        top: 320,
+        left: 540,
+        width: 200,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="midFloorImp"
+      ref="boxMid"
+      :style="{
+        top: 320,
+        left: 540,
+        width: 200,
+        height: 15,
+        backgroundColor: 'rgba(0,0,0,0)',
+      }"
+    />
+
+    <div
+      key="rightFloor"
+      :style="{
+        top: 520,
+        left: 840,
+        width: 400,
+        height: 5,
+        backgroundColor: '#F0F000',
+      }"
+    />
+    <div
+      key="rightFloorImp"
+      ref="boxRight"
+      :style="{
+        top: 520,
+        left: 820,
+        width: 400,
+        height: 15,
+        backgroundColor: 'rgba(0,0,0,0)',
+      }"
+    />
+
+    <div
+      v-if="showPrecisionGuild"
+      key="PrecisionGuideText"
+      class="text"
+      :style="{ top: 528, left: 40, width: 405, height: 40 }"
+    >
+      JSV下,立刻起跳会精确到边缘
+    </div>
+
+    <div
+      key="GuideText1"
+      class="text"
+      :style="{ top: 625, left: 370, width: 540, height: 40 }"
+    >
+      左右键调整跳跃起点，按OK键进行跳跃
+    </div>
+    <div
+      key="DirectText"
+      class="text"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${direction > 0 ? "->" : "<-"}` }}
+    </div>
+
+    <div key="actor" :style="{ top: 520 - CONST_BOX_HEIGHT - 2, left: 40 }">
+      <jsv-actor-move
+        key="horizontal"
+        :refDefine="actorHorizontal"
+        :control="horizontalControl"
+      >
+        <jsv-actor-move
+          key="vertical"
+          :refDefine="actorVertical"
+          :control="verticalControl"
+        >
+          <div
+            ref="actor"
+            :style="{
+              backgroundColor: actorColor,
+              width: CONST_BOX_WIDTH,
+              height: CONST_BOX_HEIGHT,
+            }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+
+    <!-- 一个无限动画元素，来测试卡顿 -->
+    <div
+      :style="{
+        top: 100,
+        left: 50,
+        height: 150,
+        width: 150,
+        backgroundColor: '#334455',
+        animation: 'impact-stop-anim-rotate 1s infinite linear',
+      }"
+    />
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes impact-stop-anim-rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 270deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.text {
+  font-size: 30px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/Input/App.vue

@@ -0,0 +1,164 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-01-20 16:09:31
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:34:30
+ * @Description: file content
+-->
+<script>
+import { InputType, EdgeDirection, useFocusHub } from "jsview";
+import InputPanel from "./InputPanel.vue";
+
+export default {
+  components: {
+    InputPanel,
+  },
+  setup() {
+    return {
+      name: "/input",
+      InputType,
+      focusHub: useFocusHub(),
+    };
+  },
+  methods: {
+    _onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      }
+      return true;
+    },
+    _onFocus() {
+      this.focusHub.setFocus(this.name + "/normal");
+    },
+    _panel1OnEdge(edgeInfo) {
+      if (edgeInfo.direction == EdgeDirection.right) {
+        this.focusHub.setFocus(this.name + "/password");
+      }
+    },
+    _panel2OnEdge(edgeInfo) {
+      if (edgeInfo.direction == EdgeDirection.left) {
+        this.focusHub.setFocus(this.name + "/normal");
+      } else if (edgeInfo.direction == EdgeDirection.right) {
+        this.focusHub.setFocus(this.name + "/number");
+      }
+    },
+    _panel3OnEdge(edgeInfo) {
+      if (edgeInfo.direction == EdgeDirection.left) {
+        this.focusHub.setFocus(this.name + "/password");
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+      onFocus: _onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        top: 100,
+        left: 100,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        文字输入-左对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/normal'"
+          :type="InputType.TEXT"
+          textAlign="left"
+          placeholder="请输入"
+          :onEdge="_panel1OnEdge"
+        />
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: 100,
+        left: 500,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        密码输入-右对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/password'"
+          :type="InputType.PASSWORD"
+          textAlign="right"
+          placeholder="请输入"
+          :onEdge="_panel2OnEdge"
+        />
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: 100,
+        left: 900,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        数字输入-右对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/number'"
+          :type="InputType.NUMBER"
+          textAlign="right"
+          placeholder="请输入"
+          :onEdge="_panel3OnEdge"
+        />
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/Input/FullKeyboard.vue

@@ -0,0 +1,87 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-01-25 10:27:17
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 13:37:59
+ * @Description: file content
+-->
+<script>
+import { VERTICAL, SimpleWidget } from "jsview";
+import KeyboardItem from "./KeyboardItem.vue";
+
+function _initData() {
+  const result = [];
+  result.push({
+    width: 120,
+    height: 40,
+    focusable: true,
+    content: "删除",
+  });
+  result.push({
+    width: 120,
+    height: 40,
+    focusable: true,
+    content: "清空",
+  });
+  for (let i = 0; i < 36; ++i) {
+    result.push({
+      width: 40,
+      height: 40,
+      focusable: true,
+      content:
+        i < 26 ? String.fromCharCode(i + 65) : String.fromCharCode(i - 26 + 48),
+    });
+  }
+  return result;
+}
+
+export default {
+  components: {
+    SimpleWidget,
+    KeyboardItem,
+  },
+  props: {
+    name: String,
+    onClick: Function,
+    onEdge: Function,
+  },
+  setup() {
+    return {
+      direction: VERTICAL,
+      data: _initData(),
+    };
+  },
+  methods: {
+    _measures(item) {
+      return {
+        width: item.width,
+        height: item.height,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <simple-widget
+    ref="sw"
+    :name="name"
+    :data="data"
+    :width="260"
+    :height="300"
+    :padding="{ left: 10, right: 10, top: 10, bottom: 10 }"
+    :direction="direction"
+    :measures="_measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <keyboard-item
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :onClick="onClick"
+      />
+    </template>
+  </simple-widget>
+</template>