@shijiu/jsview-vue-samples 1.9.747

package/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, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const transEle1 = shallowRef(null),
+  transEle2 = shallowRef(null),
+  rotateEle1 = shallowRef(null),
+  rotateEle2 = shallowRef(null),
+  rotateEle3 = shallowRef(null),
+  rotateEle4 = shallowRef(null),
+  scaleEle1 = shallowRef(null),
+  scaleEle2 = shallowRef(null),
+  skewEle1 = shallowRef(null),
+  skewEle2 = shallowRef(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/ColorSpace/App.vue

@@ -0,0 +1,126 @@
+<script setup>
+import jpegDemo from "./jpegDemo.jpeg";
+import pngDemo from "./pngDemo.png";
+import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
+import bmpDemo from "./bmpDemo.bmp";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    window.JsView?.setGlobalConfig({
+      texCache: -1,
+    });
+
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+
+  return false;
+};
+</script>
+
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 0, top: 0 }">
+          <div class="leftFont top0">
+            {{ `RBG_8888\n透明区域透明\n色彩不失真` }}
+          </div>
+          <div class="leftFont top250">
+            {{ `RBG_565\n透明区域为黑色\n色彩略失真` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 220, top: 0 }">
+          <img class="graphSize top0" :src="bmpDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="bmpDemo"
+          />
+          <div class="underFont">
+            {{ `bmp图片` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 440, top: 0 }">
+          <img class="graphSize top0" :src="jpegDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="jpegDemo"
+          />
+          <div class="underFont">
+            {{ "jpg/jpeg图片" }}
+          </div>
+        </div>
+
+        <div :style="{ left: 660, top: 0 }">
+          <img class="graphSize top0" :src="pngDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="pngDemo"
+          />
+          <div class="underFont">
+            {{ `png有透明图片\nRGB_565下透明部分为黑色` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 880, top: 0 }">
+          <img class="graphSize top0" :src="pngNoAlphaDemo" />
+          <img
+            class="graphSize top250"
+            jsvImgColorSpace="RGB_565"
+            :src="pngNoAlphaDemo"
+          />
+          <div class="underFont">
+            {{ `png无透明图片` }}
+          </div>
+        </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: 200;
+  height: 200;
+  color: #ffffff;
+  font-size: 30px;
+}
+.top0 {
+  top: 0;
+}
+.top250 {
+  top: 250;
+}
+.graphSize {
+  left: 0;
+  width: 200;
+  height: 200;
+  border-radius: 15px 15px 15px 15px;
+}
+.underFont {
+  left: 0;
+  top: 500;
+  width: 200;
+  height: 200;
+  color: #ffffff;
+  font-size: 20px;
+}
+</style>

package/DemoHomepage/App.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-02 13:31:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-12 13:40:15
+ * @Description: file content
+-->
+<script>
+import { router } from "./router";
+import { jJsvRuntimeBridge } from "jsview";
+
+export default {
+  Router: router,
+  mounted() {
+    jJsvRuntimeBridge.notifyPageLoaded();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<style scoped>
+</style>

package/DemoHomepage/components/BodyFrame.vue

@@ -0,0 +1,95 @@
+<script>
+import { watch } from "vue";
+import { MetroWidget, VERTICAL } from "jsview";
+import Item from "./Item.vue";
+
+export default {
+  components: {
+    Item,
+    MetroWidget,
+  },
+  props: {
+    data: Array,
+    name: String,
+    onEdge: Function,
+    tabId: Number,
+  },
+  setup() {
+    return {
+      direction: VERTICAL,
+      width: 1280,
+      height: 600,
+      initFocusId: 0,
+    };
+  },
+  methods: {
+    measures(item) {
+      return {
+        width: item.width,
+        height: item.height,
+        focusable: item.focusable,
+      };
+    },
+    itemClick(index, data) {
+      if (!data.path) {
+        console.error("Route path is not defined.");
+        return;
+      }
+      this.$router.push(data.path);
+      localStorage.curFocusId = index;
+      localStorage.curTab = this.tabId;
+    },
+    _provideData() {
+      return this.data;
+    },
+  },
+  beforeCreate() {
+    if (typeof localStorage.curFocusId !== "undefined") {
+      this.initFocusId = parseInt(localStorage.curFocusId);
+    }
+    localStorage.curFocusId = 0;
+    watch(
+      () => {
+        return this.data;
+      },
+      () => {
+        this.$refs.mw?.refreshData(true);
+      }
+    );
+  },
+};
+</script>
+
+<template>
+  <metro-widget
+    ref="mw"
+    :name="name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :provideData="_provideData"
+    :enableTouch="true"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="onEdge"
+    :initFocusId="initFocusId"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <Item
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundColor: data.backgroundColor,
+          color: '#000000',
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemClick="itemClick"
+      >
+        {{ data.name }}
+      </Item>
+    </template>
+  </metro-widget>
+</template>