@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/QrcodeDemo/App.vue

@@ -1,68 +0,0 @@
-<script setup>
-import { JsvQrcode } from "jsview";
-import { ref, shallowRef } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const value = "http://www.baidu.com/";
-const size = 400;
-const fgColor = "#0000FF";
-const bgColor = "#ffff00";
-const level = "H"; // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
-const includeImage = true;
-const imageH = 64;
-const imageW = 64;
-const imageSrc =
-  "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
-const tipsInfo = `功能：二维码展示可配置项：1.前景色 
-2.背景色 
-3.指定小图标 
-4.容错级别：'L', 'M', 'Q', 'H'`;
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-  }
-  return true;
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div :style="{ width: 1280, height: 720, backgroundColor: '#D8D8D8' }">
-      <div
-        :style="{
-          textAlign: 'left',
-          fontSize: '30px',
-          lineHeight: '50px',
-          color: '#ffffff',
-          left: 200 + 420,
-          top: 100,
-          width: 400,
-          height: 50 * 8,
-          backgroundColor: 'rgba(27,38,151,0.8)',
-        }"
-      >
-        {{ tipsInfo }}
-      </div>
-      <div :style="{ left: 200, top: 100 }">
-        <jsv-qrcode
-          :value="value"
-          :size="size"
-          :fgColor="fgColor"
-          :bgColor="bgColor"
-          :level="level"
-          :imageSettings="
-            includeImage
-              ? { src: imageSrc, height: imageH, width: imageW }
-              : null
-          "
-        />
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>

package/samples/ScaleDownNeon/App.vue

@@ -1,107 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-10-24 13:19:41
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-10-24 13:50:18
- * @Description: file content
--->
-<script setup>
-import { useRouter } from "vue-router";
-const router = useRouter();
-
-const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
-const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
-const test3 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
-const test4 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
-
-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;
-};
-
-const style1 = {
-  left: 0,
-  top: 0,
-  width: 250,
-  height: 250,
-  borderRadius: "15px",
-};
-
-const style2 = {
-  left: 0,
-  top: 260,
-  width: 250,
-  height: 250,
-  borderRadius: "15px",
-};
-</script>
-<template>
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
-    <div class="allBgc">
-      <div class="block">
-        <div :style="{ left: 0, top: 0 }">
-          <div class="leftFont top0">
-            {{ `原图加载` }}
-          </div>
-          <div class="leftFont top250">
-            {{ `使用缩小算法优化` }}
-          </div>
-        </div>
-
-        <div :style="{ left: 120, top: 0 }">
-          <img alt="" :style="style1" :src="test4" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test4" />
-        </div>
-
-        <div :style="{ left: 380, top: 0 }">
-          <img alt="" :style="style1" :src="test1" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test1" />
-        </div>
-
-        <div :style="{ left: 640, top: 0 }">
-          <img alt="" :style="style1" :src="test2" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test2" />
-        </div>
-
-        <div :style="{ left: 900, top: 0 }">
-          <img alt="" :style="style1" :src="test3" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test3" />
-        </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: 100;
-  height: 200;
-  color: #ffffff;
-  font-size: 25px;
-}
-.top0 {
-  top: 0;
-}
-.top250 {
-  top: 250;
-}
-</style>

package/samples/SoundPool/App.vue

@@ -1,134 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-01-25 09:56:46
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 18:09:10
- * @Description: file content
--->
-<script setup>
-import coin from "./coin.mp3";
-import lose from "./lose.mp3";
-import bgmusic from "./bgmusic.mp3";
-import { JsvSoundPool, jJsvRuntimeBridge } from "jsview";
-import { onMounted, onBeforeUnmount, shallowRef } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const soundPool = new JsvSoundPool(10);
-let coinController1 = null;
-let coinController2 = null;
-let loseController1 = null;
-let loseController2 = null;
-let bgm = shallowRef(null);
-const _onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-    return true;
-  }
-  switch (ev.keyCode) {
-    case 37:
-      if (loseController1) {
-        loseController1.play();
-      }
-      break;
-    case 38:
-      if (coinController1) {
-        coinController1.play();
-      }
-      break;
-    case 39:
-      if (loseController2) {
-        loseController2.play();
-      }
-      break;
-    case 40:
-      if (coinController2) {
-        coinController2.play();
-      }
-      break;
-    case 13:
-      bgm.value?.play();
-      break;
-  }
-  return true;
-};
-soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
-  console.log("cchtest load succeed", audioController);
-  if (state === 0) {
-    coinController1 = audioController;
-  }
-});
-soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
-  if (state === 0) {
-    coinController2 = audioController;
-    coinController2.setLoop(0);
-  }
-});
-
-soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
-  if (state === 0) {
-    loseController1 = audioController;
-  }
-});
-soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
-  if (state === 0) {
-    loseController2 = audioController;
-  }
-});
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-onBeforeUnmount(() => {
-  coinController1 = null;
-  coinController2 = null;
-  loseController1 = null;
-  loseController2 = null;
-  soundPool.destroy();
-  bgm.value?.pause();
-  bgm.value?.unload();
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: _onKeyDown,
-    }"
-  >
-    <div :style="{ width: 1920, height: 1080, backgroundColor: '#FFFFFF' }">
-      <div
-        :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)',
-        }"
-      >
-        {{ `适合游戏场景的多音效混音效果` }}
-      </div>
-      <div
-        :style="{
-          left: 400,
-          top: 300,
-          width: 500,
-          height: 500,
-          color: '#000000',
-          textAlign: 'center',
-          fontSize: 30,
-        }"
-      >
-        {{
-          `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
-        }}
-      </div>
-      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
-    </div>
-  </jsv-focus-block>
-</template>

package/samples/SprayView/App.vue

@@ -1,272 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-13 11:19:26
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 17:09:58
- * @Description: file content
--->
-<script>
-import { JsvSpray } from "jsview";
-import snow from "./assets/snow.png";
-const sprayOk = {
-  type: 0,
-  particleNum: 100,
-  deltaAngle: 180,
-  deltaWidth: 50,
-  deltaHeight: 50,
-  pointSizeMin: 20,
-  pointSizeMax: 30,
-  speedMin: 1,
-  speedMax: 7,
-  lifeMin: 1000,
-  lifeMax: 2000,
-  accelerateX: 0,
-  accelerateY: 0,
-  addNumSpeed: 0.001,
-  enableFade: true,
-  enableShrink: true,
-};
-
-const sprayRotate = {
-  type: 1,
-  particleNum: 100,
-  deltaAngle: 0,
-  deltaWidth: 0,
-  deltaHeight: 50,
-  pointSizeMin: 10,
-  pointSizeMax: 20,
-  speedMin: 5,
-  speedMax: 10,
-  lifeMin: 1000,
-  lifeMax: 3000,
-  accelerateX: 0,
-  accelerateY: -100,
-  addNumSpeed: 0.001,
-  enableFade: true,
-  enableShrink: false,
-};
-
-const sprayMove = {
-  type: 1,
-  particleNum: 100,
-  deltaAngle: 20,
-  deltaWidth: 50,
-  deltaHeight: 50,
-  pointSizeMin: 10,
-  pointSizeMax: 20,
-  speedMin: 5,
-  speedMax: 10,
-  lifeMin: 1000,
-  lifeMax: 3000,
-  accelerateX: -50,
-  accelerateY: -120,
-  addNumSpeed: 0.001,
-  enableFade: true,
-  enableShrink: true,
-};
-
-const sprayCycle = {
-  type: 1,
-  particleNum: 200,
-  deltaAngle: 20,
-  deltaWidth: 20,
-  deltaHeight: 20,
-  pointSizeMin: 10,
-  pointSizeMax: 20,
-  speedMin: 0,
-  speedMax: 0,
-  lifeMin: 1000,
-  lifeMax: 3000,
-  accelerateX: 0,
-  accelerateY: 0,
-  addNumSpeed: 0.001,
-  enableFade: true,
-  enableShrink: false,
-};
-export default {
-  components: {
-    JsvSpray,
-  },
-  data() {
-    return {
-      okCount: 0,
-    };
-  },
-  setup() {
-    return {
-      sprayOk,
-      sprayRotate,
-      sprayMove,
-      sprayCycle,
-      snow,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      switch (ev.keyCode) {
-        case 13:
-          this.okCount++;
-          break;
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="root">
-    <jsv-focus-block
-      autoFocus
-      :onAction="{
-        onKeyDown: onKeyDown,
-      }"
-    >
-      <div :style="{ top: 400, left: 200 }">
-        <div class="spray-ok">
-          <jsv-spray
-            v-if="okCount > 0"
-            :key="okCount"
-            :pointRes="`url(${snow})`"
-            :sprayStyle="sprayOk"
-          />
-        </div>
-        <div class="describe">
-          {{ `#摁OK键\n#粒子在方形内生成\n#初速度方向360度随机\n#无外力作用` }}
-        </div>
-      </div>
-      <div :style="{ top: 400, left: 600 }">
-        <div class="spray-rotate">
-          <jsv-spray pointRes="rgba(0, 255, 0, 1)" :sprayStyle="sprayRotate" />
-        </div>
-        <div class="describe">
-          {{ `#粒子沿长边随机生成\n#初速度沿长边方向\n#受竖直方向的力作用` }}
-        </div>
-      </div>
-      <div :style="{ top: 400, left: 1000 }">
-        <div class="spray-move">
-          <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayMove" />
-        </div>
-        <div class="describe">
-          {{
-            `#粒子在方形随机生成\n#初速度方向为竖直向上方向正负20度内随机\n#受水平方向和竖直方向的力作用`
-          }}
-        </div>
-      </div>
-      <div :style="{ top: 20, left: 400 }">
-        <div
-          :style="{
-            width: 40,
-            height: 40,
-            animation: 'cycle 3s linear infinite',
-          }"
-        >
-          <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayCycle" />
-        </div>
-        <div
-          :style="{
-            top: 20,
-            width: 500,
-            height: 100,
-            lineHeight: '100px',
-            textAlign: 'center',
-            fontSize: '50px',
-            color: '#FFFFFF',
-          }"
-        >
-          粒子效果
-        </div>
-        <div class="describe">
-          {{ `#粒子在方形随机生成\n#初速度为0\n#不受外力` }}
-        </div>
-      </div>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-@keyframes move-back-force {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  25% {
-    transform: translate3d(100px, 0, 0);
-  }
-  50% {
-    transform: translate3d(0, 0, 0);
-  }
-  75% {
-    transform: translate3d(100px, 0, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate3d(0, 0, 1, 0);
-  }
-  to {
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-
-@keyframes cycle {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  25% {
-    transform: translate3d(500px, 0, 0);
-  }
-  50% {
-    transform: translate3d(500px, 100px, 0);
-  }
-  75% {
-    transform: translate3d(0, 100px, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-.root {
-  width: 1280px;
-  height: 720;
-  background-color: #334c4c;
-}
-
-.spray-ok {
-  width: 100px;
-  height: 100px;
-  background-color: #00ff00;
-}
-.spray-rotate {
-  width: 10px;
-  height: 100px;
-  background-color: #00ff00;
-  animation: rotate 3s linear infinite;
-}
-.spray-move {
-  width: 100px;
-  height: 100px;
-  background-color: #00ff00;
-  animation: move-back-force 10s linear infinite;
-}
-.spray-cycle {
-  width: 40px;
-  height: 40px;
-  animation: cycle 3s linear infinite;
-}
-.describe {
-  left: 0px;
-  top: 140px;
-  width: 250px;
-  height: 200px;
-  color: #ffffff;
-  font-size: 20px;
-}
-</style>