@shijiu/jsview-vue-samples 1.9.747

package/TextBox/RenderOneLine.vue

@@ -0,0 +1,101 @@
+<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/TextBox/RenderRight.vue

@@ -0,0 +1,131 @@
+<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/TextShadowDemo/App.vue

@@ -0,0 +1,91 @@
+<!--
+* 当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/TextureAnimation/App.vue

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