@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/SprayView/App.vue

@@ -1,270 +1,270 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-13 11:19:26
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:21:18
- * @Description: file content
--->
-<script>
-import JsvSpray from "jsview/utils/JsViewVueWidget/JsvSpray";
-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: 1920px;
-  height: 1080px;
-  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;
-}
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 11:19:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-18 14:21:18
+ * @Description: file content
+-->
+<script>
+import JsvSpray from "jsview/utils/JsViewVueWidget/JsvSpray";
+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: 1920px;
+  height: 1080px;
+  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>