@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0

package/CanvasDrawChart/Graph2.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    :style="{
+      width: 400,
+      height: 400,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 400,
+      height: 400,
+      backgroundImage: `url(jsvtexturestore://${sourceId})`,
+    }"
+  ></div>
+  <div
+    v-for="pos in position"
+    :key="pos.x + pos.y"
+    :style="{
+      left: pos.x - 5,
+      top: pos.y - 5,
+      width: 10,
+      height: 10,
+      backgroundColor: '#00ff0055',
+    }"
+  ></div>
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "jsview";
+import { JsvDashPath } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const chartHelper = JsvTextureStoreApi.getChartHelper(
+  400,
+  400,
+  [-50, 450],
+  [-50, 450]
+);
+const canvas = chartHelper.getCanvas();
+
+//绘制x轴
+const { path: xAxis } = chartHelper.linePath(
+  [
+    { x: -30, y: 0 },
+    { x: 430, y: 0 },
+  ],
+  0,
+  0
+);
+xAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+//绘制y轴
+const { path: yAxis } = chartHelper.linePath(
+  [
+    { x: 0, y: -30 },
+    { x: 0, y: 430 },
+  ],
+  0,
+  0
+);
+yAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+const data = [
+  { x: 0, y: 200 },
+  { x: 50, y: 130 },
+  { x: 100, y: 200 },
+  { x: 150, y: 150 },
+  { x: 200, y: 300 },
+  { x: 250, y: 100 },
+  { x: 300, y: 20 },
+  { x: 350, y: 150 },
+  { x: 400, y: 10 },
+];
+
+//绘制折线图(不闭合)
+/**
+ * linePath参数说明
+ * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+ * @param isBroken {boolean} 是否为折线
+ * @param close {number} 
+ *          0: 不闭合,绘制线段用, 
+ *          1: 闭合到x轴(自动绘制左右两端垂直于x轴的线段), 需要填充颜色时用
+ *          2: 闭合到y轴(自动绘制上下两端垂直于y轴的线段), 需要填充颜色时用
+ * @returns {CustomPath, Data[]} 路径对象和数据点数组，每个点包含 x 和 y 坐标
+ */
+const { path, position } = chartHelper.linePath(data, true, 0);
+path.strokeWithSetting({
+  lineWidth: 2,
+  color: "#0088FF",
+  dash: [10, 5],
+  phase: 0,
+});
+
+//绘制柱状图
+const originPos = chartHelper.getOriginPosition();
+//data2Pos获取数据点对应的坐标
+const pos2 = chartHelper.data2Pos(data);
+for (const pos of pos2) {
+  const rect = canvas.rectPath(pos.x - 10, pos.y, pos.x + 10, originPos.y);
+  rect.fill("#0000FF88");
+}
+
+const sourceId = canvas.commit();
+onBeforeUnmount(() => {
+  //注意释放资源
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>

package/CssPreprocessor/Scss/PanelData.js

@@ -40,7 +40,7 @@ const contentListData = [
     { title: "关键帧- @keyframes", obj: ScssKeyframes},
   ],
   [
-    { title: "导入- @import", obj: ScssImporting, zoom: 2 },
+    { title: "导入- @use", obj: ScssImporting, zoom: 2 },
     { title: undefined, obj: undefined, zoom: 0 },
   ],
 ];

package/CssPreprocessor/Scss/components/scss-group4/ScssMaps.vue

@@ -18,14 +18,15 @@ export default {
 </template>
 
 <style scoped lang='scss'>
+@use 'sass:map';
+
 $font-sizes: (
   small: 10, medium: 14, large: 18,
 );
 
 .scss-map {
-  font-size: map-get($font-sizes,
-                     medium);
-
+  font-size: map.get($font-sizes, medium);
+  
   color: #126085;
   left: 10;
   top: 3;

package/CssPreprocessor/Scss/components/scss-group5/ScssImporting.vue

@@ -9,7 +9,7 @@ export default {
     {{'ScssImportFile.vue\n'
     + '\n'
     + '<style scoped lang=\'scss\'>\n'
-    + '@import \'./TextSettings\';\n'
+    + '@use \'./TextSettings\';\n'
     + '</style>\n'
     + '\n'
     + '=================\n'
@@ -28,7 +28,7 @@ export default {
 </template>
 
 <style scoped lang='scss'>
-@import './TextSettings';
+@use './TextSettings';
 .scss-bounds {
   left: 10;
   top: 0;

package/DemoForOperator/Bounce/FreeMoveBuilder.js

@@ -119,7 +119,7 @@ export function buildBounce(
         cmds.state().removeConditionByGroup(condGroupId),
 
         // wallPosition用于规避运动路程计算超出(times越大超出越多)时，解决动画结尾的回弹问题
-        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0, undefined).then([
+        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0).then([
             cmds.action().teleportTo(0, undefined),
             cmds.action().setSpdAndAccel(0, undefined, undefined, undefined),
         ]),

package/DemoForOperator/Firework1/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#00000055' }"></div>
-  <Fireworks :top="500" :left="600" :srcConfig="config" />
+  <Fireworks :top="500" :left="600" :srcConfig="config" :onShoot="onShoot" :onExplode="onExplode" />
 </template>
 
 <script setup>
@@ -22,4 +22,15 @@ const config = {
   //精灵图素材
   fireworkSpriteSrc: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/fireworks.png",
 };
+
+const onShoot = () => {
+  //可以加音效
+  console.log("onShoot");
+}
+
+const onExplode = () => {
+  //可以加音效
+  console.log("onExplode");
+}
+
 </script>

package/DemoForOperator/Firework1/Fireworks.vue

@@ -196,6 +196,12 @@ const props = defineProps({
   srcConfig: { 
     type: Object, 
     require: true 
+  },
+  onShoot: {
+    type: Function,
+  },
+  onExplode: {
+    type: Function,
   }
 });
 
@@ -236,6 +242,7 @@ const spray = () => {
   timer.id2 = setTimeout(() => {
     let randomIndex = Math.floor(Math.random() * sprayArray.length);
     sprayArray[randomIndex].value = true;
+    onExplode()
     timer.id = setInterval(() => {
       let remainingItems = sprayArray.filter((item) => !item.value);
       if (remainingItems.length === 0) {
@@ -244,6 +251,7 @@ const spray = () => {
       } else {
         randomIndex = Math.floor(Math.random() * remainingItems.length);
         remainingItems[randomIndex].value = true;
+        onExplode();
       }
     }, 100);
   }, 500);
@@ -355,6 +363,14 @@ for (let i = 1; i <= 5; i++) {
   remainingGroups.splice(randomIndex, 1);
 }
 
+const onShoot = () => {
+  props.onShoot?.();
+}
+
+const onExplode = () => {
+  props.onExplode?.();
+}
+
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
     myShow.value = true;
@@ -376,11 +392,13 @@ watch(readyNum, (n, o) => {
             cmds.action().stopMoving(),
             () => {
               isSpray.value = true;
+              onExplode();
               isShow.value = false;
               spray();
             },
           ]),
       ]);
+      onShoot();
     }, 0);
   }
 });

package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue

@@ -17,6 +17,7 @@
       :shaderStr="shaderSetting.shader"
       :autoplay="true"
       :textures="shaderSetting.textures"
+      :loadComfirmed="true"
       :onEnd="onAnimEnd"
     ></jsv-frag-shader-view>
 

package/DemoForOperator/Focus/Alpha/Item.vue

@@ -46,6 +46,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       明暗

package/DemoForOperator/Focus/Light/Item.vue

@@ -47,6 +47,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       旋转光

package/DemoForOperator/Focus/Normal/Item.vue

@@ -46,6 +46,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       普通

package/DemoForOperator/FrameShadow/FrameShadow.vue

@@ -43,7 +43,7 @@ const cImageMaps = {
     "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow.png",
   down: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow-down.png",
 };
-const vImageUrl = cImageMaps[props.type];
+let vImageUrl = cImageMaps[props.type];
 if (vImageUrl === undefined) {
   vImageUrl = cImageMaps["surround"];
 }

package/DemoForOperator/Genie/App.vue

@@ -6,7 +6,7 @@
       onKeyDown,
     }"
   >
-    <Genie
+    <GenieSlot
       ref="cGenieRef"
       :width="width"
       :height="height"
@@ -16,7 +16,7 @@
       :position="position"
       :time="1"
       :onAnimEnd="onAnimEnd"
-      :initShow="true"
+      :initShow="false"
     >
       <img
         :src="`url(${imageUrl})`"
@@ -44,12 +44,12 @@
       >
         按OK键进场/出场
       </div>
-    </Genie>
+    </GenieSlot>
   </jsv-focus-block>
 </template>
 <script setup>
-import Genie from "./geniePakcer/Genie.vue";
-import { shallowRef } from "vue";
+import GenieSlot from "./geniePakcer/GenieSlot.vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 
 const cGenieRef = shallowRef();
 const position = { x: -80, y: 600 };
@@ -59,13 +59,27 @@ const imageUrl =
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
 
 let imgLoaded = false;
+let unmounted = false;
+
+onBeforeUnmount(()=>{
+  unmounted = true;
+})
+
 function onImgLoaded() {
-  imgLoaded = true;
+  // 进行setTimeout(1), 为了规避已加载的图片onLoad太早破坏了先绘制再截图的时序
+  setTimeout(()=>{
+    imgLoaded = true;
+    if (!unmounted) {
+      cGenieRef.value.switcher();
+    }
+  }, 1)
 }
+
 const onAnimEnd = () => {
   console.log("anim end");
 };
 
+
 function onKeyDown(ev) {
   if (ev.keyCode == 13) {
     if (imgLoaded) {

package/DemoForOperator/Genie/App2.vue

@@ -0,0 +1,61 @@
+<template>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+    <jsv-focus-block
+      autoFocus
+      :onAction="{
+        onKeyDown,
+      }"
+    >
+      <GenieImage
+        ref="cGenieRef"
+        :width="width"
+        :height="height"
+        :left="128"
+        :top="72"
+        direction="horizontal"
+        :position="position"
+        :time="1"
+        :onAnimEnd="onAnimEnd"
+        :initShow="false"
+        :imageUrl="imageUrl"
+      >
+       
+      </GenieImage>
+    </jsv-focus-block>
+  </template>
+  <script setup>
+  import GenieImage from "./geniePakcer/GenieImage.vue";
+  import { shallowRef, onBeforeUnmount, onMounted } from "vue";
+  
+  const cGenieRef = shallowRef();
+  const position = { x: -80, y: 600 };
+  const width = 1024;
+  const height = 576;
+  const imageUrl =
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+  
+  let imgLoaded = false;
+  let unmounted = false;
+  
+  onBeforeUnmount(()=>{
+    unmounted = true;
+  })
+  
+  const onAnimEnd = () => {
+    console.log("anim end");
+  };
+  
+  function onKeyDown(ev) {
+    if (ev.keyCode == 13) {
+      cGenieRef.value.switcher();
+      return true;
+    }
+    return false;
+  }
+
+  onMounted(()=>{
+    cGenieRef.value.switcher();
+  })
+
+  </script>
+