@shijiu/jsview-vue 0.0.1-beta.0

package/samples/SprayView/App.vue

@@ -0,0 +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;
+}
+</style>

package/samples/SpriteImage/App.vue

@@ -0,0 +1,174 @@
+<!--
+ * 【界面概述】
+ * 展示精灵图的用法，包含动图和切图
+ *
+ * 【控件介绍】
+ * JsvSpriteImg：精灵图控件
+ *                  spriteInfo {object}  (必需)精灵图配置信息{frames:[], meta:{}}
+ *                  viewSize {object}  (必需){w:0, h:0}
+ *                  imageUrl {string}  (必需)图片地址
+ *                  duration {float}  (动图必需)动图的时间
+ *                  onAnimEnd {fucntion} 动图结束回调
+ *                  loop {string} 动图的循环次数 infinite/数字，默认为infinite
+ *                  spriteName {string} 动图的名称，默认为null
+ *                  autostart{boolean} 是否自动播放动图
+ *                  controller {SpriteController} 控制动图的对象
+ *                      stop(end_frame) 停止动画 end_frame: "start", "end"
+ *                      start() 开始动画
+ *
+ *
+ * 【技巧说明】
+ * Q: 动图和切图如何实现?
+ * A: spriteInfo中的frame有多个时为动图，只有一个时为切图
+ *
+ * Q: spriteInfo中属性的含义?
+ * A: meta.size为整张切图的大小；frames中为每一帧的位置和大小信息，目前仅支持统一大小的帧
+ -->
+
+<script>
+import JsvSpriteAnim from "../../utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue";
+import { SpriteController } from "../../utils/JsViewVueWidget/JsvSpriteAnim/SpriteController";
+import spriteImage from "./images/egg_break.png";
+import config_json from "./images/egg_break.json";
+export default {
+  components: {
+    JsvSpriteAnim,
+  },
+  setup() {
+    return {
+      spriteImage: spriteImage,
+      config_json: config_json,
+    };
+  },
+  data() {
+    console.log(
+      "test spriteImage =",
+      spriteImage,
+      "/n config_json=",
+      config_json
+    );
+    const sprite_info = this._formatInfo();
+    console.log("test sprite_into =", sprite_info);
+    const view_size = {
+      w: sprite_info.maxW,
+      h: sprite_info.maxH,
+    };
+    console.log("test view_size =", view_size);
+    return {
+      sprite_info,
+      view_size,
+      spriteController: new SpriteController(),
+      show: true,
+    };
+  },
+  methods: {
+    spriteAnimEnd() {
+      this.show = false;
+    },
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        return true;
+      }
+      return true;
+    },
+    _formatInfo() {
+      const info = {
+        frames: [],
+        meta: {
+          size: this.config_json.meta.size,
+        },
+      };
+
+      let frames_ref = info.frames;
+      let max_width = 0;
+      let max_height = 0;
+
+      for (let i = 0; i < this.config_json.frames.length; i++) {
+        const target = this.config_json.frames[i].spriteSourceSize;
+        frames_ref.push({
+          target,
+          source: this.config_json.frames[i].frame,
+        });
+        const sprite_with = target.x + target.w;
+        const sprite_height = target.y + target.h;
+        if (sprite_with > max_width) {
+          max_width = sprite_with;
+        }
+        if (sprite_height > max_height) {
+          max_height = sprite_height;
+        }
+      }
+      return { info, maxW: max_width, maxH: max_height };
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 200,
+        top: 100,
+        width: 434,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      精灵图效果
+    </div>
+    <!--
+                通过show进行 清理精灵图，用于验证精灵图清理后，StyleSheet中cssRules的keyFrame清理工作能正常完成
+            -->
+    <div
+      v-if="this.show"
+      :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }"
+    >
+      <JsvSpriteAnim
+        :spriteInfo="sprite_info.info"
+        :loop="10"
+        :viewSize="view_size"
+        :duration="0.8"
+        :controller="this.spriteController"
+        :autostart="true"
+        :onAnimEnd="spriteAnimEnd"
+        :imageUrl="spriteImage"
+      />
+    </div>
+
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 700,
+        top: 100,
+        width: 434,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      原始图片
+    </div>
+    <div
+      :style="{
+        left: 700,
+        top: 150,
+        width: 434,
+        height: 372,
+        backgroundImage: `url(${spriteImage})`,
+      }"
+    />
+  </jsv-focus-block>
+</template>

package/samples/SpriteImage/images/egg_break.json

@@ -0,0 +1,116 @@
+{"frames": [
+
+{
+	"filename": "image_00.png",
+	"frame": {"x":104,"y":2,"w":50,"h":64},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":53,"y":43,"w":50,"h":64},
+	"sourceSize": {"w":50,"h":64}
+},
+{
+	"filename": "image_01.png",
+	"frame": {"x":2,"y":2,"w":48,"h":64},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":55,"y":43,"w":48,"h":64},
+	"sourceSize": {"w":48,"h":64}
+},
+{
+	"filename": "image_02.png",
+	"frame": {"x":52,"y":2,"w":50,"h":64},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":55,"y":43,"w":50,"h":64},
+	"sourceSize": {"w":50,"h":64}
+},
+{
+	"filename": "image_03.png",
+	"frame": {"x":274,"y":2,"w":64,"h":74},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":54,"y":33,"w":64,"h":74},
+	"sourceSize": {"w":64,"h":74}
+},
+{
+	"filename": "image_04.png",
+	"frame": {"x":156,"y":2,"w":56,"h":72},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":47,"y":44,"w":56,"h":72},
+	"sourceSize": {"w":56,"h":72}
+},
+{
+	"filename": "image_05.png",
+	"frame": {"x":214,"y":2,"w":58,"h":84},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":46,"y":44,"w":58,"h":84},
+	"sourceSize": {"w":58,"h":84}
+},
+{
+	"filename": "image_06.png",
+	"frame": {"x":2,"y":88,"w":92,"h":106},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":32,"y":32,"w":92,"h":106},
+	"sourceSize": {"w":92,"h":106}
+},
+{
+	"filename": "image_07.png",
+	"frame": {"x":2,"y":228,"w":142,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":8,"y":20,"w":142,"h":140},
+	"sourceSize": {"w":142,"h":140}
+},
+{
+	"filename": "image_08.png",
+	"frame": {"x":146,"y":228,"w":142,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":8,"y":20,"w":142,"h":140},
+	"sourceSize": {"w":142,"h":140}
+},
+{
+	"filename": "image_09.png",
+	"frame": {"x":290,"y":228,"w":142,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":8,"y":20,"w":142,"h":140},
+	"sourceSize": {"w":142,"h":140}
+},
+{
+	"filename": "image_10.png",
+	"frame": {"x":190,"y":88,"w":136,"h":138},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":11,"y":21,"w":136,"h":138},
+	"sourceSize": {"w":136,"h":138}
+},
+{
+	"filename": "image_11.png",
+	"frame": {"x":96,"y":88,"w":92,"h":88},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":33,"y":26,"w":92,"h":88},
+	"sourceSize": {"w":92,"h":88}
+},
+{
+	"filename": "image_12.png",
+	"frame": {"x":340,"y":2,"w":88,"h":84},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":35,"y":26,"w":88,"h":84},
+	"sourceSize": {"w":88,"h":84}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "egg_1.png",
+	"format": "RGBA8888",
+	"size": {"w":434,"h":372},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:3ca02d63806cac6ee77822c5f378c4f3$"
+}
+}