@shijiu/jsview-vue-samples 1.9.747

package/SpriteImage/App.vue

@@ -0,0 +1,173 @@
+<!--
+ * 【界面概述】
+ * 展示精灵图的用法，包含动图和切图
+ *
+ * 【控件介绍】
+ * 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 { SpriteController, JsvSpriteAnim } from "jsview";
+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/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$"
+}
+}

package/TextBox/App.vue

@@ -0,0 +1,91 @@
+<!--
+ * 【界面概述】
+ * 展示文字垂直对齐方式显示控件的用法
+ *
+ * 【控件介绍】
+ *
+ * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
+ *      props说明:
+ *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
+ *          style {object}          样式(必需)
+ *
+ * 【技巧说明】
+ * Q: 如何实现文字居中对齐方式显示?
+ * A: verticalAlign属性设置为middle
+ *
+ * Q: 如何触发控件重绘?
+ * A: 1. 变更文字内容，将触发控件重绘，但不会重新解析styles
+ -->
+
+ <script setup>
+import RenderLeft from "./RenderLeft.vue";
+import RenderRight from "./RenderRight.vue";
+import RenderCenter from "./RenderCenter.vue";
+import RenderOneLine from "./RenderOneLine.vue";
+import { ref, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+let offsetX = ref(0);
+let offsetY = ref(0);
+const onLineText = "abcdefghigk";
+const text = `静夜思 --唐李白
+床前明月光，疑是地上霜；
+举头望明月，低头思故乡。`;
+const text_latex = `静夜思 --唐李白
+床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
+举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
+
+const moveCount = ref(0);
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  switch (ev.keyCode) {
+    case 37:
+      offsetX.value += 30;
+      moveCount.value++;
+      break;
+    case 39:
+      offsetX.value -= 30;
+      moveCount.value++;
+      break;
+    case 38:
+      offsetY.value += 30;
+      moveCount.value++;
+      break;
+    case 40:
+      offsetY.value -= 30;
+      moveCount.value++;
+      break;
+  }
+  return true;
+};
+const onFocus = () => {
+  console.log("TextBox getFocus");
+};
+const onBlur = () => {
+  console.log("TextBox loseFocus");
+};
+</script>
+
+ <template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+    }"
+  >
+    <div :style="{width:1280, height:720, backgroundColor:'#000000'}"/>
+    <div :style="{ top: offsetY, left: offsetX }">
+      <RenderLeft :text="text" :moveCount="moveCount" />
+      <RenderRight :text="text" />
+      <RenderCenter :text="text" :text_latex="text_latex" />
+      <RenderOneLine :text="onLineText" />
+    </div>
+  </jsv-focus-block>
+</template>

package/TextBox/RenderCenter.vue

@@ -0,0 +1,133 @@
+<script>
+import { JsvTextBox } from "jsview";
+export default {
+  props: {
+    text: String,
+    text_latex: String,
+  },
+  components: { JsvTextBox },
+};
+</script>
+
+<template>
+  <div :style="{ top: 400 }">
+    <div
+      :style="{
+        left: 0,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向上对齐、文字水平居中显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'top'"
+      :style="{
+        left: 0,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+    >
+      {{ `[TC]${text}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 410,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直居中对齐、文字水平居中显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'middle'"
+      :style="{
+        left: 410,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+      :enableLatex="true"
+    >
+      {{ `[MC]${text_latex}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 820,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向下对齐、文字水平居中显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'bottom'"
+      :style="{
+        left: 820,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+    >
+      {{ `[BC]${text}` }}
+    </JsvTextBox>
+
+    <div
+      :style="{
+        left: 1240,
+        top: -50,
+        width: 500,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直居中对齐、文字水平居中显示、行高80px
+    </div>
+    <JsvTextBox
+      :verticalAlign="'middle'"
+      :style="{
+        left: 1240,
+        top: 0,
+        width: 500,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '80px',
+      }"
+    >
+      {{ `[MC]${text}` }}
+    </JsvTextBox>
+  </div>
+</template>

package/TextBox/RenderLeft.vue

@@ -0,0 +1,138 @@
+<script>
+import { JsvTextBox } from "jsview";
+export default {
+  props: {
+    text: String,
+    moveCount: Number,
+  },
+  components: { JsvTextBox },
+};
+</script>
+
+<template>
+  <div :style="{ top: 50 }">
+    <div
+      :style="{
+        left: 0,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体向上对齐、文字居左显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'top'"
+      :style="{
+        left: 0,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'left',
+        lineHeight: '40px',
+      }"
+    >
+      {{ `测试文字变化能引起刷新: [${moveCount}]\n[TL]${text}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 410,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直居中对齐、文字水平居左显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'middle'"
+      :style="{
+        left: 410,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'left',
+        lineHeight: '40px',
+      }"
+    >
+      {{ `[ML]${text}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 820,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向下对齐、文字水平居左显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'bottom'"
+      :style="{
+        left: 820,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'left',
+        lineHeight: '40px',
+      }"
+    >
+      {{ `[BL]${text}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 1240,
+        top: -50,
+        width: 500,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向上对齐、文字水平居左显示、行高80px
+    </div>
+    <JsvTextBox
+      :verticalAlign="'top'"
+      :style="{
+        left: 1240,
+        top: 0,
+        width: 500,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'left',
+        lineHeight: '80px',
+      }"
+      className="test"
+    >
+      {{ `[TL]${text}` }}
+    </JsvTextBox>
+  </div>
+</template>
+
+<style scoped>
+.test {
+  color: #007788
+}
+</style>