@shijiu/jsview-vue 0.9.602 → 0.9.684

package/samples/TextBox/RenderLeft.vue

@@ -4,12 +4,6 @@ export default {
   props: {
     text: String,
     moveCount: Number,
-    sStyleToken: String,
-    sLayoutSet: Object,
-    sFontSetLeft40Top: Object,
-    sFontSetLeft40Center: Object,
-    sFontSetLeft40Bottom: Object,
-    sFontSetLeft80: Object,
   },
   components: { JsvTextBox },
 };
@@ -33,8 +27,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetLeft40Top, { left: 0, top: 0 }]"
+      :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>
@@ -54,8 +56,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetLeft40Center, { left: 410, top: 0 }]"
+      :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>
@@ -75,8 +85,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetLeft40Bottom, { left: 820, top: 0 }]"
+      :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>
@@ -96,14 +114,25 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        sLayoutSet,
-        sFontSetLeft80,
-        { left: 1240, top: 0, width: 500 },
-      ]"
+      :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>
+</template>
+
+<style scoped>
+.test {
+  color: #007788
+}
+</style>

package/samples/TextBox/RenderOneLine.vue

@@ -3,7 +3,6 @@ import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,
-    sStyleToken: String,
   },
   components: { JsvTextBox },
 };
@@ -27,22 +26,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        {
-          left: 0,
-          top: 0,
-          width: 400,
-          height: 80,
-          backgroundColor: 'rgba(255,255,0,0.5)',
-        },
-        {
-          backgroundColor: 'rgba(255,255,0,0.5)',
-          fontSize: '30px',
-          textAlign: 'left',
-          lineHeight: '80px',
-        },
-      ]"
+      :style="{
+        left: 0,
+        top: 0,
+        width: 400,
+        height: 80,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'left',
+        lineHeight: '80px',
+      }"
     >
       {{ text }}
     </JsvTextBox>
@@ -62,22 +55,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        {
-          left: 410,
-          top: 0,
-          width: 400,
-          height: 80,
-          backgroundColor: 'rgba(255,255,0,0.5)',
-        },
-        {
-          backgroundColor: 'rgba(255,255,0,0.5)',
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '80px',
-        },
-      ]"
+      :style="{
+        left: 410,
+        top: 0,
+        width: 400,
+        height: 80,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '80px',
+      }"
     >
       {{ text }}
     </JsvTextBox>
@@ -97,22 +84,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        {
-          left: 820,
-          top: 0,
-          width: 400,
-          height: 80,
-          backgroundColor: 'rgba(255,255,0,0.5)',
-        },
-        {
-          backgroundColor: 'rgba(255,255,0,0.5)',
-          fontSize: '30px',
-          textAlign: 'right',
-          lineHeight: '80px',
-        },
-      ]"
+      :style="{
+        left: 820,
+        top: 0,
+        width: 400,
+        height: 80,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'right',
+        lineHeight: '80px',
+      }"
     >
       {{ text }}
     </JsvTextBox>

package/samples/TextBox/RenderRight.vue

@@ -3,10 +3,6 @@ import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,
-    sStyleToken: String,
-    sLayoutSet: Object,
-    sFontSetRight40: Object,
-    sFontSetRight80: Object,
   },
   components: { JsvTextBox },
 };
@@ -30,8 +26,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetRight40, { left: 0, top: 0 }]"
+      :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>
@@ -51,8 +55,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetRight40, { left: 410, top: 0 }]"
+      :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>
@@ -72,8 +84,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetRight40, { left: 820, top: 0 }]"
+      :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>
@@ -94,12 +114,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        sLayoutSet,
-        sFontSetRight80,
-        { left: 1240, top: 0, width: 500 },
-      ]"
+      :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>

package/samples/TextShadowDemo/App.vue

@@ -2,7 +2,7 @@
 * 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
 -->
 <script>
-import { JsvTextStyleClass, JsvTextBox } from "jsview";
+import { JsvTextBox } from "jsview";
 
 export default {
   components: {
@@ -32,11 +32,6 @@ export default {
           textShadow: "4 4 0.5 #0000EF",
         },
       ],
-      font_style: new JsvTextStyleClass({
-        fontSize: "35px",
-        textAlign: "center",
-        lineHeight: "40px",
-      }),
     };
   },
   methods: {
@@ -77,17 +72,16 @@ export default {
         </div>
         <JsvTextBox
           :verticalAlign="'middle'"
-          :styleToken="'Fixed'"
-          :stylesList="[
-            font_style,
-            {
-              top: 50,
-              width: 320,
-              height: 70,
-              textShadow: item.textShadow,
-              backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
-            },
-          ]"
+          :style="{
+            top: 50,
+            width: 320,
+            height: 70,
+            textShadow: item.textShadow,
+            backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
+            fontSize: '35px',
+            textAlign: 'center',
+            lineHeight: '40px',
+          }"
         >
           文字阴影
         </JsvTextBox>

package/samples/TextureAnimation/App2.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+  TexAlignAnchor,
+  DECORATE_NINEPATCH_ALPHA_MIX,
+  DECORATE_BORDER_RADIUS,
+} from "jsview";
+import img from "./assets/light.png";
+import img2 from "./assets/light2.png";
+import mask from "./assets/mask.png";
+
+const getRandom = (start, end) => {
+  return Math.round(Math.random() * (end - start) + start);
+};
+
+const router = useRouter();
+const width = ref(300);
+const height = ref(200);
+const left = ref(50);
+const top = ref(80);
+const rotateAnimation =
+  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+
+const ninePatchDecorator = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `url(${mask})`,
+  imageWidth: 86,
+  centerWidth: 2,
+  borderOutset: 0,
+  animTime: 0.5,
+};
+//注意texture的尺寸需要兼顾最大的view
+const texCoord = {
+  width: 600,
+  height: 600,
+};
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 13) {
+    left.value = getRandom(50, 400);
+    top.value = getRandom(80, 200);
+    width.value = getRandom(100, 300);
+    height.value = getRandom(100, 300);
+  }
+  return true;
+};
+</script>
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage:
+        'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
+    </div>
+    <div>
+      <jsv-texture-anim
+        :src="img"
+        :left="left"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
+    <div>
+      <jsv-texture-anim
+        :src="img2"
+        :left="left + 500"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/TextureSize/App.vue

@@ -32,7 +32,7 @@ const onKeyDown = (ev) => {
           </div>
           <div class="leftFont top250">
             {{
-              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量下降，但更省内存`
+              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量基本没变，但更省内存`
             }}
           </div>
         </div>
@@ -67,9 +67,9 @@ const onKeyDown = (ev) => {
           <img alt="" class="graphSize top0" :src="pngDemo" />
           <img
             alt=""
+            :src="pngDemo"
             class="graphSize top250"
             jsvImgScaledownTex
-            :src="pngDemo"
           />
           <div class="underFont">
             {{ `png有透明图片\n指定尺寸有明显锯齿` }}
@@ -80,9 +80,9 @@ const onKeyDown = (ev) => {
           <img alt="" class="graphSize top0" :src="pngNoAlphaDemo" />
           <img
             alt=""
+            :src="pngNoAlphaDemo"
             class="graphSize top250"
             jsvImgScaledownTex
-            :src="pngNoAlphaDemo"
           />
           <div class="underFont">
             {{ `png无透明图片` }}