@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1073

package/GiftRain/App.vue

@@ -3,8 +3,7 @@
     <div
       :style="{ width: 1920, height: 1080, overflow: 'hidden', transform: 'scale3d(0.67,0.67,1)', left: -220 * 1.5 + 8, top: -170 - 8 }">
       <JsvPreload :preloadList="preload_info"></JsvPreload>
-      <div
-        :style="{ backgroundImage: bg, width: 1920, height: 1080, overflow: 'hidden' }">
+      <div :style="{ backgroundImage: resourceMap.bg, width: 1920, height: 1080, overflow: 'hidden' }">
         <Score :score="score"></Score>
         <JsvActorMove key="JsvSpriteTranslate" :style="{
           top: 476 * 1.5,
@@ -51,7 +50,7 @@
 
       </div>
       <!-- 音频 -->
-      <JsvSystemAudio key="AudioBg" :src="_AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
+      <JsvSystemAudio key="AudioBg" :src="resourceMap._AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
 
       <JsvSystemAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
 
@@ -61,43 +60,69 @@
 </template>
 <script setup>
 /* eslint-disable */
-import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo,JsvSystemAudio} from "jsview";
-import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo, JsvSystemAudio } from "jsview";
+import { shallowRef, onMounted, onBeforeUnmount, provide } from "vue";
 import { useRouter } from "vue-router";
 import Score from "./components/Score.vue";
 import RedPacket from "./components/RedPacket.vue";
 import Sound from "./common/Sound.js"
+import { getDataUrl } from "../CommonUtils/ResourceData"
 //音频Sound
 const MySound = new Sound()
+//接收是否有DemoResourceBase,没有则正常走公共网络地址。
+const DemoResourceBase = getDataUrl()
 //预加载信息
-const kimi_normal = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png';
-const kimi_smile = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png';
-const kimi_boom = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png';
-const red_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
-const bigRed_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png'
-const boom_image = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png'
-const bg = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg'
+const resourceMap = {
+  kimi_normal: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png',
+  kimi_smile: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png',
+  kimi_boom: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png',
+  red_packet: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png',
+  bigRed_packet: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png',
+  boom_image: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png',
+  bg: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg',
+  _ScoreBg: "http://oss.image.qcast.cn/demo_images/red_packet_rain/score_bg.png",
+  add1: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png',
+  add5: "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png",
+  min1: "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png",
+  _AudioBgUrl: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3"
+}
+if (DemoResourceBase) {
+  console.log('存在');
+  console.log(DemoResourceBase);
+  //正则进行替换
+  for (let i in resourceMap) {
+    //此正则规则是替换掉最后一个 / 前面的字符
+    resourceMap[i] = resourceMap[i].replace(/.*\/(.*)/, `${DemoResourceBase}/$1`);
+  }
+  //修改后暴露给子组件
+  provide("resourceMap", resourceMap)
+} else {
+  //暴露给子组件
+  provide("resourceMap", resourceMap)
+}
 const preload_info = [
-  buildPreloadInfo(kimi_normal),
-  buildPreloadInfo(kimi_smile),
-  buildPreloadInfo(kimi_boom),
-  buildPreloadInfo(red_packet),
-  buildPreloadInfo(bigRed_packet),
-  buildPreloadInfo(boom_image),
-  buildPreloadInfo(bg)
+  buildPreloadInfo(resourceMap.kimi_normal),
+  buildPreloadInfo(resourceMap.kimi_smile),
+  buildPreloadInfo(resourceMap.kimi_boom),
+  buildPreloadInfo(resourceMap.red_packet),
+  buildPreloadInfo(resourceMap.bigRed_packet),
+  buildPreloadInfo(resourceMap.boom_image),
+  buildPreloadInfo(resourceMap.bg),
+  buildPreloadInfo(resourceMap.add1),
+  buildPreloadInfo(resourceMap.add5),
+  buildPreloadInfo(resourceMap.min1)
 ];
 //定义不需要响应式的变量
 let _CurrentRain = null;
 //音频ref
 let _Audio = null;
-let _AudioBgUrl = "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3";
 //背景音频ref
 let _BgAudio = null;
 let _IsRunning = false;
 let _DisableEffectSound = true;
 let _TranslateControl = new JsvActorMoveControl()
 //定义需要响应式的变量
-let kimi = shallowRef("http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png")
+let kimi = shallowRef(resourceMap.kimi_normal)
 let score = shallowRef(0)
 let min_score_image = shallowRef(null)
 let add_score_image = shallowRef(null)
@@ -126,22 +151,22 @@ const _onImpactTracer = (rain) => {
     switch (rain.type) {
       case 0:
         scoreAddAnim.value = "scoreUp 0.2s";
-        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png";
-        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png";
+        kimi.value = resourceMap.kimi_normal;
+        add_score_image.value = resourceMap.add1;
         score.value += 1;
         MySound.playGetSound()
         break;
       case 1:
         scoreAddAnim.value = "scoreUp 0.2s";
-        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png";
-        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png";
+        kimi.value = resourceMap.kimi_smile;
+        add_score_image.value = resourceMap.add5;
         MySound.playGetSound()
         score.value += 5;
         break;
       case 2:
         scoreMinAnim.value = "scoreUp 0.2s";
-        min_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png";
-        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png";
+        min_score_image.value = resourceMap.min1;
+        kimi.value = resourceMap.kimi_boom;
         score.value -= 1;
         MySound.playBoomSound()
         if (score.value < 0) {

package/GiftRain/components/RedPacket.vue

@@ -1,38 +1,40 @@
 <template>
     <div>
         <div key="timer" :style="{
-            width: 140*1.5,
-            height: 140*1.5,
+            width: 140 * 1.5,
+            height: 140 * 1.5,
             backgroundImage: _ScoreBg,
-            top: 40*1.5,
-            left: 40*1.5,
+            top: 40 * 1.5,
+            left: 40 * 1.5,
             textAlign: 'center',
-            lineHeight: 140*1.5,
+            lineHeight: 140 * 1.5,
             color: 'rgba(255,0,0,1.0)',
-            fontSize: 72*1.5
+            fontSize: 72 * 1.5
         }">{{ timer }}</div>
         <SpriteTranslate v-for="(item, index) in itemList" :MoneyBag="props.MoneyBag" :onImpactTracer="onImpactTracer"
             :onDestory="_RemoveItem" :key="`spritetranslate${item.key}`" :item=item />
-</div>
+    </div>
 </template>
 
 <script setup>
-import { shallowRef, defineProps, onMounted, onBeforeUnmount } from 'vue';
+import { shallowRef, defineProps, onMounted, onBeforeUnmount, inject } from 'vue';
 import SpriteTranslate from './SpriteTranslate.vue';
 //定义props
 const props = defineProps({
     onImpactTracer: Function,
     MoneyBag: Object,
-    _ScoreMinAnimationEnd:Function,
-    _ScoreAddAnimationEnd:Function
+    _ScoreMinAnimationEnd: Function,
+    _ScoreAddAnimationEnd: Function
 })
+//接收
+const resourceMap = inject("resourceMap")
 let _Index = 0;
 // 随机生成列表
-const _RedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
-const _BigRedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png';
-const _BoomImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png';
-const _ScoreBg = "http://oss.image.qcast.cn/demo_images/red_packet_rain/score_bg.png";
-let itemList =shallowRef([])
+const _RedImage = resourceMap.red_packet;
+const _BigRedImage = resourceMap.bigRed_packet;
+const _BoomImage = resourceMap.boom_image;
+const _ScoreBg = resourceMap._ScoreBg;
+let itemList = shallowRef([])
 let timer = shallowRef(60)
 const onImpactTracer = props.onImpactTracer;
 let _TimerOutId = null;

package/JsvRadarChart/App.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: ZhengYi
+ * @Date: 2023-04-26 
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-04-26 
+ * @Description: file content
+-->
+<template>
+    <jsv-focus-block autoFocus :onAction="actionDefines">
+        <div :style="{
+                textAlign: 'center',
+                fontSize: 30,
+                lineHeight: 50,
+                color: '#ffffff',
+                left: 100,
+                top: 20,
+                width: 1280 - 200,
+                height: 50,
+                backgroundColor: 'rgba(27,38,151,0.8)',
+            }">按左键各个方向随机减少，按右键各个方向随机增加</div>
+        <JsvRadarChart :data="data" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style"
+            :fontSize="fontSize" :extendOffset="70" :fontColor="'#ff3212'" :radius="200" />
+        <JsvRadarChart :data="data2" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style2"
+            :fontSize="fontSize" :extendOffset="50" :fontColor="'#FFF231'" :radius="200" />
+    </jsv-focus-block>
+</template>
+  
+<script setup>
+import { JsvRadarChart } from "jsview";
+import resultSquare from "./assets/resultSquare.png"
+import bgImageUrl from "./assets/Square.png"
+import { onMounted, ref } from 'vue';
+import { jJsvRuntimeBridge } from 'jsview';
+import { useRouter } from "vue-router";
+const router = useRouter();
+const data = ref([
+    { title: '语文', value: 70 },
+    { title: '数学', value: 98 },
+    { title: '英语', value: 40 },
+    { title: '化学', value: 80 },
+    { title: '生物', value: 92 },
+    { title: '物理', value: 88 },
+])
+const data2 = ref([
+    { title: '语文', value: 30 },
+    { title: '数学', value: 40 },
+    { title: '英语', value: 50 },
+    { title: '化学', value: 40 },
+    { title: '生物', value: 44 },
+])
+
+const style = {
+    top: 400,
+    left: 300
+}
+const style2 = {
+    top: 400,
+    left: 950
+}
+const fontSize = 30;
+
+const onKeyDown = (ev) => {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        router.go(-1)
+    } else if (ev.keyCode == 39) {
+        data.value.forEach((item, index) => {
+            item.value += Math.random() * 10
+            if (item.value >= 100) {
+                item.value = 100
+            }
+        })
+        data2.value.forEach((item, index) => {
+            item.value += Math.random() * 10
+            if (item.value >= 100) {
+                item.value = 100
+            }
+        })
+    } else if (ev.keyCode == 37) {
+        data.value.forEach((item, index) => {
+            item.value -= Math.random() * 10
+            if (item.value <= 10) {
+                item.value == 8
+            }
+        })
+        data2.value.forEach((item, index) => {
+            item.value -= Math.random() * 10
+            if (item.value <= 10) {
+                item.value == 8
+            }
+        })
+    }
+}
+const actionDefines = {
+    onKeyDown
+}
+
+</script>
+  
+<style scoped></style>

package/MetroWidgetDemos/SkeletonDiagram/App.vue

@@ -0,0 +1,78 @@
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  useFocusHub,
+  JsvPosterImage,
+  JsvPosterDiv,
+} from "jsview";
+import Item from "./Item.vue";
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import data from "./data.js";
+
+const router = useRouter();
+const focusHub = useFocusHub();
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: 10,
+    marginTop: 10,
+  };
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+
+const provideData = () => {
+  return data;
+};
+
+onMounted(() => {
+  focusHub.setFocus("myFocusWidget");
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+    :onKeyDown="onKeyDown"
+  >
+    <metro-widget
+      name="myFocusWidget"
+      :top="50"
+      :left="50"
+      :width="1000"
+      :height="550"
+      :direction="VERTICAL"
+      :provideData="provideData"
+      :measures="measures"
+      :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+      :enableItemRenderBreak="true"
+      :placeHolderSetting="{
+        backgroundColor: 'rgba(78,105,127, 0.8)',
+        gap: 10,
+      }"
+    >
+      <template #renderItem="{ data, query, onEdge, onAction }">
+        <item
+          :data="data"
+          :query="query"
+          :onEdge="onEdge"
+          :onAction="onAction"
+        />
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/SkeletonDiagram/Item.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { JsvPosterImage, JsvPosterDiv } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+
+let focused = ref(false);
+
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  console.log(`item ${props.query.id} clicked`);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.25s linear',
+      transform: focused ? 'scale3d(1.1, 1.1, 1)' : '',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -10,
+        top: -10,
+        width: props.data.width + 20,
+        height: props.data.height + 20,
+        backgroundColor: '#770088',
+      }"
+    >
+    </div>
+    <div v-if="query.index % 2 == 0">
+      <jsv-poster-image
+        :style="{
+          width: data.width,
+          height: data.height,
+        }"
+        :src="data.url"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+          }"
+        />
+      </jsv-poster-image>
+      <div
+        :style="{
+          width: 40,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "img" }}
+      </div>
+    </div>
+    <div v-else>
+      <jsv-poster-div
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundImage: `url(${data.url})`,
+        }"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+          }"
+        />
+      </jsv-poster-div>
+      <div
+        :style="{
+          width: 40,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "div" }}
+      </div>
+    </div>
+  </div>
+</template>