@shijiu/jsview-vue 0.9.631 → 1.9.628

package/samples/ImpactStop/App.vue

@@ -1,435 +0,0 @@
-<!--
- * @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, 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 = ref(null);
-const boxMid = ref(null);
-const boxRight = ref(null);
-const actorVertical = { current: null };
-const actorHorizontal = { current: null };
-const actor = ref(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/utils/JsViewVueTools/JsvImpactTracer.js

@@ -1,113 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2022-08-30 10:54:42
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-30 10:54:44
- * @Description: file content
- */
-/**
- * Created by donglin.lu@qcast.cn on 4/30/2020.
- */
-
-/*
- * 【模块 export 内容】
- * createImpactTracer: 函数，创建碰撞跟踪对象
- * createImpactCallback: 函数，创建碰撞发生后的回调函数
- * createImpactAutoFroze: 函数，注册碰撞发生后，控制动画立刻停止的管理对象
- * updateImpactAutoFroze: 函数，更新 createImpactAutoFroze 创建的碰撞即停管理对象中管理的运动元素列表
- */
-
-import { Forge } from "../../dom/jsv-forge-define";
-
-/*
- * createImpactCallback 参数说明:
- *      on_contact      (function[]) 接受碰撞事件的回调
- *      on_dis_contact  (function[]) 接受物体分离事件的回调
- *  返回值:
- *      Object  句柄，用于传输给 createImpactTracer
- */
-function createImpactCallback(on_contact, on_dis_contact) {
-  return new Forge.sImpactSensorManager.Callback(on_contact, on_dis_contact);
-}
-
-/*
- * createImpactTracer 参数说明:
- *      ele1        (Element)   html element句柄，1号碰撞体
- *      ele2        (Element)   html element句柄，2号碰撞体
- *      callback    (Object)   由 createImpactCallback 创建的回调构造体句柄
- *      auto_froze  (Object)   由 createImpactAutoFroze 创建的碰撞即停构造体句柄
- *  返回值:
- *      Object  句柄，提供 Recycle() 函数用于停止碰撞检测，需要再componentWillUnmount进行调用(清理)
- */
-function createImpactTracer(ele1, ele2, callback, auto_froze) {
-  return Forge.sImpactSensorManager.StartTrace(ele1.jsvMainView, ele2.jsvMainView, callback, auto_froze);
-}
-
-// 创建用于设置碰撞即停管理对象的参数
-// 结果用于函数 createImpactAutoFroze 和 updateImpactAutoFroze
-function _ConvertToViewsList(elements_array) {
-  const views_array = [];
-  if (elements_array) {
-    for (const ele of elements_array) {
-      views_array.push(ele.jsvMainView);
-    }
-  }
-  return views_array;
-}
-
-/*
- * createImpactAutoFroze 参数说明:
- *      element_auto_froze_pre_impact   (Array<Element>)    关联运动元素的列表,这些元素碰撞前一帧停止运动
- *      element_auto_froze_on_impact    (Array<Element>)    关联运动元素的列表,这些元素碰撞当前帧停止运动
- *  返回值:
- *      Object  句柄，用于传输给 createImpactTracer，也用于 updateImpactAutoFroze 调整关联元素
- *
- *  【注意点】
- *        多个碰撞对可以共享同一个碰撞管理对象，并且建议共享同一个对象以提升效率
- *        该管理对象中的view的列表可以通过 updateImpactAutoFrozeHandler进行更新，
- *        更新后立刻在对所有的共享此管理对象的碰撞对中生效
- */
-function createImpactAutoFroze(element_auto_froze_pre_impact, element_auto_froze_on_impact) {
-  if (!element_auto_froze_pre_impact && !element_auto_froze_on_impact) {
-    // Nothing to set
-    return;
-  }
-
-  const pre_impact_list = _ConvertToViewsList(element_auto_froze_pre_impact);
-  const on_impact_list = _ConvertToViewsList(element_auto_froze_on_impact);
-
-  return new Forge.sImpactSensorManager.AutoFroze(
-    (pre_impact_list.length > 0 ? pre_impact_list : null),
-    (on_impact_list.length > 0 ? on_impact_list : null));
-}
-
-/*
- * updateImpactAutoFroze 参数说明:
- *      handler                         (Object)            由 createImpactAutoFroze 创建的句柄
- *      element_auto_froze_pre_impact   (Array<Element>)    关联运动元素的列表,这些元素碰撞前一帧停止运动
- *      element_auto_froze_on_impact    (Array<Element>)    关联运动元素的列表,这些元素碰撞当前帧停止运动
- *  返回值:
- *      无
- */
-function updateImpactAutoFroze(handler, element_auto_froze_pre_impact, element_auto_froze_on_impact) {
-  if (handler instanceof Forge.sImpactSensorManager.AutoFroze) {
-    console.error("Error: handler type error");
-    return;
-  }
-
-  const pre_impact_list = _ConvertToViewsList(element_auto_froze_pre_impact);
-  const on_impact_list = _ConvertToViewsList(element_auto_froze_on_impact);
-
-  // 更新碰撞即停列表
-  handler.UpdatePreImpactList((pre_impact_list.length > 0 ? pre_impact_list : null));
-
-  // 更新接触接触即停列表
-  handler.UpdateOnImpactList((on_impact_list.length ? on_impact_list : null));
-}
-
-export {
-  createImpactCallback,
-  createImpactTracer,
-  createImpactAutoFroze,
-  updateImpactAutoFroze,
-};