@shijiu/jsview-vue-samples 2.2.201 → 2.2.373

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>