@shijiu/jsview-vue 0.9.602 → 0.9.684

package/samples/Basic/components/text/TextOverflow.vue

@@ -10,7 +10,12 @@ const baseStyle = {
   backgroundColor: "rgba(255, 255, 0, 0.5)",
   color: "rgba(255, 0, 0, 1)",
 };
-const multiLine =
+const multiLineCut =
+  "多行文字（末尾截断)：" +
+  '\n第一行：我末尾有个"\\n"' +
+  "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
+  "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
+const multiLineEllipsis =
   "多行文字（末尾省略)：" +
   '\n第一行：我末尾有个"\\n"' +
   "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
@@ -77,11 +82,11 @@ const multiLine =
         top: (blockSize.height + gap) * 4,
         height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'ellipsis',
+        textOverflow: 'clip',
         overflow: 'hidden',
       }"
     >
-      5.{{ multiLine }}
+      5.{{ multiLineCut }}
     </div>
 
     <div
@@ -91,11 +96,11 @@ const multiLine =
         top: (blockSize.height + gap) * 4 + 67,
         height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'clip',
+        textOverflow: 'ellipsis',
         overflow: 'hidden',
       }"
     >
-      6.{{ multiLine }}
+      6.{{ multiLineEllipsis }}
     </div>
   </div>
 </template>

package/samples/Collision/App.vue

@@ -0,0 +1,452 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-08-30 10:58:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 14:20:46
+ * @Description: file content
+-->
+<script setup>
+import { createImpactTracer, createImpactCallback } from "jsview";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const transEle1 = ref(null),
+  transEle2 = ref(null),
+  rotateEle1 = ref(null),
+  rotateEle2 = ref(null),
+  rotateEle3 = ref(null),
+  rotateEle4 = ref(null),
+  scaleEle1 = ref(null),
+  scaleEle2 = ref(null),
+  skewEle1 = ref(null),
+  skewEle2 = ref(null);
+
+let sensors = [];
+
+const tLeftColor = ref("#FF0000"),
+  tRightColor = ref("#00FF00"),
+  rLeftColor = ref("#FF0000"),
+  rRightColor = ref("#00FF00"),
+  r2LeftColor = ref("#FF0000"),
+  r2RightColor = ref("#00FF00"),
+  sLeftColor = ref("#FF0000"),
+  sRightColor = ref("#00FF00"),
+  skLeftColor = ref("#FF0000"),
+  skRightColor = ref("#00FF00");
+
+const lastItemVisibility = ref("hidden"); // 验证View先声明碰撞检测再显示的场景，是否碰撞能正常生效
+const lastItemGone = ref(false); // 验证碰撞对象关联的View从ViewTree拿掉后是否触发Native端的自清理处理
+
+setTimeout(() => {
+  lastItemVisibility.value = "visible";
+}, 1000);
+setTimeout(() => {
+  lastItemGone.value = true;
+}, 5000);
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+onMounted(() => {
+  const translate_sensor = createImpactTracer(
+    transEle1.value,
+    transEle2.value,
+    createImpactCallback(
+      () => {
+        tLeftColor.value = "#00FFFF";
+        tRightColor.value = "#FFFF00";
+      },
+      () => {
+        tLeftColor.value = "#FF0000";
+        tRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(translate_sensor);
+
+  const rotate_count = { count: 0 };
+  const rotate_sensor = createImpactTracer(
+    rotateEle1.value,
+    rotateEle2.value,
+    createImpactCallback(
+      () => {
+        rLeftColor.value = "#00FFFF";
+        rRightColor.value = "#FFFF00";
+      },
+      () => {
+        rotate_count.count++;
+        if (rotate_count.count >= 2) {
+          // 旋转有头尾连续两次碰撞
+          console.log("Finish collision of rotate element");
+        }
+        rLeftColor.value = "#FF0000";
+        rRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(rotate_sensor);
+
+  const rotate2_sensor = createImpactTracer(
+    rotateEle3.value,
+    rotateEle4.value,
+    createImpactCallback(
+      () => {
+        r2LeftColor.value = "#00FFFF";
+        r2RightColor.value = "#FFFF00";
+      },
+      () => {
+        r2LeftColor.value = "#FF0000";
+        r2RightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(rotate2_sensor);
+
+  const scale_sensor = createImpactTracer(
+    scaleEle1.value,
+    scaleEle2.value,
+    createImpactCallback(
+      () => {
+        sLeftColor.value = "#00FFFF";
+        sRightColor.value = "#FFFF00";
+      },
+      () => {
+        sLeftColor.value = "#FF0000";
+        sRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(scale_sensor);
+
+  const skew_sensor = createImpactTracer(
+    skewEle1.value,
+    skewEle2.value,
+    createImpactCallback(
+      () => {
+        skLeftColor.value = "#00FFFF";
+        skRightColor.value = "#FFFF00";
+      },
+      () => {
+        skLeftColor.value = "#FF0000";
+        skRightColor.value = "#00FF00";
+      }
+    )
+  );
+  sensors.push(skew_sensor);
+});
+
+onBeforeUnmount(() => {
+  for (let i = 0; i < sensors.length; i++) {
+    sensors[i].Recycle();
+  }
+  sensors = [];
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1280 - 200,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      原生端辅助的高效率碰撞检测处理
+    </div>
+    <div :style="{ top: 200, left: 100 }">
+      <div
+        ref="transEle1"
+        :style="{
+          left: 0,
+          width: 100,
+          height: 100,
+          backgroundColor: tLeftColor,
+          animation: 'toRight 5s',
+        }"
+      >
+        view1
+      </div>
+      <div :style="{ left: 300 }">
+        <div
+          ref="transEle2"
+          :style="{
+            width: 100,
+            height: 100,
+            backgroundColor: tRightColor,
+            animation: 'toLeft 5s',
+          }"
+        >
+          view2
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ top: 500, left: 100 }">
+      <div
+        ref="rotateEle1"
+        :style="{
+          left: 0,
+          width: 20,
+          height: 150,
+          backgroundColor: rLeftColor,
+          animation: 'rotate1 5s',
+        }"
+      >
+        view1
+      </div>
+      <div
+        ref="rotateEle2"
+        :style="{
+          left: 100,
+          width: 20,
+          height: 150,
+          backgroundColor: rRightColor,
+          animation: 'rotate2 5s',
+        }"
+      >
+        view2
+      </div>
+    </div>
+
+    <div :style="{ top: 500, left: 500 }">
+      <div
+        :style="{
+          top: 50,
+          left: 0,
+          width: 150,
+          height: 150,
+          backgroundColor: 'rgba(255,255,255,0.5)',
+          animation: 'rotate3 5s',
+        }"
+      >
+        <div
+          ref="rotateEle3"
+          :style="{
+            left: (150 - 20) / 2,
+            width: 20,
+            height: 150,
+            backgroundColor: r2LeftColor,
+          }"
+        >
+          view1
+        </div>
+      </div>
+      <div
+        :style="{
+          top: 0,
+          left: 100,
+          width: 150,
+          height: 150,
+          backgroundColor: 'rgba(255,255,255,0.5)',
+          animation: 'rotate4 5s',
+        }"
+      >
+        <div
+          ref="rotateEle4"
+          :style="{
+            left: 0,
+            top: (150 - 20) / 2,
+            width: 150,
+            height: 20,
+            backgroundColor: r2RightColor,
+          }"
+        >
+          view2
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ top: 200, left: 500 }">
+      <div
+        ref="scaleEle1"
+        :style="{
+          left: 100,
+          width: 100,
+          height: 100,
+          backgroundColor: sLeftColor,
+          animation: 'scale1 5s',
+        }"
+      >
+        view1
+      </div>
+      <div
+        ref="scaleEle2"
+        :style="{
+          left: 250,
+          width: 100,
+          height: 100,
+          backgroundColor: sRightColor,
+          animation: 'scale2 5s',
+        }"
+      >
+        view2
+      </div>
+    </div>
+
+    <div
+      v-if="!lastItemGone"
+      :style="{
+        top: 500,
+        left: 800,
+        visibility: lastItemVisibility,
+      }"
+    >
+      <div
+        ref="skewEle1"
+        :style="{
+          left: 100,
+          width: 100,
+          height: 100,
+          backgroundColor: skLeftColor,
+          animation: 'skew1 5s',
+        }"
+      >
+        viewA
+      </div>
+      <div
+        ref="skewEle2"
+        :style="{
+          left: 300,
+          width: 100,
+          height: 100,
+          backgroundColor: skRightColor,
+          animation: 'skew2 5s',
+        }"
+      >
+        viewB
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes toLeft {
+  from {
+    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
+  }
+  to {
+    transform: translate3d(-300px, 0, 0) scale3d(1.5, 1.5, 1);
+  }
+}
+
+@keyframes toRight {
+  from {
+    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
+  }
+  to {
+    transform: translate3d(300px, 0, 0) scale3d(1.5, 1.5, 1);
+  }
+}
+
+@keyframes rotate1 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+/* webview中 旋转轴为(0,0,-1)会导致getComputeStyle中的transform为单位矩阵*/
+@keyframes rotate2 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, -360deg);
+  }
+}
+
+@keyframes scale1 {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(2, 2, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes scale2 {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(2, 2, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes skew1 {
+  0% {
+    transform: skew(0, 0);
+  }
+  50% {
+    transform: skew(-60deg, 0);
+  }
+  100% {
+    transform: skew(0, 0);
+  }
+}
+
+@keyframes skew2 {
+  0% {
+    transform: skew(0, 0);
+  }
+  50% {
+    transform: skew(60deg, 0);
+  }
+  100% {
+    transform: skew(0, 0);
+  }
+}
+
+@keyframes rotate3 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+    transform-origin: center top;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, -360deg);
+    transform-origin: center top;
+  }
+}
+
+@keyframes rotate4 {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, -360deg);
+    transform-origin: center center;
+  }
+}
+</style>

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -12,6 +12,7 @@ export default {
     data: Array,
     name: String,
     onEdge: Function,
+    tabId: Number,
   },
   setup() {
     return {
@@ -36,6 +37,7 @@ export default {
       }
       this.$router.push(data.path);
       localStorage.curFocusId = index;
+      localStorage.curTab = this.tabId;
     },
     _provideData() {
       return this.data;

package/samples/DemoHomepage/router.js

@@ -129,11 +129,36 @@ const routeList = [
     path: "/feature/TextureAnimation",
     component: () => import("jsview/samples/TextureAnimation/App"),
   },
+  {
+    name: "焦点框旋转光效果",
+    path: "/feature/TextureAnimation2",
+    component: () => import("jsview/samples/TextureAnimation/App2"),
+  },
   {
     name: "公祭日黑白效果",
     path: "/feature/GrayDown",
     component: () => import("jsview/samples/FilterDemo/App"),
   },
+  {
+    name: "预加载",
+    path: "/feature/Preload",
+    component: () => import("jsview/samples/Preload/App"),
+  },
+  {
+    name: "图片缩小算法",
+    path: "/feature/ScaleDownNeon",
+    component: () => import("jsview/samples/ScaleDownNeon/App"),
+  },
+  // {
+  //   name: "碰撞检测",
+  //   path: "/feature/Collision",
+  //   component: () => import("jsview/samples/Collision/App"),
+  // },
+  // {
+  //   name: "碰撞即停",
+  //   path: "/feature/ImpactStop",
+  //   component: () => import("jsview/samples/ImpactStop/App"),
+  // },
 
   // MetroWidget示例
   {

package/samples/DemoHomepage/views/Homepage.vue

@@ -89,15 +89,12 @@ export default {
       }
     },
     tabItemFocus(data) {
-      console.log("cchtest tabItemFocus");
       if (data.id != this.tabId) {
         this.tabId = data.id;
         this.contentData = dataList[this.tabId];
-        localStorage.curTab = this.tabId;
       }
     },
     onDialogAction(msg) {
-      console.log("cchtes dialog onaction", msg);
       this.showExitDialog = false;
       this.changeFocus(this.preFocusName);
       switch (msg) {
@@ -115,19 +112,14 @@ export default {
     },
   },
   created() {
-    console.log("cchtest homepage beforeCreated", localStorage.curTab);
     if (typeof localStorage.curTab !== "undefined") {
       this.tabId = parseInt(localStorage.curTab);
     }
     localStorage.curTab = 0;
     this.contentData = dataList[this.tabId];
   },
-  mounted() {
-    console.log("cchtest homepage mounted", localStorage.curTab);
-  },
-  beforeUnmount() {
-    console.log("cchtest homePage beforeUnmount");
-  },
+  mounted() {},
+  beforeUnmount() {},
 };
 </script>
 
@@ -165,6 +157,7 @@ export default {
           :data="contentData"
           :name="name + '/bodyFrame'"
           :onEdge="onContentEdge"
+          :tabId="tabId"
         />
       </div>