@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/SpriteImage/App.vue

@@ -1,173 +0,0 @@
-<!--
- * 【界面概述】
- * 展示精灵图的用法，包含动图和切图
- *
- * 【控件介绍】
- * 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/samples/SpriteImage/images/egg_break.json

@@ -1,116 +0,0 @@
-{"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/samples/TextBox/App.vue

@@ -1,91 +0,0 @@
-<!--
- * 【界面概述】
- * 展示文字垂直对齐方式显示控件的用法
- *
- * 【控件介绍】
- *
- * 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/samples/TextBox/RenderCenter.vue

@@ -1,133 +0,0 @@
-<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/samples/TextBox/RenderLeft.vue

@@ -1,138 +0,0 @@
-<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>