@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/TextBox/RenderOneLine.vue

@@ -1,101 +0,0 @@
-<script>
-import { JsvTextBox } from "jsview";
-export default {
-  props: {
-    text: String,
-  },
-  components: { JsvTextBox },
-};
-</script>
-
-<template>
-  <div :style="{ top: 750 + 300 + 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: 80,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
-        textAlign: 'left',
-        lineHeight: '80px',
-      }"
-    >
-      {{ 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: 80,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
-        textAlign: 'center',
-        lineHeight: '80px',
-      }"
-    >
-      {{ 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: 80,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
-        textAlign: 'right',
-        lineHeight: '80px',
-      }"
-    >
-      {{ text }}
-    </JsvTextBox>
-  </div>
-</template>

package/samples/TextBox/RenderRight.vue

@@ -1,131 +0,0 @@
-<script>
-import { JsvTextBox } from "jsview";
-export default {
-  props: {
-    text: String,
-  },
-  components: { JsvTextBox },
-};
-</script>
-
-<template>
-  <div :style="{ top: 750 }">
-    <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: 'right',
-        lineHeight: '40px',
-      }"
-    >
-      {{ `[TR]${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: 'right',
-        lineHeight: '40px',
-      }"
-    >
-      {{ `[MR]${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: 'right',
-        lineHeight: '40px',
-      }"
-    >
-      {{ `[BR]${text}` }}
-    </JsvTextBox>
-
-    <div
-      :style="{
-        left: 1240,
-        top: -50,
-        width: 500,
-        height: 50,
-        fontSize: '20px',
-        textAlign: 'left',
-        lineHeight: '50px',
-        backgroundColor: '#00ff00',
-      }"
-    >
-      整体垂直向下对齐、文字水平居右显示、行高80px
-    </div>
-    <JsvTextBox
-      :verticalAlign="'bottom'"
-      :style="{
-        left: 1240,
-        top: 0,
-        width: 500,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
-        textAlign: 'right',
-        lineHeight: '80px',
-      }"
-    >
-      {{ `[BR]${text}` }}
-    </JsvTextBox>
-  </div>
-</template>

package/samples/TextShadowDemo/App.vue

@@ -1,91 +0,0 @@
-<!--
-* 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
--->
-<script>
-import { JsvTextBox } from "jsview";
-
-export default {
-  components: {
-    JsvTextBox,
-  },
-  data() {
-    return {
-      TextData: [
-        {
-          id: 0,
-          title: "偏移x,y为0(文字发光)",
-          textShadow: "0 0 3 #00FF00",
-        },
-        {
-          id: 1,
-          title: "blur为0(不显示阴影)",
-          textShadow: "2 2 0 #00FF00",
-        },
-        {
-          id: 2,
-          title: "rgba格式颜色(半透明红)",
-          textShadow: "4 4 3 rgba(255,0,0,0.5)",
-        },
-        {
-          id: 3,
-          title: "#格式颜色(蓝色)",
-          textShadow: "4 4 0.5 #0000EF",
-        },
-      ],
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      v-for="item in TextData"
-      :key="item.id"
-      :style="{ left: 320 * item.id }"
-    >
-      <div>
-        <div
-          :style="{
-            width: 320,
-            height: 50,
-            fontSize: '25px',
-            textAlign: 'center',
-            lineHeight: '50px',
-            backgroundColor: item.id % 2 == 0 ? '#00ff00' : '#0000ff',
-          }"
-        >
-          {{ item.title }}
-        </div>
-        <JsvTextBox
-          :verticalAlign="'middle'"
-          :style="{
-            top: 50,
-            width: 320,
-            height: 70,
-            textShadow: item.textShadow,
-            backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
-            fontSize: '35px',
-            textAlign: 'center',
-            lineHeight: '40px',
-          }"
-        >
-          文字阴影
-        </JsvTextBox>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>

package/samples/TextureAnimation/App.vue

@@ -1,336 +0,0 @@
-<script>
-import {
-  jJsvRuntimeBridge,
-  getKeyFramesGroup,
-  JsvTextureAnim,
-} from "jsview";
-import img from "./assets/php2.png";
-import swipLight from "./assets/swipLight.png";
-
-export default {
-  components: {
-    JsvTextureAnim,
-  },
-  setup() {
-    let styleShell = getKeyFramesGroup();
-
-    const translateAnim =
-      "{from {transform: translate3d(-100%, -50%, 0);} to {transform: translate3d(100%, 50%, 0);}}";
-    const rotateAnim =
-      "{from {transform: rotate3d(1,-1,1,0);} to {transform: rotate3d(1,-1,1,360deg);}}";
-    const scaleAnim =
-      "{from {transform: scale3d(0.5, 0.5, 1);} to {transform: scale3d(1.5, 1.5, 1);}}";
-
-    const swipAnim =
-      "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";
-
-    return {
-      styleShell,
-      img,
-      borderRadius: "40px",
-      repeat: -1,
-      duration: 3000,
-      translateAnim,
-      rotateAnim,
-      scaleAnim,
-      swipAnim,
-      translateTransform: "translate3d(50%, 50%, 0)",
-      rotateTransform: "rotate3d(1,1,1, 30deg)",
-      scaleTransform: "scale3d(0.5, 1.5, 1.0)",
-      swipLight,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      // 8:Backspace, 27:Escape, 10000:盒子返回键
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
-  created() {
-    this.styleShell.insertRule(
-      "@keyframes texture-anim-translate " + this.translateAnim
-    );
-    this.styleShell.insertRule(
-      "@keyframes texture-anim-rotate " + this.rotateAnim
-    );
-    this.styleShell.insertRule(
-      "@keyframes texture-anim-scale " + this.scaleAnim
-    );
-  },
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-  beforeUnmount() {
-    this.styleShell.removeRule("texture-anim-translate");
-    this.styleShell.removeRule("texture-anim-rotate");
-    this.styleShell.removeRule("texture-anim-scale");
-  },
-};
-</script>
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onKeyDown="onKeyDown"
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#007788',
-    }"
-  >
-    <div
-      :style="{
-        left: 100,
-        top: 20,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="img"
-        :width="300"
-        :height="150"
-        :animation="translateAnim"
-        :duration="duration"
-        :transform="null"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: null,
-          animation: `texture-anim-translate ${
-            duration / 1000
-          }s linear infinite`,
-        }"
-      />
-    </div>
-
-    <div
-      :style="{
-        left: 100,
-        top: 230,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="img"
-        :width="300"
-        :height="150"
-        :animation="rotateAnim"
-        :duration="duration"
-        :transform="null"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: null,
-          animation: `texture-anim-rotate ${duration / 1000}s linear infinite`,
-        }"
-      />
-    </div>
-
-    <div
-      :style="{
-        left: 100,
-        top: 460,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="img"
-        :width="300"
-        :height="150"
-        :animation="scaleAnim"
-        :duration="duration"
-        :transform="null"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: null,
-          animation: `texture-anim-scale ${duration / 1000}s linear infinite`,
-        }"
-      />
-    </div>
-    <!-- transform sample -->
-    <div
-      :style="{
-        left: 500,
-        top: 20,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="img"
-        :width="300"
-        :height="150"
-        :duration="duration"
-        :transform="translateTransform"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: translateTransform,
-        }"
-      />
-    </div>
-
-    <div
-      :style="{
-        left: 500,
-        top: 230,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="img"
-        :width="300"
-        :height="150"
-        :duration="duration"
-        :transform="rotateTransform"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: rotateTransform,
-        }"
-      />
-    </div>
-
-    <div
-      :style="{
-        left: 500,
-        top: 460,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="img"
-        :width="300"
-        :height="150"
-        :duration="duration"
-        :transform="scaleTransform"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: scaleTransform,
-        }"
-      />
-    </div>
-    <!-- swip light -->
-    <div
-      :style="{
-        left: 850,
-        top: 460,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        ref="textureAnim1"
-        :src="swipLight"
-        :animation="swipAnim"
-        :width="300"
-        :height="150"
-        :duration="duration"
-        transform="scale3d(0.5, 1, 1) rotate3d(0,0,1, 30deg)"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-    </div>
-
-    <!-- 说明文字 -->
-    <div
-      :style="{
-        left: 100,
-        top: 620,
-        width: 1920,
-        height: 200,
-        fontSize: 30,
-        color: '#000000',
-      }"
-    >
-      {{ "1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致" }}
-    </div>
-  </jsv-focus-block>
-</template>