@shijiu/jsview-vue-samples 1.9.747

package/AnimPicture/App.vue

@@ -0,0 +1,207 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:44:03
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 10:09:50
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { LoopType, JsvApic } from "jsview";
+import catRun from "./assets/animated_webp.webp";
+import girlRun from "./assets/girl_run.gif";
+import quan from "./assets/quan.webp";
+import ball from "./assets/ball_3.webp";
+
+const router = useRouter();
+const route = useRoute();
+let catRunPlay = ref(false);
+let girlRunPlay = ref(false);
+let quanPlay = ref(false);
+let ballPlay = ref(false);
+
+const catRunCallback = {
+  onStart: () => {
+    catRunPlay.value = true;
+  },
+  onEnd: () => {
+    catRunPlay.value = false;
+  },
+};
+const girlRunCallback = {
+  onStart: () => {
+    girlRunPlay.value = true;
+  },
+  onEnd: () => {
+    girlRunPlay.value = false;
+  },
+};
+const quanCallback = {
+  onStart: () => {
+    quanPlay.value = true;
+  },
+  onEnd: () => {
+    quanPlay.value = false;
+  },
+};
+const ballCallback = {
+  onStart: () => {
+    ballPlay.value = true;
+  },
+  onEnd: () => {
+    ballPlay.value = false;
+  },
+};
+let catRunRef = shallowRef(null);
+let girlRunRef = shallowRef(null);
+let quanRef = shallowRef(null);
+let ballRef = shallowRef(null);
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+
+  if (ev.keyCode === 37) {
+    if (catRunRef.value) {
+      if (catRunPlay.value) {
+        catRunRef.value.stop();
+        catRunPlay.value = false;
+      } else {
+        catRunRef.value.play();
+        catRunPlay.value = true;
+      }
+    }
+  } else if (ev.keyCode === 13) {
+    if (girlRunRef.value) {
+      if (girlRunPlay.value) {
+        girlRunRef.value.stop();
+        girlRunPlay.value = false;
+      } else {
+        girlRunRef.value.play();
+        girlRunPlay.value = true;
+      }
+    }
+  } else if (ev.keyCode === 39) {
+    if (quanRef.value) {
+      if (quanPlay.value) {
+        quanRef.value.stop();
+        quanPlay.value = false;
+      } else {
+        quanRef.value.play();
+        quanPlay.value = true;
+      }
+    }
+  } else if (ev.keyCode === 38) {
+    if (ballRef.value) {
+      if (ballPlay.value) {
+        ballRef.value.stop();
+        ballPlay.value = false;
+      } else {
+        ballRef.value.play();
+        ballPlay.value = true;
+      }
+    }
+  }
+  return true;
+};
+</script>
+
+<template>
+  <jsv-focus-block ref="rootNode" autoFocus :onKeyDown="onKeyDown">
+    <div :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
+      <div :style="{ left: 20, top: 20 }">
+        <jsv-apic
+          ref="catRunRef"
+          :src="`url(${catRun})`"
+          :style="{ width: 250, height: 250 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="catRunCallback.onStart"
+          :onEnd="catRunCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 270, width: 250 }">
+          {{ `WEBP(${catRunPlay ? "运行" : "停止"})\n左键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 280, top: 20 }">
+        <JsvApic
+          ref="girlRunRef"
+          :src="`url(${girlRun})`"
+          :style="{ width: 250, height: 214 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="girlRunCallback.onStart"
+          :onEnd="girlRunCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 219, width: 250 }">
+          {{ `GIF(${girlRunPlay ? "运行" : "停止"})\nOK键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 540, top: 20 }">
+        <JsvApic
+          ref="quanRef"
+          :src="`url(${quan})`"
+          :style="{ width: 250, height: 296 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="quanCallback.onStart"
+          :onEnd="quanCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 301, width: 250 }">
+          {{ `单次播放WEBP(${quanPlay ? "运行" : "停止"})\n右键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 800, top: 20 }">
+        <JsvApic
+          ref="ballRef"
+          :src="`url(${ball})`"
+          :style="{ width: 300, height: 200 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_PART"
+          :loopInfo="[
+            [3, 2, 4],
+            [5, 7, 10],
+          ]"
+          :onStart="ballCallback.onStart"
+          :onEnd="ballCallback.onEnd"
+        />
+        <div class="text" :style="{ top: 205, width: 300, height: 200 }">
+          {{
+            `局部循环WEBP(${
+              ballPlay ? "运行" : "停止"
+            })\n先循环2次后循环4次\n上键控制`
+          }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          left: 50,
+          top: 590,
+          width: 1180,
+          textAlign: 'center',
+          color: '#000000',
+          fontSize: '30px',
+        }"
+      >
+        {{ `(按键可进行停止/重播操作)` }}
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.text {
+  font-size: 25px;
+  height: 68px;
+  line-height: 34px;
+  color: #000000;
+  text-align: center;
+}
+</style>

package/Basic/App.vue

@@ -0,0 +1,134 @@
+<!--
+ * 【界面概述】
+ * div元素style中设置值对应的样例
+ *
+ * 【控件介绍】
+ * 无
+ *
+ * 【技巧说明】
+ * Q: 如何将div布局到指定坐标中？
+ * A: 设置div style中的top和left，坐标值是相对于父div的左上角的坐标值
+ *
+ * Q: 如何在界面上描画图片？
+ * A: 参照div/DivBackground，div的style中，
+ *    描绘纯色时，通过backgroundColor来设置，例如
+ *    <div style={{width:200, height:200, backgroundColor: 'rgba(255, 255, 0, 1)'}}>
+ *    描绘图片时，通过backgroundImage来设置，例如
+ *    <div style={{width:200, height:200, backgroundColor:`url(${iconImgPath})`}}>
+ *    注意，不设置width和height的情况是默认尺寸为0px * 0px，不会展示图片
+ *
+ * Q: 如何对图片进行剪切，只展示图片的局部内容？
+ * A: 参照div/DivClip，使用style中的overflow:"hidden"属性进行裁剪，或者使用style中clipPath属性进行裁剪
+ *
+ * Q: 如何将展示图片的四个角变成圆角？
+ * A: 参照img/ImgRadius，通过设置style中的borderRadius属性完成圆角改变
+ *
+ * Q: 文字如何描绘？
+ * A: 在div标签的内容中可填写需要描绘的文字，文字的字体字号等属性，通过div标签中的style来控制，参照text文件夹中的各个js。
+ *    注意：若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
+ *          <div>{"第一行
+ *          第二行"}</div>
+ *          =======需要改成=======
+ *          <div>{"第一行\n\
+ *          第二行"}</div>
+ *
+ * Q: 几个位置使用的文字属性是统一的情况下，如何减少每个div中设置文字style的代码量？
+ * A: 将统一的文字属性定义到一个js文件中(例如本Demo中的CommonFontStyle)，使用时，在style中采用array扩展的方式即可：
+ *    <div style={{...TitleFont}}>
+ *
+ * Q: 如何让div产生动画效果？
+ * A: 动画需要通过以下两种方式实现，具体见anim文件夹各个js:
+ *    方式1：声明keyframe结构，通过div的style中的animation来引用keyFrame，启动动画
+ *    方式2：设置div style中的transition属性，然后调整div的left/top/width/height之后，会按照transition规则进行动画。
+ *    注意点1：keyFrame可以声明在css文件中，也可以通过document.styleSheet来动态加载，可以参考转盘demo(turntableDemo)
+ *    在JsView系统中，css文件中只能声明keyFrame内容，不能声明其他内容
+ *    注意点2：transition目前只支持left/top/width/height属性的跟踪，其他属性目前不支持
+-->
+
+<script setup>
+import { jJsvRuntimeBridge } from "jsview";
+import { reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Panel1 from "./components/panel/Panel1.vue";
+import Panel2 from "./components/panel/Panel2.vue";
+
+const router = useRouter();
+const itemSides = {
+  top: 0,
+  left: 0,
+  width: 240,
+  height: 160,
+};
+
+const panelInfo = reactive({
+  index: 1,
+  total: 2,
+  desc: "1/2",
+});
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  } else if (ev.keyCode == 37) {
+    // left
+    panelInfo.index = --panelInfo.index > 1 ? panelInfo.index : 1;
+    panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
+    return true;
+  } else if (ev.keyCode == 39) {
+    // right
+    panelInfo.index =
+      ++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total;
+    panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
+    return true;
+  }
+
+  return false;
+};
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <div>
+    <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
+    <jsv-focus-block autoFocus :onKeyDown="onKeyDown" />
+
+    <div class="root">
+      <Panel1
+        v-if="panelInfo.index == 1"
+        :style="{ top: 10, left: 20 }"
+        panelClass="panel-size"
+        :itemSides="itemSides"
+      />
+      <Panel2
+        v-else-if="panelInfo.index == 2"
+        :style="{ top: 10, left: 20 }"
+        panelClass="panel-size"
+        :itemSides="itemSides"
+      />
+      <div :style="{ top: 650, left: 20, width: 500, color: '#0000FF' }">
+        {{ panelInfo.desc }}
+      </div>
+      <div :style="{ top: 650, left: 50, width: 500, color: '#0000FF' }">
+        按左/右键切换Panel，按Back键返回
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.root {
+  top: 10;
+  left: 10;
+  width: 1250;
+  height: 670;
+  background-color: rgba(200, 200, 200, 1);
+}
+
+.panel-size {
+  width: 1210;
+  height: 630;
+}
+</style>

package/Basic/components/ContentBlock.vue

@@ -0,0 +1,38 @@
+<script setup>
+const props = defineProps({
+  title: String,
+  index: Number,
+  itemSides: Object,
+});
+const titleStyle = {
+  lineHeight: 18,
+  width: props.itemSides.width,
+  height: 18,
+  backgroundColor: "rgba(0,0,255,0.7)",
+};
+const blockOpacity = props.index % 2 === 0 ? 0.2 : 0.5;
+</script>
+
+<template>
+  <div>
+    <div class="container-font" :style="titleStyle">
+      {{ title }}
+    </div>
+    <div
+      key="blockColor"
+      :style="{
+        top: titleStyle.lineHeight,
+        width: itemSides.width,
+        height: itemSides.height - 18,
+        backgroundColor: 'rgba(0,0,255,' + blockOpacity + ')',
+      }"
+    ></div>
+    <div key="container" :style="{ top: titleStyle.lineHeight }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import "./FontStyle.css";
+</style>

package/Basic/components/FontStyle.css

@@ -0,0 +1,16 @@
+
+.title-font {
+  font-family: 黑体;
+  font-size: 16px;
+}
+
+.container-font {
+  color: #FFFFFF;
+  font-family: 黑体;
+  font-size: 16px;
+}
+
+.content-font {
+  font-family: 黑体;
+  font-size: 12px;
+}

package/Basic/components/anim/AnimGroup.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+import ContentBlock from "../ContentBlock.vue";
+import AnimKeyframeBasic from "./AnimKeyframeBasic.vue";
+import AnimKeyframeComposite from "./AnimKeyframeComposite.vue";
+import AnimTransition from "./AnimTransition.vue";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+let timerId = -1;
+const state = reactive({
+  timeCount: 20,
+});
+
+onMounted(() => {
+  timerId = setInterval(() => {
+    state.timeCount = state.timeCount + 5;
+  }, 2000);
+});
+
+onBeforeUnmount(() => {
+  if (timerId >= 0) {
+    clearInterval(timerId);
+  }
+  timerId = -1;
+});
+</script>
+
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="1"
+      title="Keyframe基础动画集合"
+    >
+      <AnimKeyframeBasic />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="contentBlockProps"
+      :index="2"
+      title="Keyframe组合示例"
+    >
+      <AnimKeyframeComposite />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 2 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :index="3"
+      title="Transition动画示例"
+    >
+      <AnimTransition :timeCount="state.timeCount" />
+    </ContentBlock>
+  </div>
+</template>

package/Basic/components/anim/AnimKeyframeBasic.vue

@@ -0,0 +1,119 @@
+<script setup>
+const blockSize = {
+  width: 70,
+  height: 70,
+};
+const titleStyle = {
+  width: 60,
+  height: 20,
+  textAlign: "center",
+  lineHeight: 20,
+};
+const itemStyle = {
+  top: 20,
+  width: 50,
+  height: 50,
+  backgroundColor: "rgba(255, 0, 0, 1)",
+};
+</script>
+
+<template>
+  <div id="layout-root">
+    <div>
+      <div class="content-font" :style="{ ...titleStyle }">Translate3d</div>
+      <div :style="{ ...itemStyle, animation: 'AnimTranslate 3s infinite' }" />
+    </div>
+    <div :style="{ left: blockSize.width }">
+      <div class="content-font" :style="{ ...titleStyle }">Scale3d</div>
+      <div
+        :style="{ ...itemStyle, animation: 'AnimScale 3s infinite linear' }"
+      />
+    </div>
+    <div :style="{ left: blockSize.width * 2 }">
+      <div class="content-font" :style="{ ...titleStyle }">Rotate3d</div>
+      <div
+        :style="{ ...itemStyle, animation: 'AnimRotate 3s infinite linear' }"
+      />
+    </div>
+    <div :style="{ left: blockSize.width, top: blockSize.height }">
+      <div class="content-font" :style="{ ...titleStyle }">Skew</div>
+      <div
+        :style="{ ...itemStyle, animation: 'AnimSkew 3s infinite ease-in' }"
+      />
+    </div>
+    <div :style="{ left: blockSize.width * 2, top: blockSize.height }">
+      <div class="content-font" :style="{ ...titleStyle }">Opacity</div>
+      <div
+        :style="{
+          ...itemStyle,
+          width: 20,
+          animation: 'AnimOpacityOut 3s infinite ease-out',
+        }"
+      />
+      <div
+        :style="{
+          ...itemStyle,
+          left: 25,
+          width: 20,
+          animation: 'AnimOpacityIn 3s infinite ease-in-out',
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes AnimTranslate {
+  from {
+    transform: translate3d(50%, 50px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes AnimScale {
+  from {
+    transform: scale3d(1.5, 1.5, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 0);
+  }
+}
+
+@keyframes AnimRotate {
+  from {
+    transform: rotate3d(1.5, 1, 1, 90deg);
+  }
+  to {
+    transform: rotate3d(1.5, 1, 1, 0);
+  }
+}
+
+@keyframes AnimSkew {
+  from {
+    transform: skew(30deg, 45deg);
+  }
+  to {
+    transform: skew(0, 0);
+  }
+}
+
+@keyframes AnimOpacityOut {
+  from {
+    opacity: 0.1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes AnimOpacityIn {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 20%;
+  }
+}
+</style>

package/Basic/components/anim/AnimKeyframeComposite.vue

@@ -0,0 +1,52 @@
+<script setup>
+const titleStyle = {
+  width: 100,
+  height: 20,
+  textAlign: "center",
+  lineHeight: 20,
+};
+const itemStyle = {
+  top: 20,
+  width: 50,
+  height: 50,
+  backgroundColor: "rgba(255, 0, 0, 1)",
+};
+</script>
+
+<template>
+  <div id="layout-root">
+    <div>
+      <div class="content-font" :style="{ ...titleStyle }">四种变形动画</div>
+      <div :style="{ ...itemStyle, animation: 'AnimComposite1 3s infinite' }" />
+    </div>
+    <div :style="{ left: 100 }">
+      <div class="content-font" :style="{ ...titleStyle }">变形+透明动画</div>
+      <div :style="{ ...itemStyle, animation: 'AnimComposite2 3s infinite' }" />
+    </div>
+  </div>
+</template>
+
+<style>
+@import "../FontStyle.css";
+</style>
+
+<style>
+@keyframes AnimComposite1 {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+}
+
+@keyframes AnimComposite2 {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+</style>