@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/SpriteImage/App.vue

@@ -1,174 +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>
+<!--
+ * 【界面概述】
+ * 展示精灵图的用法，包含动图和切图
+ *
+ * 【控件介绍】
+ * 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

@@ -1,116 +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$"
-}
-}
+{"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$"
+}
+}