@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/TextureAnimation/App2.vue

@@ -1,111 +0,0 @@
-<script setup>
-import { ref, shallowRef, reactive } from "vue";
-import { useRouter } from "vue-router";
-import {
-  jJsvRuntimeBridge,
-  getKeyFramesGroup,
-  JsvTextureAnim,
-  TexAlignAnchor,
-  DECORATE_NINEPATCH_ALPHA_MIX,
-  DECORATE_BORDER_RADIUS,
-} from "jsview";
-import img from "./assets/light.png";
-import img2 from "./assets/light2.png";
-import mask from "./assets/mask.png";
-
-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);
-const rotateAnimation =
-  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
-
-const ninePatchDecorator = {
-  type: DECORATE_NINEPATCH_ALPHA_MIX,
-  url: `url(${mask})`,
-  imageWidth: 86,
-  centerWidth: 2,
-  borderOutset: 0,
-  animTime: 0.5,
-};
-//注意texture的尺寸需要兼顾最大的view
-const texCoord = {
-  width: 600,
-  height: 600,
-};
-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;
-};
-</script>
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onKeyDown="onKeyDown"
-    :style="{
-      width: 1280,
-      height: 720,
-      backgroundImage:
-        'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
-    }"
-  >
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
-        color: '#ffffff',
-        left: 140,
-        top: 20,
-        width: 1000,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
-      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
-    </div>
-    <div>
-      <jsv-texture-anim
-        :src="img"
-        :left="left"
-        :top="top"
-        :width="width"
-        :height="height"
-        :texCoord="texCoord"
-        :animation="rotateAnimation"
-        :duration="2000"
-        :repeat="-1"
-        :autoStart="true"
-        :decorate="ninePatchDecorator"
-      ></jsv-texture-anim>
-    </div>
-    <div>
-      <jsv-texture-anim
-        :src="img2"
-        :left="left + 500"
-        :top="top"
-        :width="width"
-        :height="height"
-        :texCoord="texCoord"
-        :animation="rotateAnimation"
-        :duration="2000"
-        :repeat="-1"
-        :autoStart="true"
-        :decorate="ninePatchDecorator"
-      ></jsv-texture-anim>
-    </div>
-  </jsv-focus-block>
-</template>

package/samples/TextureSize/App.vue

@@ -1,132 +0,0 @@
-<script setup>
-import jpegDemo from "./jpegDemo.jpeg";
-import pngDemo from "./pngDemo.png";
-import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
-import bmpDemo from "./bmpDemo.bmp";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    if (window.JsView) {
-      window.JsView.setGlobalConfig({
-        texCache: -1,
-      });
-    }
-
-    router.go(-1); // 有router时，回退
-    return true;
-  }
-  return false;
-};
-</script>
-<template>
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
-    <div class="allBgc">
-      <div class="block">
-        <div :style="{ left: 0, top: 0 }">
-          <div class="leftFont top0">
-            {{ `原图加载\n内存占用由图片尺寸决定` }}
-          </div>
-          <div class="leftFont top250">
-            {{
-              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量基本没变，但更省内存`
-            }}
-          </div>
-        </div>
-
-        <div :style="{ left: 220, top: 0 }">
-          <img alt="" class="graphSize top0" :src="bmpDemo" />
-          <img
-            alt=""
-            class="graphSize top250"
-            jsvImgScaledownTex
-            :src="bmpDemo"
-          />
-          <div class="underFont">
-            {{ `bmp图片\n指定尺寸噪点明显更大` }}
-          </div>
-        </div>
-
-        <div :style="{ left: 440, top: 0 }">
-          <img alt="" class="graphSize top0" :src="jpegDemo" />
-          <img
-            alt=""
-            class="graphSize top250"
-            jsvImgScaledownTex
-            :src="jpegDemo"
-          />
-          <div class="underFont">
-            {{ "jpg/jpeg图片" }}
-          </div>
-        </div>
-
-        <div :style="{ left: 660, top: 0 }">
-          <img alt="" class="graphSize top0" :src="pngDemo" />
-          <img
-            alt=""
-            :src="pngDemo"
-            class="graphSize top250"
-            jsvImgScaledownTex
-          />
-          <div class="underFont">
-            {{ `png有透明图片\n指定尺寸有明显锯齿` }}
-          </div>
-        </div>
-
-        <div :style="{ left: 880, top: 0 }">
-          <img alt="" class="graphSize top0" :src="pngNoAlphaDemo" />
-          <img
-            alt=""
-            :src="pngNoAlphaDemo"
-            class="graphSize top250"
-            jsvImgScaledownTex
-          />
-          <div class="underFont">
-            {{ `png无透明图片` }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-<style scoped>
-.allBgc {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-.block {
-  left: 20;
-  top: 50;
-}
-.leftFont {
-  left: 0;
-  width: 210;
-  height: 200;
-  color: #ffffff;
-  font-size: 30px;
-}
-.top0 {
-  top: 0;
-}
-.top250 {
-  top: 250;
-}
-.graphSize {
-  left: 0;
-  width: 200;
-  height: 200;
-  border-radius: 15px 15px 15px 15px;
-}
-.underFont {
-  left: 0;
-  top: 500;
-  width: 200;
-  height: 200;
-  color: #ffffff;
-  font-size: 20px;
-}
-</style>

package/samples/ThrowMoveDemo/AccelerateDemo.vue

@@ -1,116 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:11:05
- * @Description: file content
--->
-<script>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  computed: {
-    directionDetail() {
-      return this.direction > 0 ? "上" : "下";
-    },
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode === 13) {
-        let preDirection = this.direction;
-        this.direction = -this.direction;
-        this.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="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: 32px;
-  color: #73665c;
-  line-height: 40px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32px;
-  color: #f7f7eb;
-  line-height: 30px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/samples/ThrowMoveDemo/App.vue

@@ -1,114 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:08
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-25 09:38:21
- * @Description: file content
--->
-<script>
-import LRParabolicDemo from "./LRParabolicDemo.vue";
-import UDParabolicDemo from "./UDParabolicDemo.vue";
-import TargetDemo from "./TargetDemo.vue";
-import AccelerateDemo from "./AccelerateDemo.vue";
-
-export default {
-  components: {
-    LRParabolicDemo,
-    UDParabolicDemo,
-    TargetDemo,
-    AccelerateDemo,
-  },
-  data() {
-    return {
-      demoIndex: 0,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      if (ev.keyCode === 37) {
-        this.demoIndex = this.demoIndex - 1 < 0 ? 3 : this.demoIndex - 1;
-      } else if (ev.keyCode === 39) {
-        this.demoIndex = this.demoIndex - +1 > 3 ? 0 : this.demoIndex + 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/samples/ThrowMoveDemo/LRParabolicDemo.vue

@@ -1,115 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:01:59
- * @Description: file content
--->
-<script>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 13:
-          this.direction = -this.direction;
-
-          this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
-            console.log(`Move end with x=${x} y=${y}`);
-          });
-          this.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: 32px;
-  color: #73665c;
-  line-height: 40px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32px;
-  color: #f7f7eb;
-  line-height: 30px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>