@shijiu/jsview-vue-samples 2.1.200-next-vue.0 → 2.1.339-test.0

package/AnimPicture/App.vue

@@ -6,16 +6,26 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { LoopType, JsvApic } from "jsview";
+import {
+  LoopType,
+  JsvApic,
+  JsvApic2,
+  getTextWidth,
+  VERTICAL,
+  MetroWidget,
+  useFocusHub,
+  ApicEndState,
+} from "jsview";
+import Item from "./Item.vue";
+
 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();
+const focusHub = useFocusHub();
 let catRunPlay = ref(false);
 let girlRunPlay = ref(false);
 let quanPlay = ref(false);
@@ -58,142 +68,236 @@ let girlRunRef = ref(null);
 let quanRef = ref(null);
 let ballRef = ref(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;
+let preClickIndex = -1;
+const data = [
+  {
+    index: 0,
+    content: "彩虹猫",
+    onClick() {
+      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;
+    },
+  },
+  {
+    index: 1,
+    content: "小女孩",
+    onClick() {
+      if (girlRunRef.value) {
+        if (girlRunPlay.value) {
+          girlRunRef.value.stop();
+          girlRunPlay.value = false;
+        } else {
+          girlRunRef.value.play();
+          girlRunPlay.value = true;
+        }
+      }
+    },
+  },
+  {
+    index: 2,
+    content: "优惠券",
+    onClick() {
+      if (quanRef.value) {
+        if (quanPlay.value) {
+          quanRef.value.stop();
+          quanPlay.value = false;
+        } else {
+          quanRef.value.play();
+          quanPlay.value = true;
+        }
       }
-    }
-  } else if (ev.keyCode === 39) {
-    if (quanRef.value) {
-      if (quanPlay.value) {
-        quanRef.value.stop();
-        quanPlay.value = false;
+    },
+  },
+  {
+    index: 3,
+    content: "球:跳至第5帧",
+    onClick() {
+      if (preClickIndex != this.index) {
+        ballRef.value.show(5);
+        ballPlay.value = true;
       } else {
-        quanRef.value.play();
-        quanPlay.value = true;
+        if (ballRef.value) {
+          if (ballPlay.value) {
+            ballRef.value.stop();
+            ballPlay.value = false;
+          } else {
+            ballRef.value.show(5);
+            ballPlay.value = true;
+          }
+        }
       }
-    }
-  } else if (ev.keyCode === 38) {
-    if (ballRef.value) {
-      if (ballPlay.value) {
-        ballRef.value.stop();
-        ballPlay.value = false;
+      preClickIndex = this.index;
+    },
+  },
+  {
+    index: 4,
+    content: "球:部分循环",
+    onClick() {
+      const play = () => {
+        ballRef.value.play(LoopType.LOOP_PART, [
+          [2, 3, 6],
+          [2, 10, 15],
+        ]);
+        ballPlay.value = true;
+      };
+      if (preClickIndex != this.index) {
+        play();
       } else {
-        ballRef.value.play();
+        if (ballRef.value) {
+          if (ballPlay.value) {
+            ballRef.value.stop();
+            ballPlay.value = false;
+          } else {
+            play();
+          }
+        }
+      }
+      preClickIndex = this.index;
+    },
+  },
+  {
+    index: 5,
+    content: "球:完成后消失",
+    onClick() {
+      const play = () => {
+        ballRef.value.play(
+          LoopType.LOOP_PART,
+          [
+            [2, 3, 6],
+            [2, 10, 15],
+          ],
+          ApicEndState.HIDE
+        );
         ballPlay.value = true;
+      };
+      if (preClickIndex != this.index) {
+        play();
+      } else {
+        if (ballRef.value) {
+          if (ballPlay.value) {
+            ballRef.value.stop();
+            ballPlay.value = false;
+          } else {
+            play();
+          }
+        }
       }
-    }
-  }
-  return true;
+      preClickIndex = this.index;
+    },
+  },
+];
+
+const provideData = () => {
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: 150,
+    height: 70,
+    marginRight: 10,
+    marginBottom: 10,
+  };
 };
+
+onMounted(() => {
+  catRunRef.value.play();
+  focusHub.setFocus("myWidget");
+});
 </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 :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
+    <div :style="{ left: 20, top: 20 }">
+      <JsvApic2
+        ref="catRunRef"
+        :src="`url(${catRun})`"
+        :style="{ width: 250, height: 250 }"
+        :onStart="catRunCallback.onStart"
+        :onEnd="catRunCallback.onEnd"
+      />
+      <div className="text" :style="{ top: 270, width: 250 }">
+        {{ `WEBP(${catRunPlay ? "运行" : "停止"})` }}
       </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 :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 ? "运行" : "停止"})` }}
       </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 :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 ? "运行" : "停止"})` }}
       </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 :style="{ left: 800, top: 20 }">
+      <JsvApic2
+        ref="ballRef"
+        :src="`url(${ball})`"
+        :style="{ width: 300, height: 200 }"
+        :onStart="ballCallback.onStart"
+        :onEnd="ballCallback.onEnd"
+      />
+      <div class="text" :style="{ top: 205, width: 300, height: 200 }">
+        {{ `局部循环WEBP(${ballPlay ? "运行" : "停止"})` }}
       </div>
+    </div>
 
-      <div
-        :style="{
-          left: 50,
-          top: 590,
-          width: 1180,
-          textAlign: 'center',
-          color: '#000000',
-          fontSize: 30,
-        }"
-      >
-        {{ `(按键可进行停止/重播操作)` }}
-      </div>
+    <div
+      :style="{
+        left: 50,
+        top: 590,
+        width: 1180,
+        textAlign: 'center',
+        color: '#000000',
+        fontSize: 30,
+      }"
+    >
+      {{ `按钮可以控制对应图播放/停止` }}
     </div>
-  </jsv-focus-block>
+  </div>
+  <metro-widget
+    name="myWidget"
+    :left="20"
+    :top="400"
+    :width="1280"
+    :height="300"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
 </template>
 
 <style scoped>

package/AnimPicture/Item.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  props.data.onClick();
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 150,
+      height: 70,
+      fontSize: 20,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: '#007788',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/ConnectLine/App.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="bgStyle">
+  <div class="text">
+    {{ '第一排为竖线和横线测试\n第二排为纵向拐点测试\n第三排为横向拐点测试\n第四排分别为：不要圆弧、纵向起始拐点失败、横向结束拐点失败' }}
+  </div>
+  <!-- 竖线 -->
+  <JsvConnectLine
+      :isVertical="true"
+      :startPos="startPos5"
+      :endPos="endPos5"
+      :lineWidth="10"
+      :backgroundColor="'#0000FF'"
+      :radius="60"
+      :percent="40"
+      :RoundSet="{start:true, end:true}"
+    ></JsvConnectLine>
+    <!-- 横线 -->
+    <JsvConnectLine
+      :isVertical="true"
+      :startPos="startPos6"
+      :endPos="endPos6"
+      :lineWidth="10"
+      :backgroundColor="'#0000FF'"
+      :radius="60"
+      :percent="40"
+      :RoundSet="{start:true, end:true}"
+    ></JsvConnectLine>
+    <!-- 纵向拐点 -->
+    <!-- 起始拐点 -->
+    <JsvConnectLine
+      :isVertical="true"
+      :startPos="startPos"
+      :endPos="endPos"
+      :lineWidth="6"
+      :backgroundColor="'#FF1213'"
+      :radius="20"
+      :percent="40"
+      :RoundSet="{start:true, end:false}"
+    ></JsvConnectLine>
+    <!-- 全拐 -->
+    <JsvConnectLine
+      :isVertical="true"
+      :startPos="startPos3"
+      :endPos="endPos3"
+      :lineWidth="6"
+      :backgroundColor="'#FF1213'"
+      :radius="20"
+      :percent="30"
+      :RoundSet="{start:true, end:true}"
+    ></JsvConnectLine>
+    <!-- 结束拐点 -->
+    <JsvConnectLine
+      :isVertical="true"
+      :startPos="startPos7"
+      :endPos="endPos7"
+      :lineWidth="6"
+      :backgroundColor="'#FF1213'"
+      :radius="10"
+      :percent="50"
+      :RoundSet="{start:false, end:true}"
+    ></JsvConnectLine>
+    <!-- 横向拐点 -->
+    <!-- 起始拐点 -->
+    <JsvConnectLine
+      :isVertical="false"
+      :startPos="startPos2"
+      :endPos="endPos2"
+      :lineWidth="6"
+      :backgroundColor="'#7CFC00'"
+      :radius="40"
+      :percent="60"
+      :RoundSet="{start:true, end:false}"
+    ></JsvConnectLine>
+    <!-- 全拐 -->
+    <JsvConnectLine
+      :isVertical="false"
+      :startPos="startPos4"
+      :endPos="endPos4"
+      :lineWidth="6"
+      :backgroundColor="'#7CFC00'"
+      :radius="40"
+      :percent="40"
+      :RoundSet="{start:true, end:true}"
+    ></JsvConnectLine>
+    <!-- 结束拐点 -->
+    <JsvConnectLine
+      :isVertical="false"
+      :startPos="startPos8"
+      :endPos="endPos8"
+      :lineWidth="6"
+      :backgroundColor="'#7CFC00'"
+      :radius="40"
+      :percent="40"
+      :RoundSet="{start:false, end:true}"
+    ></JsvConnectLine>
+    <!-- 不要圆弧 -->
+    <JsvConnectLine
+      :isVertical="false"
+      :startPos="startPos9"
+      :endPos="endPos9"
+      :lineWidth="10"
+      :backgroundColor="'#FFC0CB'"
+      :radius="50"
+      :percent="50"
+      :RoundSet="{start:false, end:false}"
+    ></JsvConnectLine>
+    <!-- 纵向起始拐点失败 -->
+     <JsvConnectLine
+      :isVertical="true"
+      :startPos="startPos10"
+      :endPos="endPos10"
+      :lineWidth="10"
+      :backgroundColor="'#FFC0CB'"
+      :radius="50"
+      :percent="30"
+      :RoundSet="{start:true, end:true}"
+    ></JsvConnectLine>
+    <!-- 横向结束拐点失败 -->
+    <JsvConnectLine
+      :isVertical="false"
+      :startPos="startPos11"
+      :endPos="endPos11"
+      :lineWidth="10"
+      :backgroundColor="'#FFC0CB'"
+      :radius="40"
+      :percent="80"
+      :RoundSet="{start:true, end:true}"
+    ></JsvConnectLine>
+  </div>
+</template>
+
+<script setup>
+import { JsvConnectLine } from "jsview";
+let startPos = { x: 200, y: 350 };
+let endPos = { x: 400, y: 250 };
+let startPos2 = { x: 200, y: 400 };
+let endPos2 = { x: 400, y: 500 };
+let startPos3 = { x: 500, y: 250 };
+let endPos3 = { x: 700, y: 350 };
+let startPos4 = { x: 500, y: 400 };
+let endPos4 = { x: 700, y: 500 };
+let startPos5 = { x: 400, y:100}
+let endPos5 = { x: 400, y:200}
+let startPos6 = { x:800,y:150}
+let endPos6 = { x:1000,y:150}
+let startPos7 = { x:800,y:250}
+let endPos7 = { x:1000,y:350}
+let startPos8 ={x:800,y:500}
+let endPos8 = { x:1000,y:400}
+let startPos9 = { x:200,y: 550}
+let endPos9 = { x:400,y:650}
+let startPos10 = { x:500,y:650}
+let endPos10 = { x:700,y:550}
+let startPos11 = { x:800,y:550}
+let endPos11 = { x:1000,y:650}
+</script>
+
+<style lang="scss" scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.text{
+  width:300;
+  height:120;
+  color:#FFFFFF;
+  font-size: 20;
+  left:30;
+  top:30;
+  line-height: 24;
+}
+</style>