@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/JsvLine/App.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="bgStyle">
+    <JsvLine :startPos="startPos1" :endPos="endPos1" :lineWidth="2" :backgroundColor="'#FF1213'" ></JsvLine>
+    <div class="text text1">竖线不带圆角</div>
+    <JsvLine :startPos="startPos2" :endPos="endPos2" :lineWidth="3" :backgroundColor="'#FF1213'" :borderRadius="10"></JsvLine>
+    <div class="text text2">斜线带圆角</div>
+    <JsvLine :startPos="startPos3" :endPos="endPos3" :lineWidth="5" :backgroundColor="'#22F142'" :borderRadius="10" :appear="'fadeIn'"></JsvLine>
+    <div class="text text3">斜线带圆角淡入</div>
+    <JsvLine :startPos="startPos4" :endPos="endPos4" :lineWidth="6" :backgroundColor="'#22F142'" :borderRadius="10" :appear="'fadeOut'"></JsvLine>
+    <div class="text text4">斜线带圆角淡出</div>
+    <JsvLine :startPos="startPos5" :endPos="endPos5" :lineWidth="40" :backgroundImage="bg" :borderRadius="20" ></JsvLine>
+    <div class="text text5">带圆角背景图</div>
+    <JsvLine :startPos="startPos6" :endPos="endPos6" :lineWidth="30" :backgroundImage="'linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1))'" :borderRadius="20" ></JsvLine>
+    <div class="text text6">带圆角渐变色</div>
+</div>
+</template>
+
+<script setup>
+import { JsvLine } from "jsview"
+import bg from "./bgimage.jpg"
+
+const startPos1={
+    x:340,
+    y:40
+}
+const endPos1={
+    x:340,
+    y:160
+}
+
+const startPos2={
+    x:840,
+    y:150
+}
+const endPos2={
+    x:1040,
+    y:50
+}
+
+const startPos3={
+    x:340,
+    y:300
+}
+const endPos3={
+    x:560,
+    y:400
+}
+
+const startPos4={
+    x:760,
+    y:400
+}
+const endPos4={
+    x:980,
+    y:300
+}
+
+const startPos5={
+    x:240,
+    y:550
+}
+const endPos5={
+    x:500,
+    y:520
+}
+const startPos6={
+    x:840,
+    y:520
+}
+const endPos6={
+    x:1100,
+    y:550
+}
+</script>
+
+<style lang="scss" scoped>
+.bgStyle {
+    width:1280;
+    height:720;
+    background-color: #007788;
+}
+.text{
+    width:180;
+    height:30;
+    background-color: #000000;
+    line-height: 30;
+    font-size: 24;
+    font-weight: bold;
+    color:#FFFFFF;
+    text-align: center;
+}
+.text1{
+    top:200;
+    left:240; 
+}
+.text2{
+    top:200;
+    left:840
+}
+.text3{
+    top:430;
+    left:340;
+}
+.text4{
+    top:430;
+    left:780;
+}
+.text5{
+    top: 620;
+    left:280;
+}
+.text6{
+    top:620;
+    left:860
+}
+</style>

package/JsvPreDownloader/App.vue

@@ -5,6 +5,7 @@ import { useRouter } from "vue-router";
 
 const router = useRouter();
 
+const downloader = new JsvPreDownloader();
 const single =
   "https://img14.360buyimg.com/pop/jfs/t1/144284/20/31579/61411/636f2df0E01dfe716/dd4b1c7471613493.jpg";
 
@@ -17,14 +18,21 @@ const list = [
     url: "https://img14.360buyimg.com/pop/jfs/t1/149715/39/27762/70633/637588eeEaaf57540/8a2b507dd6effe91.jpg",
     isImage: true,
   },
-  {
-    url: "https://img14.360buyimg.com/pop/jfs/t1/179091/36/28087/35197/632873cbE8079c6b0/d6f86f1b1d5f112d.jpg",
-    isImage: true,
-  },
+  downloader.buildDownloadItem(
+   "https://img14.360buyimg.com/pop/jfs/t1/179091/36/28087/35197/632873cbE8079c6b0/d6f86f1b1d5f112d.jpg",
+   "",
+    true
+  ),
   {
     url: "https://img14.360buyimg.com/pop/jfs/t1/145574/2/28766/47462/636f3023E756c7cf4/e1e898525109d0ea.jpg",
     isImage: false,
   },
+  {
+    url:null,
+    isImage:false
+  },
+  downloader.buildDownloadItem(null),
+  null
 ];
 
 const singleRef = ref(1);
@@ -35,7 +43,6 @@ const listRef = reactive(
   })
 );
 
-const downloader = new JsvPreDownloader();
 downloader.download(single, "", true).then(
   (info) => {
     console.log("download single success", info);
@@ -113,13 +120,13 @@ const onKeyDown = (ev) => {
 
     <div :style="{ left: 10, top: 210 }">
       <div class="describe">{{ "多文件下载\n(第一个空链接)" }}</div>
-      <div :style="{ left: 200 }">
+      <div :style="{ left: 0,top:90 }">
         <div
           v-for="(item, index) in listRef"
           :key="index"
           class="block"
           :style="{
-            left: 210 * index,
+            left: 180 * index,
           }"
         >
           {{ `${stateToText(item.state)} \n ${item.extra}` }}
@@ -131,7 +138,7 @@ const onKeyDown = (ev) => {
 
 <style scoped>
 .describe {
-  width: 200;
+  width: 300;
   height: 150;
   color: #ffffff;
   font-size: 30;
@@ -140,11 +147,11 @@ const onKeyDown = (ev) => {
   overflow: hidden;
 }
 .block {
-  width: 200;
+  width: 170;
   height: 150;
   background-color: #888888;
   color: #000000;
-  font-size: 30;
+  font-size: 24;
   white-space: pre-wrap;
   text-overflow: clip;
   overflow: hidden;

package/LatexDemo/App.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { JsvTextBox } from "jsview";
+
+//TODO left, top, width, height无法通过class传递, 待调查
+const baseStyle = {
+  left: 50,
+  width: 1000,
+  height: 50,
+};
+
+//TODO 此字符串直接写在双花括号内编译出错, 待调查
+const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
+</script>
+
+<template>
+  <div :style="{ width: 1920, height: 1080, backgroundColor: '#007788' }"></div>
+  <jsv-text-box
+    :enableLatex="true"
+    :style="{ top: 50, ...baseStyle }"
+    class="textStyle"
+  >
+    {{ "测试\\textcolor{#FF0000}{红色}文字" }}
+  </jsv-text-box>
+  <jsv-text-box
+    :enableLatex="true"
+    :style="{ top: 100, ...baseStyle }"
+    class="textStyle"
+  >
+    {{ "测试\\textb{加粗}文字" }}
+  </jsv-text-box>
+  <jsv-text-box
+    :enableLatex="true"
+    :style="{ top: 150, ...baseStyle }"
+    class="textStyle"
+  >
+    {{ "测试\\texti{italic}文字" }}
+  </jsv-text-box>
+  <jsv-text-box
+    :enableLatex="true"
+    :style="{ top: 200, ...baseStyle }"
+    class="textStyle"
+  >
+    {{ "测试\\textdecoration{underline}{下划线}文字" }}
+  </jsv-text-box>
+  <jsv-text-box
+    :enableLatex="true"
+    :style="{ top: 250, ...baseStyle }"
+    class="textStyle"
+  >
+    {{ "测试\\textdecoration{line-through}{删除线}文字" }}
+  </jsv-text-box>
+  <jsv-text-box
+    :enableLatex="true"
+    :style="{ top: 300, ...baseStyle }"
+    class="textStyle"
+  >
+    {{ text }}
+  </jsv-text-box>
+</template>
+
+<style scoped>
+.textStyle {
+  line-height: 50;
+  font-size: 40;
+}
+</style>

package/LatexFormula/App.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { JsvLatex, globalLoadJsvLatexPlugin } from "jsview";
+
+globalLoadJsvLatexPlugin((status) => {
+  console.log("load JsvLatex plugin status", status);
+});
+
+const latexStr = `\\begin{array}{l}
+  测试文字 \\forall\\varepsilon\\in\\mathbb{R}_+^*\\ \\exists\\eta>0\\ |x-x_0|\\leq\\eta\\Longrightarrow|f(x)-f(x_0)|\\leq\\varepsilon测试文字\\\\
+  测试文字\\det
+  \\begin{bmatrix}
+      a_{11}&a_{12}&\\cdots&a_{1n}\\\\
+      a_{21}&\\ddots&&\\vdots\\\\
+      \\vdots&&\\ddots&\\vdots\\\\
+      a_{n1}&\\cdots&\\cdots&a_{nn}
+  \\end{bmatrix}
+  \\overset{\\mathrm{def}}{=}\\sum_{\\sigma\\in\\mathfrak{S}_n}\\varepsilon(\\sigma)\\prod_{k=1}^n a_{k\\sigma(k)}\\\\
+  \\sideset{_\\alpha^\\beta}{_\\gamma^\\delta}{\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}}\\\\
+  \\int_0^\\infty{x^{2n} e^{-a x^2}\\,dx} = \\frac{2n-1}{2a} 
+      \\int_0^\\infty{x^{2(n-1)} e^{-a x^2}\\,dx} = \\frac{(2n-1)!!}{2^{n+1}} \\sqrt{\\frac{\\pi}{a^{2n+1}}}\\\\
+  \\int_a^b{f(x)\\,dx} = (b - a) \\sum\\limits_{n = 1}^\\infty  
+      {\\sum\\limits_{m = 1}^{2^n  - 1} {\\left( { - 1} \\right)^{m + 1} } } 2^{ - n} f(a + m\\left( {b - a} \\right)2^{-n} )\\\\
+  \\int_{-\\pi}^{\\pi} \\sin(\\alpha x) \\sin^n(\\beta x) dx = \\textstyle{\\left \\{
+      \\begin{array}{cc}
+          (-1)^{(n+1)/2} (-1)^m \\frac{2 \\pi}{2^n} \\binom{n}{m} & n \\mbox{ odd},\\ \\alpha = \\beta (2m-n) \\\\
+          0 & \\mbox{otherwise} \\\\ \\end{array} \\right .}\\\\
+  L = \\int_a^b \\sqrt{ \\left|\\sum_{i,j=1}^ng_{ij}(\\gamma(t))\\left(\\frac{d}{dt}x^i\\circ\\gamma(t)\\right)
+      \\left(\\frac{d}{dt}x^j\\circ\\gamma(t)\\right)\\right|}\\,dt\\\\
+  \\begin{array}{rl}
+      s &= \\int_a^b\\left\\|\\frac{d}{dt}\\vec{r}\\,(u(t),v(t))\\right\\|\\,dt \\\\
+      &= \\int_a^b \\sqrt{u'(t)^2\\,\\vec{r}_u\\cdot\\vec{r}_u + 2u'(t)v'(t)\\, \\vec{r}_u\\cdot
+          \\vec{r}_v+ v'(t)^2\\,\\vec{r}_v\\cdot\\vec{r}_v}\\,\\,\\, dt. 
+  \\end{array}\\\\
+\\end{array}`;
+
+onMounted(() => {});
+</script>
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <jsv-latex
+    :latexStr="latexStr"
+    :left="50"
+    :width="800"
+    :fontSize="25"
+    color="#FFFFFF"
+  ></jsv-latex>
+</template>
+
+<style scoped>
+@keyframes test-translate {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(100, 0, 0);
+  }
+}
+</style>