@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/TextureAnimation/utils/FrameCanvasStore.ts

@@ -1,68 +0,0 @@
-import {
-    JsvTextureStoreApi,
-} from "jsview";
-
-declare interface CacheInfoType {
-    borderRadius: number;
-    lineWidth: number;
-    canvasSourceId: String;
-    borderOutset: number;
-    canvasWidth: number;
-}
-
-let sCurrentCacheList: Array<CacheInfoType> = [];
-
-function checkCache(border_radius: number, line_width: number): CacheInfoType | null {
-    for (let cache_item of sCurrentCacheList) {
-        if (cache_item.borderRadius == border_radius && cache_item.lineWidth == line_width) {
-            return cache_item;
-        }
-    }
-    return null;
-}
-
-function BuildFrame(border_radius: number, line_width: number): CacheInfoType {
-    let frame_cache: CacheInfoType | null;
-
-    frame_cache = checkCache(border_radius, line_width);
-    if (frame_cache != null) {
-        return frame_cache;
-    }
-
-    let sampleImageWidth = (border_radius + line_width + 3) * 2;
-    let canvasRef = JsvTextureStoreApi.canvasTexture(
-        sampleImageWidth,
-        sampleImageWidth
-    ); // 创建画布
-
-    let circleInnerDiameter = border_radius * 2; // 环形内直径, 为所要包括图形的borderRadius的一倍
-    let circleLineWidth = line_width; // 线宽
-    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, "#000000FF"); // 以给定线宽绘制圆环
-    let source_id = canvasRef.commit(); // texture和div的textureStore绑定
-
-    frame_cache = {
-        canvasWidth: sampleImageWidth,
-        borderRadius: border_radius,
-        lineWidth: line_width,
-        canvasSourceId: source_id,
-        borderOutset: Math.floor((sampleImageWidth - circleInnerDiameter) / 2), // (画布 - 圆环内直径) / 2
-    };
-
-    // 永远保存，不删除，界面上理论上不会有太多种转框，所以只存不清理
-    sCurrentCacheList.push(frame_cache);
-
-    console.log("Rotate frame cache increase to " + sCurrentCacheList.length);
-
-    return frame_cache;
-}
-
-export {
-    BuildFrame,
-}

package/TextureAnimation/utils/RotateFrame.vue

@@ -1,146 +0,0 @@
-<script setup>
-import { defineProps } from "vue";
-import { JsvTextureAnim, DECORATE_NINEPATCH_ALPHA_MIX } from "jsview";
-import { BuildFrame } from "./FrameCanvasStore";
-import mask from "./circleHaloMask.png";
-
-const rProps = defineProps({
-  // 旋转圈内的url，可以是import内容，也可以是https内容
-  imageUrl: {
-    type: String,
-    require: true,
-  },
-
-  // 所包含区域的left, top, width, height
-  left: {
-    type: Number,
-    default: 0,
-  },
-  top: {
-    type: Number,
-    default: 0,
-  },
-  width: {
-    type: Number,
-    require: true,
-  },
-  height: {
-    type: Number,
-    require: true,
-  },
-
-  // 所包含区域的圆角值borderRadius
-  borderRadius: {
-    type: Number,
-    require: true,
-  },
-
-  // 焦点框的线宽
-  lineWidth: {
-    type: Number,
-    require: true,
-  },
-
-  // 焦点框旋转一圈所用的时间
-  oneCircleTime: {
-    type: Number,
-    default: 0.5, // 转一圈0.5秒
-  },
-
-  // 是否需要外发光光晕
-  withHalo: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * 设置转盘的绘制覆盖区域
-   * 注意texture的尺寸需要兼顾最大的view即可
-   */
-  maxViewSize: {
-    type: Object, // { width: Number, height: Number },
-    default: {
-      width: 400,
-      height: 400,
-    },
-  },
-});
-
-// 基础旋转动画
-const cRotateAnimation =
-  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
-
-/**
- * 创建右图的边缘遮罩，可调节边框的粗细:circleLineWidth
- */
-// 设置设定模拟绘制.9图
-const cFrameInfo = BuildFrame(rProps.borderRadius, rProps.lineWidth);
-
-// 创建内边框(实心不发光部分)
-const ninePatchDecorator1 = {
-  type: DECORATE_NINEPATCH_ALPHA_MIX,
-  url: `jsvtexturestore://${cFrameInfo.canvasSourceId}`,
-  imageWidth: cFrameInfo.canvasWidth, // 等同于画布宽
-  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
-  borderOutset: cFrameInfo.borderOutset, // (画布 - 圆环内直径) / 2
-  animTime: rProps.oneCircleTime,
-};
-
-/**
- * 导入右图的边缘光晕部分的遮罩
- */
-// 外发光的圈的图片信息, 完全按照 circleHaloMask来配置
-const cOriginPngInfo = {
-  size: 160, // 图片尺寸
-  radius: 56, // 图片中的圆的圆内半径
-};
-const cRectRadius = Math.floor(rProps.borderRadius + rProps.lineWidth); // 光环在描边之外，留出描边的宽度
-const ninePatchDecorator2 = {
-  type: DECORATE_NINEPATCH_ALPHA_MIX,
-  url: `url(${mask})`,
-  imageWidth: cOriginPngInfo.size,
-  imageDspWidth: Math.floor(
-    (cRectRadius / cOriginPngInfo.radius) * cOriginPngInfo.size
-  ),
-  centerWidth: 2,
-  borderOutset: Math.floor(cOriginPngInfo.size / 2 - cOriginPngInfo.radius),
-  animTime: rProps.oneCircleTime,
-};
-
-const texCoord = {
-  width: rProps.maxViewSize.width,
-  height: rProps.maxViewSize.height,
-};
-</script>
-<template>
-  <div>
-    <!-- 光晕(halo)在下，实心区域在上 -->
-    <jsv-texture-anim
-      v-if="rProps.withHalo"
-      :src="rProps.imageUrl"
-      :left="rProps.left"
-      :top="rProps.top"
-      :width="rProps.width"
-      :height="rProps.height"
-      :texCoord="texCoord"
-      :animation="cRotateAnimation"
-      :duration="5000"
-      :repeat="-1"
-      :autoStart="true"
-      :decorate="ninePatchDecorator2"
-    ></jsv-texture-anim>
-    <jsv-texture-anim
-      :src="rProps.imageUrl"
-      :left="rProps.left"
-      :top="rProps.top"
-      :width="rProps.width"
-      :height="rProps.height"
-      :texCoord="texCoord"
-      :animation="cRotateAnimation"
-      :duration="5000"
-      :repeat="-1"
-      :autoStart="true"
-      :decorate="ninePatchDecorator1"
-    ></jsv-texture-anim>
-  </div>
-</template>

package/ThrowMoveDemo/AccelerateDemo.vue

@@ -1,85 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05 
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef, computed } from "vue"
-const props = defineProps({
-  name: String,
-})
-let direction = shallowRef(1)
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-let focusNode = shallowRef(null)
-
-const directionDetail = computed(() => {
-  return direction.value > 0 ? "上" : "下";
-})
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode === 13) {
-    let preDirection = direction.value;
-    direction.value = -direction.value;
-    throwControl.throwAlongY(
-      0,
-      750 * preDirection,
-      {
-        type: "catch",
-        position: 200 * preDirection,
-        direction: preDirection,
-      },
-      (x, y) => {
-        console.log(`Throw end with x=${x} y=${y}`);
-      }
-    );
-    return true;
-  }
-  return false;
-}
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
-      {{ `向${directionDetail}加速` }}
-    </div>
-    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
-      {{ `当前方向:${directionDetail}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/ThrowMoveDemo/App.vue

@@ -1,104 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:08
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05 
- * @Description: file content
--->
-<script setup>
-import LRParabolicDemo from "./LRParabolicDemo.vue";
-import UDParabolicDemo from "./UDParabolicDemo.vue";
-import TargetDemo from "./TargetDemo.vue";
-import AccelerateDemo from "./AccelerateDemo.vue";
-import { shallowRef } from "vue"
-import { useRouter } from "vue-router"
-
-const router=useRouter()
-let  demoIndex=shallowRef(0)
-
-const  onKeyDown=(ev)=>{
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      if (ev.keyCode === 37) {
-        demoIndex.value = demoIndex.value - 1 < 0 ? 3 : demoIndex.value - 1;
-      } else if (ev.keyCode === 39) {
-        demoIndex.value = demoIndex.value + 1 > 3 ? 0 : demoIndex.value + 1;
-      }
-      return true;
-    }
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#000000',
-    }"
-  >
-    <div
-      key="leftWall"
-      :style="{
-        top: 0,
-        left: 425,
-        width: 5,
-        height: 620,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="rightWall"
-      :style="{
-        top: 0,
-        left: 850,
-        width: 5,
-        height: 620,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="bottomWall"
-      :style="{
-        top: 620,
-        left: 425,
-        width: 430,
-        height: 5,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="GuidText1"
-      className="{CssStyles.FontStyle.getName()}"
-      :style="{ top: 625, left: (1280 - 430) / 2, width: 430, height: 40 }"
-    >
-      {`按OK键进行跳跃和转向`}
-    </div>
-    <div
-      key="GuidText2"
-      className="{CssStyles.FontStyle.getName()}"
-      :style="{ top: 625 + 40, left: (1280 - 430) / 2, width: 430, height: 40 }"
-    >
-      {`左右键切换不同模式的Demo`}
-    </div>
-    <jsv-focus-block
-      autoFocus
-      ref="focusNode"
-      :onAction="{
-        onKeyDown: onKeyDown,
-      }"
-    >
-      <LRParabolicDemo
-        v-if="demoIndex === 0"
-        name="/actorMove"
-      ></LRParabolicDemo>
-      <UDParabolicDemo v-if="demoIndex === 1" name="/udDemo"></UDParabolicDemo>
-      <TargetDemo v-if="demoIndex === 2" name="/targetDemo"></TargetDemo>
-      <AccelerateDemo
-        v-if="demoIndex === 3"
-        name="/accelerateDemo"
-      ></AccelerateDemo>
-    </jsv-focus-block>
-  </div>
-</template>

package/ThrowMoveDemo/LRParabolicDemo.vue

@@ -1,101 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:01:59
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef } from "vue";
-
-const props = defineProps({
-  name: String,
-});
-
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-let direction = shallowRef(1);
-
-function onKeyDown(ev) {
-  switch (ev.keyCode) {
-    case 13:
-      direction.value = -direction.value;
-
-      moveControl.moveToX(195 * direction.value, 250, (x, y) => {
-        console.log(`Move end with x=${x} y=${y}`);
-      });
-      throwControl.throwAlongY(
-        -500,
-        750,
-        { type: "catch", position: 0, direction: 1 },
-        (x, y) => {
-          console.log(`Throw end with x=${x} y=${y}`);
-        },
-        () => {
-          console.log("Get to the pole...");
-        }
-      );
-      return true;
-  }
-  return false;
-}
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
-      抛物线运动
-    </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
-      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#00FF00', width: 30, height: 30 }"
-          ></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/ThrowMoveDemo/TargetDemo.vue

@@ -1,87 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef } from "vue";
-
-const props = defineProps({
-  name: String,
-})
-let direction = shallowRef(1)
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-let focusNode=shallowRef(null)
-
-const  onKeyDown=(ev)=>{
-      if (ev.keyCode === 13) {
-        let preDirection = direction.value;
-        direction.value = -direction.value;
-        moveControl.moveToX(195 * direction.value, 250, (x, y) => {
-          console.log(`Move end with x=${x} y=${y}`);
-        });
-        const position = (-100 * preDirection) / 2;
-        throwControl.throwAlongY(
-          -500 * preDirection,
-          750 * preDirection,
-          {
-            type: "catch",
-            position,
-            direction: -1 * preDirection,
-          },
-          (x, y) => {
-            console.log(`Throw end with x=${x} y=${y}`);
-          }
-        );
-        return true;
-      }
-      return false;
-    }
-
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
-      拐点前触碰目标点
-    </div>
-    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
-      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/ThrowMoveDemo/UDParabolicDemo.vue

@@ -1,92 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05 
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef, computed } from "vue";
-
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-let focusNode=shallowRef(null)
-
-const props = defineProps({
-  name: String,
-})
-let direction = shallowRef(1)
-
-const directionDetail = computed(() => {
-  return direction.value < 0 ? "上" : "下";
-})
-const detail = computed(() => {
-  return direction.value < 0 ? "向上抛物" : "向下掷物并弹起";
-})
-
-const  onKeyDown=(ev)=>{
-      let preDirection = direction.value;
-      switch (ev.keyCode) {
-        case 13:
-          direction.value = -direction.value;
-          throwControl.throwAlongY(
-            -400 * preDirection,
-            550 * preDirection,
-            {
-              type: "catch",
-              position: 100 * preDirection,
-              direction: preDirection,
-            },
-            (x, y) => {
-              console.log(`Throw end with x=${x} y=${y}`);
-            }
-          );
-          return true;
-      }
-      return false;
-    }
-
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
-      {{ detail }}
-    </div>
-    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
-      {{ `当前方向:${directionDetail}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>