@shijiu/jsview-vue-samples 1.9.747

package/QrcodeDemo/App.vue

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

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

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

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