@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/NinePatchTester/App.vue

@@ -19,7 +19,7 @@
         :style="{
           width: sampleImageWidth,
           height: sampleImageWidth,
-          backgroundImage: `jsvtexturestore://${sourceId}`,
+          backgroundImage: textureUrl,
         }"
       />
       <div
@@ -100,7 +100,7 @@
           width: vTargetRectWidth,
           height: vTargetRectHeight,
         }"
-        :imageUrl="`jsvtexturestore://${sourceId}`"
+        :imageUrl="textureUrl"
         :imageWidth="vImageWidth"
         :centerWidth="vCenterWidth"
         :imageDspWidth="vImageDspWidth"
@@ -132,44 +132,37 @@
 
 <script setup>
 import { shallowRef, onBeforeUnmount } from "vue";
-import { JsvNinePatch, JsvTextureStoreApi, JsvFlexDiv } from "jsview";
+import { JsvNinePatch, JsvTextureStoreApi, JsvFlexDiv, JsvTextureBuilder } from "jsview";
 
-// 调试参数输入设定
-const innerRadius2 = 110; // 最右边图片的内直径(也是右边图矩形的边长值)
-const circleLineWidth = 10; // 最右边图的边缘粗细
-const sampleImageWidth = 148; // 最右边图形的画布尺寸，画布为正方形
+// 素材图片的参数, 以下三个值根据设计要求调整, 只和要框住的圆角矩形的圆角半径有关, 和要框住的圆角矩形的宽高无关
+const vTargetRectRaidus = 55; // 需要对齐区域的圆角半径
+const circleLineWidth = 10; // 焦点框素材图片的焦点框的线粗, 根据设计要求调整即可
+const innerRadius2 = vTargetRectRaidus * 2; // 焦点框素材图片的内直径, 此值应该等于所框图形的圆角半径的二倍
 
+// 以下两个设置定为变量, 实际根据圆角矩形的宽高可变化
 const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
 const vTargetRectHeight = 300; // 需要对齐区域的矩形高
-const vTargetRectRaidus = innerRadius2 / 2; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
 
-// 计算后的对应NinePatch参数
-let vBorderOutset = (sampleImageWidth - innerRadius2) / 2; // 设置值为图片长度减去内直径除以2
-let vImageWidth = sampleImageWidth; // 原图尺寸设置
-let vImageDspWidth = sampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
-let vCenterWidth = 1; // 圆形的.9图, 中心固定为1
+let textureUrl = shallowRef("");
+const textureInfo = JsvTextureBuilder.buildCircleNinePatchTexture({
+  cornerRadius: vTargetRectRaidus,
+  circleLineWidth,
+  circleColor: "#FF00FF7F",
+  bgColor: "rgba(200,200,200,0.5)",
+}); // 统一通过TextureBuilder构建CanvasTexture
+textureUrl.value = `jsvtexturestore://${textureInfo.texAccessName}`;
+let sourceId = textureInfo.texAccessName;
 
-// 设置设定模拟绘制.9图
-let canvasRef;
-let sourceId = shallowRef("");
-canvasRef = JsvTextureStoreApi.canvasTexture(
-  sampleImageWidth,
-  sampleImageWidth
-); // 创建画布
+// 获得JsvNinePatch的参数
+let vBorderOutset = textureInfo.BorderOutset;
+let vImageWidth = textureInfo.ImageWidth;    // 原图尺寸, 为显示尺寸 x displayScale
+let vImageDspWidth = textureInfo.ImageDspWidth; // 显示尺寸: 图尺进行缩放到目标位置的尺寸
+let vCenterWidth = textureInfo.CenterWidth;
 
-let circleRadius =
-  Math.floor(innerRadius2 / 2) + Math.floor(circleLineWidth / 2); // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
-let customPath = canvasRef.circlePath(
-  Math.floor(sampleImageWidth / 2),
-  Math.floor(sampleImageWidth / 2),
-  circleRadius
-); // 创建圆环绘制路径，圆形在画布的中心点位置
-canvasRef.drawColor("rgba(200,200,200,0.5)"); // 画布绘制半透明底色
-customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
-sourceId.value = canvasRef.commit(); // texture和div的textureStore绑定
+const sampleImageWidth = vImageDspWidth; // 样例图的显示尺寸设置
 
 onBeforeUnmount(() => {
-  JsvTextureStoreApi.deleteTexture(sourceId.value); // 释放texture资源
+  JsvTextureStoreApi.deleteTexture(sourceId); // 释放texture资源
 });
 </script>
 

package/PosterPacker/App.vue

@@ -79,9 +79,9 @@ const onKeyDown = (ev) => {
     }
     case 13: {
       if (rKeyCount.value == 0) {
-        cChildRef1.value.getRandomDecimal();
+        cChildRef1.value?.getRandomDecimal();
       } else {
-        cChildRef2.value.switcher();
+        cChildRef2.value?.switcher();
       }
 
       return true;

package/PreDecode/App.vue

@@ -0,0 +1,140 @@
+<template>
+  <jsv-focus-block
+    :onAction="{ onKeyDown }"
+    autoFocus
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <JsvPreload :downloadList="downloadInfo" :onDownloadDone="onDownloadDone" />
+    <div
+      v-if="loadDone"
+      :style="{
+        left: rootLeft,
+        transition: 'left 0.5s ease-in-out',
+      }"
+      @transitionend="onTransitionEnd"
+    >
+      <JsvPosterImage
+        v-if="showImg == 0"
+        :style="{
+          left: 0,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImageLongmao"
+      >
+      </JsvPosterImage>
+      <JsvPosterImage
+        v-if="showImg == 1"
+        :style="{
+          left: 1280,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImageOwl"
+      >
+      </JsvPosterImage>
+      <JsvPosterImage
+        v-if="showImg == 2"
+        :style="{
+          left: 2560,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImagePanda"
+      >
+      </JsvPosterImage>
+    </div>
+
+    <div
+      :style="{
+        width: 1280,
+        height: 40,
+        backgroundColor: '#00000088',
+        top: 100,
+        color: '#ffffff',
+        fontSize: 30,
+        textAlign: 'center',
+      }"
+    >
+      下载并预解码完成后展示图片, 按左右键, 看图片解码时间的延迟
+    </div>
+
+    <div
+      :style="{
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        backgroundColor: '#ff0000',
+        animation: 'rotate 5s linear infinite',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { JsvPosterImage, JsvPreload, buildDownloadInfo } from "jsview";
+
+const rootLeft = ref(0);
+const showImg = ref(0);
+const loadDone = ref(false);
+const ImageLongmao =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg";
+const ImagePanda =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const ImageOwl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+const downloadInfo = [
+  buildDownloadInfo(ImageLongmao, null, false, true),
+  buildDownloadInfo(ImagePanda, null, false, true),
+  buildDownloadInfo(ImageOwl, null, false, true),
+];
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      if (showImg.value > 0) {
+        showImg.value = showImg.value - 1;
+        rootLeft.value = rootLeft.value + 1280;
+      }
+      break;
+    case 39:
+      if (showImg.value < 2) {
+        showImg.value = showImg.value + 1;
+        rootLeft.value = rootLeft.value - 1280;
+      }
+      break;
+  }
+};
+
+const onDownloadDone = (info) => {
+  console.log("onDownloadDone", info);
+  loadDone.value = true;
+};
+
+const onTransitionEnd = () => {
+  console.log("onAnimationEnd clear resource");
+  window.JsvCoreApi?.triggerTextureRecycle?.();
+};
+
+</script>
+
+<style>
+@keyframes rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/ReactiveTest/App.vue

@@ -0,0 +1,115 @@
+<script setup>
+/**
+ * @description: 图片交替展示示例
+ * 如本样例的item.vue所示, 使用 JsvPosterImage/JsvPosterDiv 组件, 设置 srcList 属性, 
+ * 将AB两个图作为非响应式数组输入到组件中, 即可实现AB都载入到内存，切换时不会闪
+ * 相比Preload进行预加载，此方案没有Preload的图永久在内存的问题，AB两图会根据显隐的控制在不显示时自动**同时**清理出内存
+ */
+import { MetroWidget, VERTICAL, useFocusHub, JsvTextureStoreApi } from "jsview";
+import Item from "./Item.vue";
+import { onMounted, inject, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+import data from "./data.js";
+import logo from "../assets/logo.png";
+
+const router = useRouter();
+const focusHub = useFocusHub();
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: 10,
+    marginBottom: 10,
+    placeHolderLayout: {
+      width: item.width,
+      height: item.height,
+      logoWidth: item.index % 2 == 0 ? 120 : 60,
+      logoHeight: item.index % 2 == 0 ? 98 : 49,
+    },
+  };
+};
+
+let rCaptureImage = inject("homeCaptureImage");
+let rToCaputureNode = shallowRef(null);
+
+const onDispatchKeyDown = (ev) => {
+  return false;
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    // 返回处理, 测试跨路由截图功能
+    JsvTextureStoreApi.capture2Texture(
+      rToCaputureNode.value,
+      (textureName, autoRecycle, w, h) => {
+        console.log("test ImageCapture done");
+        rCaptureImage.value = textureName;
+        router.go(-1);
+      },
+      false // 不自动回收
+    );
+  }
+  return true;
+};
+
+const provideData = () => {
+  return data;
+};
+
+onMounted(() => {
+  focusHub.setFocus("myFocusWidget");
+});
+</script>
+
+<template>
+  <div
+    ref="rToCaputureNode"
+    :style="{
+      width: 1280,
+      height: 720,
+    }"
+  >
+    <jsv-focus-block
+      :style="{
+        width: 1920,
+        height: 1080,
+        backgroundColor: '#007788',
+      }"
+      :onKeyDown="onKeyDown"
+      :onDispatchKeyDown="onDispatchKeyDown"
+    >
+      <metro-widget
+        name="myFocusWidget"
+        :top="50"
+        :left="50"
+        :width="1000"
+        :height="550"
+        :direction="VERTICAL"
+        :provideData="provideData"
+        :measures="measures"
+        :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
+        :enableItemRenderBreak="true"
+        :touchFlag="0"
+        :placeHolderSetting="{
+          backgroundColor: 'rgba(78,105,127, 0.8)',
+          focusBackgroundColor: '#770088aa',
+          borderRadius: 10,
+          gap: 10,
+          logoUrl: logo,
+          logoWidth: 120,
+          logoHeight: 98,
+        }"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </metro-widget>
+    </jsv-focus-block>
+  </div>
+</template>

package/ReactiveTest/Item.vue

@@ -0,0 +1,92 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, computed, watchEffect } from "vue";
+import { JsvFlexDiv } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+let focused = ref(false);
+let borderSet = ref("10");
+let doFadeIn = ref(true);
+
+// const altSrcs = [props.data.url, props.data.focusUrl];
+const altSrcs = [props.data.focusUrl, props.data.url];
+
+const onFocus = () => {
+  focused.value = true;
+  borderSet.value = "10 0 10 0";
+  doFadeIn.value = false;
+};
+
+const onBlur = () => {
+  focused.value = false;
+  borderSet.value = "10";
+};
+
+const onClicked = () => {
+  console.log(`item ${props.query.id} clicked`);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+
+const posterStyle = computed(() => {
+  // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
+  return {
+    width: props.data.width,
+    height: props.data.height,
+    borderRadius: borderSet.value,
+  }
+});
+
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.25s linear',
+      transform: focused ? 'scale3d(1.1, 1.1, 1)' : '',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -10,
+        top: -10,
+        width: props.data.width + 20,
+        height: props.data.height + 20,
+        backgroundColor: '#770088',
+        borderRadius: 10,
+      }"
+    >
+    </div>
+    <props.data.component :data="data" :query="query" :focused="focused"/>
+    <jsv-flex-div
+      :style="{
+        top:8,
+        left:8,
+        backgroundColor: '#00FF00',
+      }"
+    >
+      <div
+          :style="{
+            height: 30,
+            fontSize: 20,
+          }"
+        >
+          {{ data.name }}
+      </div>
+    </jsv-flex-div>
+  </div>
+</template>