@shijiu/jsview-vue-samples 1.9.747

package/TextureAnimation/App2.vue

@@ -0,0 +1,111 @@
+<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/TextureSize/App.vue

@@ -0,0 +1,132 @@
+<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/ThrowMoveDemo/AccelerateDemo.vue

@@ -0,0 +1,116 @@
+<!--
+ * @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/ThrowMoveDemo/App.vue

@@ -0,0 +1,114 @@
+<!--
+ * @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/ThrowMoveDemo/LRParabolicDemo.vue

@@ -0,0 +1,115 @@
+<!--
+ * @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>