@shijiu/jsview-vue 1.9.648 → 1.9.719

package/samples/ScaleDownNeon/App.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-10-24 13:19:41
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-10-24 13:50:18
+ * @Description: file content
+-->
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+const test3 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
+const test4 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (window.JsView) {
+      window.JsView.setGlobalConfig({
+        texCache: -1,
+      });
+    }
+
+    router.go(-1); // 有router时，回退
+    return true;
+  }
+  return false;
+};
+
+const style1 = {
+  left: 0,
+  top: 0,
+  width: 250,
+  height: 250,
+  borderRadius: "15px",
+};
+
+const style2 = {
+  left: 0,
+  top: 260,
+  width: 250,
+  height: 250,
+  borderRadius: "15px",
+};
+</script>
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 0, top: 0 }">
+          <div class="leftFont top0">
+            {{ `原图加载` }}
+          </div>
+          <div class="leftFont top250">
+            {{ `使用缩小算法优化` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 120, top: 0 }">
+          <img alt="" :style="style1" :src="test4" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test4" />
+        </div>
+
+        <div :style="{ left: 380, top: 0 }">
+          <img alt="" :style="style1" :src="test1" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test1" />
+        </div>
+
+        <div :style="{ left: 640, top: 0 }">
+          <img alt="" :style="style1" :src="test2" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test2" />
+        </div>
+
+        <div :style="{ left: 900, top: 0 }">
+          <img alt="" :style="style1" :src="test3" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test3" />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+<style scoped>
+.allBgc {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+.block {
+  left: 20;
+  top: 50;
+}
+.leftFont {
+  left: 0;
+  width: 100;
+  height: 200;
+  color: #ffffff;
+  font-size: 25px;
+}
+.top0 {
+  top: 0;
+}
+.top250 {
+  top: 250;
+}
+</style>

package/samples/SoundPool/App.vue

@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
           `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
         }}
       </div>
-      <jsv-audiotrack ref="bgm" :src="bgmusic" loop="loop" />
+      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
 </template>

package/samples/TextBox/App.vue

@@ -7,19 +7,14 @@
  * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
  *      props说明:
  *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
- *          stylesList {array}    布局样式(必需)，数组中可包含样式对象或者JsvStyleClass，或者JsvTextStyleClass对象，
- *                                  样式对象内容为{left:0, top:0, width:xxx, height:xxx}，
- *                                  布局样式为数组中所有样式的合并。
- *          styleToken {string}     类似于vue html元素的key，当style变化时，由使用者改变此Token通知hoc进行style重新识别。
- *                                  Token不变的场景，props变化不会引起render，以提高渲染性能
+ *          style {object}          样式(必需)
  *
  * 【技巧说明】
  * Q: 如何实现文字居中对齐方式显示?
  * A: verticalAlign属性设置为middle
  *
  * Q: 如何触发控件重绘?
- * A: 1. 变更styleToken属性，将触发控件重新解析styles并重绘
- *    2. 变更文字内容，将触发控件重绘，但不会重新解析styles
+ * A: 1. 变更文字内容，将触发控件重绘，但不会重新解析styles
  -->
 
  <script setup>
@@ -27,8 +22,7 @@ import RenderLeft from "./RenderLeft.vue";
 import RenderRight from "./RenderRight.vue";
 import RenderCenter from "./RenderCenter.vue";
 import RenderOneLine from "./RenderOneLine.vue";
-import { JsvTextStyleClass, JsvStyleClass } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -41,53 +35,7 @@ const text = `静夜思 --唐李白
 const text_latex = `静夜思 --唐李白
 床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
 举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
-const sLayoutSet = new JsvStyleClass({
-  width: 400,
-  height: 300,
-  backgroundColor: "rgba(255,255,0,0.5)",
-});
-const sFontSetLeft40Top = new JsvTextStyleClass({
-  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-  textAlign: "left",
-  lineHeight: "40px",
-});
-const sFontSetLeft40Center = new JsvTextStyleClass({
-  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-  textAlign: "left",
-  lineHeight: "40px",
-});
-const sFontSetLeft40Bottom = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "left",
-  lineHeight: "40px",
-});
-const sFontSetLeft80 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "left",
-  lineHeight: "80px",
-});
-const sFontSetCenter40 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "center",
-  lineHeight: "40px",
-});
-const sFontSetCenter80 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "center",
-  lineHeight: "80px",
-});
-const sFontSetRight40 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "right",
-  lineHeight: "80px",
-});
-const sFontSetRight80 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "right",
-  lineHeight: "80px",
-});
-const sStyleToken = "v1.0";
-const rootRef = ref(null);
+
 const moveCount = ref(0);
 
 const onKeyDown = (ev) => {
@@ -132,33 +80,12 @@ const onBlur = () => {
       onBlur: onBlur,
     }"
   >
+    <div :style="{width:1280, height:720, backgroundColor:'#000000'}"/>
     <div :style="{ top: offsetY, left: offsetX }">
-      <RenderLeft
-        :text="text"
-        :moveCount="moveCount"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetLeft40Top="sFontSetLeft40Top"
-        :sFontSetLeft40Center="sFontSetLeft40Center"
-        :sFontSetLeft40Bottom="sFontSetLeft40Bottom"
-        :sFontSetLeft80="sFontSetLeft80"
-      />
-      <RenderRight
-        :text="text"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetRight40="sFontSetRight40"
-        :sFontSetRight80="sFontSetRight80"
-      />
-      <RenderCenter
-        :text="text"
-        :text_latex="text_latex"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetCenter40="sFontSetCenter40"
-        :sFontSetCenter80="sFontSetCenter80"
-      />
-      <RenderOneLine :text="onLineText" :sStyleToken="sStyleToken" />
+      <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

@@ -4,10 +4,6 @@ export default {
   props: {
     text: String,
     text_latex: String,
-    sStyleToken: String,
-    sLayoutSet: Object,
-    sFontSetCenter40: Object,
-    sFontSetCenter80: Object,
   },
   components: { JsvTextBox },
 };
@@ -31,8 +27,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 0, top: 0 }]"
+      :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>
@@ -52,8 +56,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 410, top: 0 }]"
+      :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}` }}
@@ -74,8 +86,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 820, top: 0 }]"
+      :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>
@@ -96,12 +116,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        sLayoutSet,
-        sFontSetCenter80,
-        { 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: 'center',
+        lineHeight: '80px',
+      }"
     >
       {{ `[MC]${text}` }}
     </JsvTextBox>

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>