@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/ScrollBoxTest/SizeDivBar.vue

@@ -0,0 +1,139 @@
+<template>
+  <!-- 进度条 -->
+  <div :style="{ top: rProps.top, left: rProps.left }">
+    <div ref="rPressDetectDiv" :style="{ width: 800, height: 84 }">
+      <JsvScrollBox
+        ref="rJsvScrollBox"
+        :linkName="cLinkName"
+        :style="{
+          width: 800,
+          height: 84,
+        }"
+        :direction="HORIZONTAL"
+        :sliderSize="{
+          width: 84,
+        }"
+      >
+        <!-- 用位置固定的区域来进行进度条展示(FixedBox) -->
+        <template #FixedBox="{ boxWidth, boxHeight }">
+          <!-- 进度条背景色 -->
+          <div
+            :style="{
+              width: boxWidth,
+              height: boxHeight,
+              backgroundColor: 'rgba(255,255,255,0.3)',
+              borderRadius: Math.floor(boxHeight / 2),
+            }"
+          />
+
+          <!-- 正向进度的颜色(对圆角div进行剪切) -->
+          <JsvScrollFollow
+            :proxyType="ScrollBoxStyle.SizeDiv"
+            :proxyProps="{
+              style: {
+                backgroundColor: 'rgba(255,255,255,0.7)',
+                borderRadius: Math.floor(boxHeight / 2),
+              },
+            }"
+            :syncWith="cLinkName"
+            :varWidth="{
+              start: boxHeight /* 最小尺寸为一个小圆形 */,
+              end: boxWidth,
+            }"
+            :varHeight="boxHeight"
+          />
+
+          <!-- 进度文字 -->
+          <div
+            :style="{
+              width: boxWidth,
+              height: boxHeight,
+              lineHeight: boxHeight,
+              fontSize: Math.floor(boxHeight * 0.5),
+              textAlign: 'center',
+              color: 'rgba(0,0,0,1)',
+            }"
+          >
+            {{ `进度:${rPercentDisp}` }}
+          </div>
+        </template>
+
+        <!-- 进度游标球(SliderBox) -->
+        <template #SliderBox="{ boxWidth, boxHeight }">
+          <div
+            :style="{
+              top: -15,
+              left: -15,
+              width: boxWidth + 30,
+              height: boxHeight + 30,
+              backgroundColor: 'rgba(255, 0,0,0.5)',
+              borderRadius: Math.floor((boxHeight + 30) / 2),
+            }"
+            @click="fncOnClick"
+          />
+        </template>
+      </JsvScrollBox>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import {
+  JsvScrollBox,
+  JsvScrollFollow,
+  ScrollBoxStyle,
+  HORIZONTAL,
+} from "jsview";
+import { numberCheckSet } from "../../jsview-vue/utils";
+
+let rProps = defineProps({
+  top: {
+    Type: Number,
+    default: 0,
+  },
+  left: {
+    Type: Number,
+    default: 0,
+  },
+});
+
+const cLinkName = "ScrollBoxTest_SizeDivSlider";
+
+//进度百分比
+let myProgress = shallowRef(20);
+
+let fncOnClick = () => {
+  console.log("SizeDiv slider OnClicked");
+};
+
+let rJsvScrollBox = shallowRef(null);
+let rPressDetectDiv = shallowRef(null);
+let rPercentDisp = shallowRef(0);
+
+onMounted(() => {
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+
+  // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
+  rJsvScrollBox.value.updatePercent(0.2);
+
+  // 注册按下抬起的监听
+  rPressDetectDiv.value.jsvSetTapListener({
+    onTouchStart: () => {console.log(" touch start")},
+    onTouchEnd: () => {
+      rPercentDisp.value =
+        Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;
+      console.log("+SizeDiv release percent=" + rPercentDisp.value);
+    },
+  });
+});
+</script>
+
+<style scoped></style>

package/SprayMove/App.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#0000FF' }">
+    <div v-for="(item, index) in CenterSet">
+      <SprayMove
+        v-if="showArray[index]"
+        :center="item.center"
+        :color="item.color"
+        :num="item.num"
+      ></SprayMove>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SprayMove from "./SprayMove.vue";
+import { onMounted, reactive } from "vue";
+
+//随机数(6-12)
+const getRandomNumber = (min = 6, max = 12) => {
+  const result = Math.floor(Math.random() * (max - min + 1)) + min;
+  return result;
+};
+//组件配置
+const CenterSet = [
+  {
+    center: { x: 100, y: 100 },
+    num: getRandomNumber(),
+    color: "#FFFF00",
+  },
+  {
+    center: { x: 200, y: 500 },
+    num: getRandomNumber(),
+    color: "#00FF00",
+  },
+  {
+    center: { x: 820, y: 200 },
+    num: getRandomNumber(),
+    color: "#FFA500",
+  },
+  {
+    center: { x: 900, y: 500 },
+    num: getRandomNumber(),
+    color: "#FF0000",
+  },
+  {
+    center: { x: 500, y: 320 },
+    num: getRandomNumber(),
+    color: "#FFFFFF",
+  },
+];
+//定时器控制实现烟花绚烂效果
+const showArray = reactive([]);
+CenterSet.forEach((item, index) => {
+  showArray.push(false);
+});
+showArray[0] = true;
+console.log(showArray);
+
+const timer = { id: -1 };
+
+onMounted(() => {
+  timer.id = setInterval(() => {
+    const index = showArray.indexOf(false); // 找到第一个 false 的索引
+    if (index !== -1) {
+      showArray[index] = true; // 将第一个 false 改为 true
+      console.log(showArray);
+    } else {
+      // 如果数组内所有的 false 都变为 true，清除定时器
+      clearInterval(timer.id);
+    }
+  }, 1000); // 每 1.5 秒执行一次
+});
+</script>
+
+<style lang="scss" scoped></style>

package/SprayMove/SprayMove.vue

@@ -0,0 +1,173 @@
+<script setup>
+/**
+ * @file  SprayMove组件说明
+ *   prayMove: 烟花行进组件
+ *       props说明:
+ *           @prop {Object}         center       (必填)    中心点
+ *           @prop {String}         color        (必填)    烟花颜色
+ *           @prop {Number}         num          (必填)   烟花数量
+ *
+ */
+import {
+  JsvSpray,
+  JsvFreeMoveActor,
+  JsvTextureStoreApi,
+  FreeMoveDef,
+  FreeMoveFunc,
+} from "jsview";
+import { shallowRef, onMounted } from "vue";
+const props = defineProps({
+  color: { type: String, default: "#FFFFFF" },
+  center: { type: Object, require: true },
+  num: { type: Number, default: 12 },
+});
+console.log("props.num", props.num);
+
+//画圆形
+let canvasRef;
+let sourceId = shallowRef("");
+const bitmap = {
+  width: 10,
+  height: 10,
+};
+canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
+let customPath = canvasRef.circlePath(5, 5, 4);
+customPath.fill(props.color);
+sourceId.value = canvasRef.commit();
+
+//FreeMove
+let actorRef = [];
+const actEvents = FreeMoveDef.ActEventDefine;
+let interactNexus = FreeMoveFunc.newNexus();
+//粒子效果
+const ImgData = [`jsvtexturestore://${sourceId.value}`];
+const sprayBoom = {
+  type: 0,
+  particleNum: 500,
+  deltaAngle: 180,
+  deltaWidth: 10,
+  deltaHeight: 10,
+  pointSizeMin: 2,
+  pointSizeMax: 5,
+  speedMin: 0.5,
+  speedMax: 3,
+  lifeMin: 1000,
+  lifeMax: 2000,
+  accelerateX: 0,
+  accelerateY: 0,
+  enableFade: true,
+  enableShrink: true,
+};
+const spraySet = {
+  type: 1,
+  particleNum: 50,
+  deltaAngle: 20,
+  deltaWidth: 5,
+  deltaHeight: 5,
+  pointSizeMin: 2,
+  pointSizeMax: 5,
+  speedMin: 0,
+  speedMax: 0,
+  lifeMin: 1000,
+  lifeMax: 1500,
+  accelerateX: 0,
+  accelerateY: 0,
+  particleAddSpeed: 0.05,
+  enableFade: true,
+  enableShrink: false,
+  angularVelocityMin: 360,
+  angularVelocityMax: 1440,
+  alphaMin: 0.5,
+  alphaMax: 1,
+};
+//控制整个组件的关闭
+let show = shallowRef(true);
+//动画处理
+const move = () => {
+  actorRef.forEach((item, index) => {
+    item.control.run((cmds) => [
+      cmds
+        .action(0, 0, interactNexus)
+        .setSpdAndAccel(2, undefined, -0.02, undefined, () => {}, null),
+      cmds
+        .condition()
+        .onNexusEvent(interactNexus, actEvents.SpeedRevertX)
+        .then([
+          cmds.action().stopMoving(),
+          () => {
+            show.value = false;
+          },
+        ]),
+    ]);
+  });
+};
+onMounted(() => {
+  move();
+});
+</script>
+<template>
+  <div v-if="show">
+    <div
+      :style="{
+        top: props.center.y + 10,
+        left: props.center.x + 10,
+        width: 10,
+        height: 10,
+      }"
+    >
+      <jsv-spray
+        v-for="item in ImgData"
+        :pointRes="item"
+        :sprayStyle="sprayBoom"
+        :ignoreClip="true"
+      />
+    </div>
+    <div
+      v-for="(item, index) in props.num"
+      :style="{
+        top: props.center.y,
+        left: props.center.x,
+        width: 45,
+        height: 45,
+        transform: `rotate3d(0, 0, 1, ${(index * 360) / props.num}deg)`,
+      }"
+    >
+      <jsv-free-move-actor
+        :top="0"
+        :left="0"
+        :width="10"
+        :height="10"
+        :ref="(el) => (actorRef[index] = el)"
+      >
+        <div
+          :style="{
+            width: 10,
+            height: 10,
+            backgroundImage: `jsvtexturestore://${sourceId}`,
+          }"
+        >
+          <div>
+            <!-- 粒子效果 -->
+            <div
+              :style="{
+                top: 0,
+                left: -8,
+                width: 10,
+                height: 10,
+              }"
+            >
+              <jsv-spray
+                v-for="item in ImgData"
+                :pointRes="item"
+                :sprayStyle="spraySet"
+                :ignoreClip="true"
+              />
+            </div>
+          </div>
+        </div>
+      </jsv-free-move-actor>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/SprayView/App.vue

@@ -33,7 +33,6 @@ const sprayOk = {
   lifeMax: 2000,
   accelerateX: 0,
   accelerateY: 0,
-  addNumSpeed: 0.001,
   enableFade: true,
   enableShrink: true,
 };
@@ -52,7 +51,7 @@ const sprayRotate = {
   lifeMax: 3000,
   accelerateX: 0,
   accelerateY: -100,
-  addNumSpeed: 0.001,
+  particleAddSpeed: 0.1,
   enableFade: true,
   enableShrink: false,
 };
@@ -71,7 +70,7 @@ const sprayMove = {
   lifeMax: 3000,
   accelerateX: -50,
   accelerateY: -120,
-  addNumSpeed: 0.001,
+  particleAddSpeed: 0.1,
   enableFade: true,
   enableShrink: true,
 };
@@ -90,11 +89,11 @@ const sprayCycle = {
   lifeMax: 3000,
   accelerateX: 0,
   accelerateY: 0,
-  addNumSpeed: 0.001,
+  particleAddSpeed: 0.01,
   enableFade: true,
   enableShrink: false,
-  angularVelocityMin: 3.14 * 2,
-  angularVelocityMax: 3.14 * 8,
+  angularVelocityMin: 360,
+  angularVelocityMax: 1440,
   alphaMin: 0.5,
   alphaMax: 1,
 };
@@ -113,11 +112,11 @@ const sprayFall = {
   lifeMax: 6000,
   accelerateX: 0,
   accelerateY: -30,
-  addNumSpeed: 0.001,
+  particleAddSpeed: 0.1,
   enableFade: false,
   enableShrink: false,
-  angularVelocityMin: 3.14 * 2,
-  angularVelocityMax: 3.14 * 8,
+  angularVelocityMin: 360,
+  angularVelocityMax: 1440,
   alphaMin: 0.5,
   alphaMax: 1,
 };

package/TestNativeSharedView/App.vue

@@ -26,6 +26,8 @@ let _Index = 0;
 //给两个div给定不同的响应式变量
 let view1 = shallowRef("null");
 let view2 = shallowRef("null");
+let view1Dsp = shallowRef("null");
+let view2Dsp = shallowRef("null");
 let isShow = shallowRef(false);
 let isStop = shallowRef(false);
 //创造出需要的四个属性的对象
@@ -47,10 +49,10 @@ const obj = (newValue) => {
 };
 //监听
 watch(view1, (n, o) => {
-  view1 = obj(n);
+  view1Dsp.value = obj(n);
 });
 watch(view2, (n, o) => {
-  view2 = obj(n);
+  view2Dsp.value = obj(n);
   isShow.value = true;
 });
 // 每2秒进行位置变化以测试位置信息更新
@@ -167,7 +169,7 @@ onMounted(() => {
         {{ "view1的参数" }}
       </div>
       <div
-        v-for="(value, key, index) in view1"
+        v-for="(value, key, index) in view1Dsp"
         :style="{
           top: 30 + index * 40,
           left: 10,
@@ -195,7 +197,7 @@ onMounted(() => {
       </div>
       <div v-if="isShow">
         <div
-          v-for="(value, key, index) in view2"
+          v-for="(value, key, index) in view2Dsp"
           :style="{
             top: 30 + index * 40,
             left: 130,

package/TextShadowDemo/App.vue

@@ -23,8 +23,8 @@ const TextData = [
   },
   {
     id: 3,
-    title: "#格式颜色(蓝色)",
-    textShadow: "4 4 0.5 #0000EF",
+    title: "#格式颜色(蓝色+小数点)",
+    textShadow: "4 4 3.3 #0000EF",
   },
 ]
 
@@ -62,7 +62,7 @@ const onKeyDown = (ev) => {
           textAlign: 'center',
           lineHeight: 40,
         }">
-          文字阴影
+          {{ "文字阴影" + item.id }}
         </JsvTextBox>
       </div>
     </div>