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

package/ScreenToBlob/App.vue

@@ -0,0 +1,250 @@
+<script setup>
+import { shallowRef, ref, onBeforeUnmount } from "vue";
+import { JsvTextureStoreApi, JsvPreload, buildPreloadInfo, BlobApi } from "jsview";
+
+// 与 DominantColor 示例保持一致的两张图片
+const Image1 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const Image2 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+// 需要截屏的区域
+const vToCapture = shallowRef(null);
+
+// 左侧资源统一收拢到一个非响应式对象中，便于集中管理回收逻辑
+const cLeftResource = {
+  // Blob 显示用的 URL
+  blobUrl: ref(null),
+  // 当前 object URL，用于释放
+  currentObjectUrl: null,
+  // 全局 BitPalette 句柄，用于在 unmount 时统一回收
+  activeBitPalette: null,
+};
+
+// 截屏 cancel 句柄
+let captureTextureHandle = null;
+
+function handleLoadDone() {
+  console.log("图片预加载完成");
+  doCaptureAndToBlob();
+}
+
+async function doCaptureAndToBlob() {
+  try {
+    console.log("ScreenToBlob: doCaptureAndToBlob");
+
+    if (!vToCapture.value) {
+      console.warn("ScreenToBlob: vToCapture 为空");
+      return;
+    }
+
+    // 截屏生成 texture
+    captureTextureHandle = JsvTextureStoreApi.capture2Texture(
+      vToCapture.value,
+      async (textureName, autoRecycle, w, h) => {
+        console.log("ScreenToBlob capture2Texture", textureName, autoRecycle, w, h);
+        if (!textureName || textureName.length === 0) {
+          console.warn("ScreenToBlob: capture2Texture 返回空 textureName");
+          return;
+        }
+
+        const src = `jsvtexturestore://${textureName}`;
+        let bitPalette = null;
+        try {
+          // 若已有未完成的 BitPalette，先回收
+          cLeftResource.activeBitPalette?.recycle();
+
+          // 使用 getBitPalette 获取 BitPalette，并保存为全局句柄
+          bitPalette = JsvTextureStoreApi.getBitPalette(src);
+          cLeftResource.activeBitPalette = bitPalette;
+
+          await bitPalette.Ready;
+
+          // 通过 BitPaletteCtrl.toBlob 获得 Blob
+          const blob = await bitPalette.Ctrl?.toBlob();
+          if (!blob) {
+            console.warn("ScreenToBlob: toBlob 返回空 Blob");
+            return;
+          }
+
+          // 释放旧的 object URL
+          if (cLeftResource.currentObjectUrl) {
+            BlobApi.revokeObjectURL(cLeftResource.currentObjectUrl);
+            cLeftResource.currentObjectUrl = null;
+          }
+
+          // 创建新的 object URL，并用于展示
+          cLeftResource.currentObjectUrl = await BlobApi.createObjectURL(blob);
+          cLeftResource.blobUrl.value = cLeftResource.currentObjectUrl;
+        } catch (error) {
+          console.error("ScreenToBlob: BitPalette 处理失败", error);
+        } finally {
+          // 释放 BitPalette 资源，并清理全局句柄
+          if (cLeftResource.activeBitPalette === bitPalette) {
+            bitPalette?.recycle();
+            cLeftResource.activeBitPalette = null;
+          }
+          // 手动删除截图纹理，防止泄漏
+          JsvTextureStoreApi.deleteTexture(textureName);
+        }
+      },
+      false // 手动deleteTexture进行回收而非自动回收, JsvTextureStoreApi.getBitPalette 的需求
+    );
+  } catch (error) {
+    console.error("ScreenToBlob: capture2Texture 调用失败", error);
+  }
+}
+
+// 处理右边区域的Blob展示, 右边区域使用图片src直接展示
+const cRightResource = {
+  // Blob 显示用的 URL
+  blobUrl: ref(null),
+  // 当前 object URL，用于释放
+  currentObjectUrl: null,
+  // 全局 BitPalette 句柄，用于在 unmount 时统一回收
+  activeBitPalette: null,
+};
+async function handleRightBlob(src) {
+  // 使用 getBitPalette 获取 BitPalette，并保存为全局句柄
+  const bitPalette = JsvTextureStoreApi.getBitPalette(src);
+  cRightResource.activeBitPalette = bitPalette;
+
+  await bitPalette.Ready;
+
+  // 通过 BitPaletteCtrl.toBlob 获得 Blob
+  const blob = await bitPalette.Ctrl?.toBlob();
+  if (!blob) {
+    console.warn("ScreenToBlob: toBlob 返回空 Blob");
+    return;
+  }
+
+  // 释放旧的 object URL
+  if (cRightResource.currentObjectUrl) {
+    BlobApi.revokeObjectURL(cRightResource.currentObjectUrl);
+    cRightResource.currentObjectUrl = null;
+  }
+
+  // 创建新的 object URL，并用于展示
+  cRightResource.currentObjectUrl = await BlobApi.createObjectURL(blob);
+  cRightResource.blobUrl.value = cRightResource.currentObjectUrl;
+}
+handleRightBlob(Image2);
+
+onBeforeUnmount(() => {
+
+  // ------- 先处理左边资源的回收 -------
+
+  // 取消截屏, 回收resource
+  captureTextureHandle?.recycle();
+
+  // 回收仍在进行中的 BitPalette - 左侧
+  cLeftResource.activeBitPalette?.recycle();
+  cLeftResource.activeBitPalette = null;
+
+  // 释放 object URL - 左侧
+  if (cLeftResource.currentObjectUrl) {
+    BlobApi.revokeObjectURL(cLeftResource.currentObjectUrl);
+    cLeftResource.currentObjectUrl = null;
+    console.log("ScreenToBlob: 已释放 object URL (左侧)");
+  }
+
+  // ------- 再处理右边资源的回收 -------
+  // 回收仍在进行中的 BitPalette - 右侧
+  cRightResource.activeBitPalette?.recycle();
+  cRightResource.activeBitPalette = null;
+
+  // 释放 object URL - 右侧
+  if (cRightResource.currentObjectUrl) {
+    BlobApi.revokeObjectURL(cRightResource.currentObjectUrl);
+    cRightResource.currentObjectUrl = null;
+    console.log("ScreenToBlob: 已释放 object URL (右侧)");
+  }
+});
+</script>
+
+<template>
+  <!-- 背景，与 DominantColor 保持一致 -->
+  <div
+    :style="{
+      left: 0,
+      top: 0,
+      width: 1280,
+      height: 720,
+      backgroundColor: '#FFFFFF',
+    }"
+  ></div>
+
+  <div
+    :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 140,
+      top: 20,
+      width: 1000,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }"
+  >
+    下方为blob显示,1为截图blob, 2为给定url的blob
+  </div>
+
+  <!-- 截屏区域, 等图片加载完成后进行截屏动作 -->
+  <div
+    ref="vToCapture"
+    :style="{
+      left: 0,
+      top: 80,
+      width: 640,
+      height: 360,
+    }"
+  >
+    <img
+      :style="{
+        width: 640,
+        height: 360,
+      }"
+      :onLoad="handleLoadDone" 
+      :src="Image1"
+    />
+    <div
+      :style="{
+        width: 300,
+        height: 300,
+        backgroundColor: '#007788',
+      }"
+    ></div>
+  </div>
+
+
+  <!-- Blob 结果展示区域，仿照 BlobLoadTest，在绘制内容下方展示 -->
+  <div
+    v-if="cLeftResource.blobUrl.value"
+    :style="{
+      top: 450,
+      left: 0,
+    }"
+  >
+    <img
+      :src="cLeftResource.blobUrl.value"
+      :style="{
+        width: 640,
+        height: 250,
+        objectFit: 'contain',
+      }"
+    />
+  </div>
+
+  <!-- 右侧图片展示 -->
+  <div
+    :style="{
+      left: 640,
+      top: 450,
+      width: 320,
+      height: 180,
+      backgroundImage: `url(${cRightResource.blobUrl.value})`,
+    }"
+  />
+</template>
+

package/ScrollBoxTest/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+  <jsv-focus-block autoFocus :onAction="onAction">
     <div class="bgSty">
       <!-- 提示 -->
       <div class="text" :style="{ left: 210, top: 20 }">
@@ -19,9 +19,9 @@
         <div class="bg2" />
         <div class="bg3" />
         <!-- 进度条 -->
-        <SizeDivBar :top="80" :left="0" />
-        <ClipBar :top="210" :left="0" />
-        <NinePatchBar :top="340" :left="0" />
+        <SizeDivBar ref="sizeDivBarRef" :top="80" :left="0" />
+        <ClipBar ref="clipBarRef" :top="210" :left="0" />
+        <NinePatchBar ref="ninePatchBarRef" :top="340" :left="0" />
         <!-- 图1说明 -->
         <div :style="{ left: 0, top: 26 }" class="text">
           {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
@@ -32,35 +32,59 @@
 </template>
 
 <script setup>
-import { shallowRef, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import NoBackgroundBar from "./NoBackgroundBar.vue";
 import ClipBar from "./ClipBar.vue";
 import NinePatchBar from "./NinePatchBar.vue";
 import SizeDivBar from "./SizeDivBar.vue";
 
-// //进度百分比
-// let myProgress = shallowRef(20);
-// //按键事件 控制进度条的width
-const procKeyDown = (ev) => {
-  //   switch (ev.keyCode) {
-  //     case 37:
-  //       myProgress.value -= 5;
-  //       if (myProgress.value <= 0) {
-  //         myProgress.value = 0;
-  //       }
-  //       break;
-  //     case 39:
-  //       myProgress.value += 5;
-  //       if (myProgress.value >= 100) {
-  //         myProgress.value = 100;
-  //       }
-  //       break;
-  //     case 13:
-  //       myProgress.value = 0;
-  //       break;
-  //     default:
-  //       break;
-  //   }
+const sizeDivBarRef = ref(null);
+const clipBarRef = ref(null);
+const ninePatchBarRef = ref(null);
+
+/**
+ * slideToPercentByKey / beginKeyOperation / endKeyOperation 用法说明
+ * （与 LongTextScroll 中 underKeyOperation 的语义一致）
+ *
+ * ┌─ onKeyDown（每次物理键按下，含长按连发）────────────────────────────┐
+ * │  1. barRef.beginKeyOperation()     // 进入按键驱动，屏蔽滞后 Sensor   │
+ * │  2. percent = clamp(bar.getCurrentPercent() ± step)                     │
+ * │  3. barRef.slideToPercentByKey(percent) // 勿直接 updatePercent        │
+ * │  已到边界、本次不移动时也应 begin（与 LongTextScroll 一致）            │
+ * └───────────────────────────────────────────────────────────────────────┘
+ *
+ * ┌─ onKeyUp（物理键抬起，一次按住只对应一次）──────────────────────────┐
+ * │  barRef.endKeyOperation()          // 结束按键驱动，恢复 Sensor 同步  │
+ * │  勿在 onKeyDown 末尾调用 end；勿在每次 slide 后调用 end               │
+ * └───────────────────────────────────────────────────────────────────────┘
+ *
+ * 不需要 begin/end：触控拖拽、组件内 initPercent / onMounted 初始化。
+ *
+ * 取消下方注释即可启用左右键演示（需同时给 ref 的 bar 调用）：
+ */
+const onAction = {
+  // 再次只以控制SizeDivBar为例, 其他bar的按键驱动用法同理
+  onKeyDown: (ev) => {
+    const bar = sizeDivBarRef.value;
+    const step = 0.05;
+    switch (ev.keyCode) {
+      case 37: // Left
+        bar?.beginKeyOperation();
+        bar?.slideToPercentByKey(
+          Math.max(0, (bar.getCurrentPercent?.() ?? 0) - step)
+        );
+        break;
+      case 39: // Right
+        bar?.beginKeyOperation();
+        bar?.slideToPercentByKey(
+          Math.min(1, (bar.getCurrentPercent?.() ?? 0) + step)
+        );
+        break;
+    }
+  },
+  onKeyUp: () => {
+    sizeDivBarRef.value?.endKeyOperation();
+  },
 };
 
 onMounted(() => {});

package/ScrollBoxTest/ClipBar.vue

@@ -125,10 +125,44 @@ let fncOnClick = () => {
 let rJsvScrollBox = shallowRef(null);
 let rPressDetectDiv = shallowRef(null);
 let rPercentDisp = shallowRef(0);
+let currentPercent = 0;
+let underKeyOperation = false; // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+
+function recordPercent(percent) {
+  currentPercent = Math.floor(percent * 100) / 100;
+}
+
+/** @returns {number} 当前进度 0~1 */
+function getCurrentPercent() {
+  return currentPercent;
+}
+
+/**
+ * 按键驱动进度：调用 updatePercent 并同步内部 currentPercent / 显示文案。
+ * @param {number} percent 0~1
+ * 须在 beginKeyOperation 与 endKeyOperation 之间由父组件 onKeyDown 调用；初始化请用 initPercent。
+ */
+function slideToPercentByKey(percent) {
+  const clamped = Math.max(0, Math.min(1, percent));
+  rJsvScrollBox.value.updatePercent(clamped);
+  recordPercent(clamped);
+  rPercentDisp.value = currentPercent;
+}
+
+function initPercent(percent) {
+  slideToPercentByKey(percent);
+}
 
 onMounted(() => {
   rJsvScrollBox.value.setSensor((percent, x, y) => {
-    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    if (!underKeyOperation) {
+      // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+      // 以规避, 当按键操作的设置动作频率快于渲染端响应调整值并通过Sensor反馈的频率时
+      // 例如当两次由按键发起的更新位置处理都执行后, 第一次的位置调整才被Sensor反馈, 导致第三次动作的位置基础会被回设为第一次的位置的问题
+      // 从而会引发进度条来回抖动
+      recordPercent(percent);
+      rPercentDisp.value = currentPercent;
+    }
     console.log(
       `onProgress dragged percent=${percent} \
 x=${Math.floor(x)} \
@@ -137,7 +171,7 @@ y=${Math.floor(y)}`
   }, 15);
 
   // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
-  rJsvScrollBox.value.updatePercent(0.7);
+  initPercent(0.7);
 
   // 注册按下抬起的监听
   rPressDetectDiv.value.jsvSetTapListener({
@@ -149,6 +183,34 @@ y=${Math.floor(y)}`
     },
   });
 });
+
+/**
+ * 父组件通过 ref 调用（见 ScrollBoxTest/App.vue 示例）。
+ *
+ * beginKeyOperation — 何时调用：
+ *   onKeyDown 里，只要本次按键会驱动进度（左/右等），在调用 slideToPercentByKey 之前或之后调用一次。
+ *   标记进入「按键驱动」阶段，屏蔽滞后的 Sensor 回写，避免连按/快按时进度条抖动。
+ *   已到边界、本次 slide 不会改变进度时也应调用
+ *
+ * endKeyOperation — 何时调用：
+ *   onKeyUp 里、物理键抬起时调用一次，与 begin 成对，表示本次按键会话结束。
+ *   不要在每次 onKeyDown 末尾调用；长按连发时多次 onKeyDown 只对应一次 onKeyUp，只 end 一次。
+ *   结束后恢复 Sensor 同步，拖拽/惯性滑动可再次更新 currentPercent。
+ *
+ * 勿对触控拖拽调用 begin/end；组件内 initPercent、onMounted 初始化也不需要。
+ *
+ * getCurrentPercent — 返回当前进度 0~1（按键、拖拽、初始化后均由 recordPercent 维护）。
+ */
+defineExpose({
+  getCurrentPercent,
+  slideToPercentByKey,
+  beginKeyOperation: () => {
+    underKeyOperation = true;
+  },
+  endKeyOperation: () => {
+    underKeyOperation = false;
+  },
+});
 </script>
 
 <style scoped></style>

package/ScrollBoxTest/NinePatchBar.vue

@@ -145,10 +145,44 @@ let rJsvScrollBox = shallowRef(null);
 let rPressDetectDiv = shallowRef(null);
 let rPercentDisp = shallowRef(0);
 let rJsvScrollFlowA = shallowRef(null);
+let currentPercent = 0;
+let underKeyOperation = false; // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+
+function recordPercent(percent) {
+  currentPercent = Math.floor(percent * 100) / 100;
+}
+
+/** @returns {number} 当前进度 0~1 */
+function getCurrentPercent() {
+  return currentPercent;
+}
+
+/**
+ * 按键驱动进度：调用 updatePercent 并同步内部 currentPercent / 显示文案。
+ * @param {number} percent 0~1
+ * 须在 beginKeyOperation 与 endKeyOperation 之间由父组件 onKeyDown 调用；初始化请用 initPercent。
+ */
+function slideToPercentByKey(percent) {
+  const clamped = Math.max(0, Math.min(1, percent));
+  rJsvScrollBox.value.updatePercent(clamped);
+  recordPercent(clamped);
+  rPercentDisp.value = currentPercent;
+}
+
+function initPercent(percent) {
+  slideToPercentByKey(percent);
+}
 
 onMounted(() => {
   rJsvScrollBox.value.setSensor((percent, x, y) => {
-    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    if (!underKeyOperation) {
+      // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+      // 以规避, 当按键操作的设置动作频率快于渲染端响应调整值并通过Sensor反馈的频率时
+      // 例如当两次由按键发起的更新位置处理都执行后, 第一次的位置调整才被Sensor反馈, 导致第三次动作的位置基础会被回设为第一次的位置的问题
+      // 从而会引发进度条来回抖动
+      recordPercent(percent);
+      rPercentDisp.value = currentPercent;
+    }
     console.log(
       `onProgress dragged percent=${percent} \
 x=${Math.floor(x)} \
@@ -157,7 +191,7 @@ y=${Math.floor(y)}`
   }, 15);
 
   // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
-  rJsvScrollBox.value.updatePercent(0.5);
+  initPercent(0.5);
 
   // 注册按下抬起的监听
   rPressDetectDiv.value.jsvSetTapListener({
@@ -178,6 +212,34 @@ y=${Math.floor(y)}`
   }, 15);
 });
 
+/**
+ * 父组件通过 ref 调用（见 ScrollBoxTest/App.vue 示例）。
+ *
+ * beginKeyOperation — 何时调用：
+ *   onKeyDown 里，只要本次按键会驱动进度（左/右等），在调用 slideToPercentByKey 之前或之后调用一次。
+ *   标记进入「按键驱动」阶段，屏蔽滞后的 Sensor 回写，避免连按/快按时进度条抖动。
+ *   已到边界、本次 slide 不会改变进度时也应调用
+ *
+ * endKeyOperation — 何时调用：
+ *   onKeyUp 里、物理键抬起时调用一次，与 begin 成对，表示本次按键会话结束。
+ *   不要在每次 onKeyDown 末尾调用；长按连发时多次 onKeyDown 只对应一次 onKeyUp，只 end 一次。
+ *   结束后恢复 Sensor 同步，拖拽/惯性滑动可再次更新 currentPercent。
+ *
+ * 勿对触控拖拽调用 begin/end；组件内 initPercent、onMounted 初始化也不需要。
+ *
+ * getCurrentPercent — 返回当前进度 0~1（按键、拖拽、初始化后均由 recordPercent 维护）。
+ */
+defineExpose({
+  getCurrentPercent,
+  slideToPercentByKey,
+  beginKeyOperation: () => {
+    underKeyOperation = true;
+  },
+  endKeyOperation: () => {
+    underKeyOperation = false;
+  },
+});
+
 onUnmounted(() => {
   // 销毁记录在全局的texture
   cLeftBarTexture?.doRecycle();

package/ScrollBoxTest/SizeDivBar.vue

@@ -110,10 +110,44 @@ let fncOnClick = () => {
 let rJsvScrollBox = shallowRef(null);
 let rPressDetectDiv = shallowRef(null);
 let rPercentDisp = shallowRef(0);
+let currentPercent = 0;
+let underKeyOperation = false; // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+
+function recordPercent(percent) {
+  currentPercent = Math.floor(percent * 100) / 100;
+}
+
+/** @returns {number} 当前进度 0~1 */
+function getCurrentPercent() {
+  return currentPercent;
+}
+
+/**
+ * 按键驱动进度：调用 updatePercent 并同步内部 currentPercent / 显示文案。
+ * @param {number} percent 0~1
+ * 须在 beginKeyOperation 与 endKeyOperation 之间由父组件 onKeyDown 调用；初始化请用 initPercent。
+ */
+function slideToPercentByKey(percent) {
+  const clamped = Math.max(0, Math.min(1, percent));
+  rJsvScrollBox.value.updatePercent(clamped);
+  recordPercent(clamped);
+  rPercentDisp.value = currentPercent;
+}
+
+function initPercent(percent) {
+  slideToPercentByKey(percent);
+}
 
 onMounted(() => {
   rJsvScrollBox.value.setSensor((percent, x, y) => {
-    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    if (!underKeyOperation) {
+      // 按键操作时, 忽略掉从Sensor反馈回来的位置同步信息
+      // 以规避, 当按键操作的设置动作频率快于渲染端响应调整值并通过Sensor反馈的频率时
+      // 例如当两次由按键发起的更新位置处理都执行后, 第一次的位置调整才被Sensor反馈, 导致第三次动作的位置基础会被回设为第一次的位置的问题
+      // 从而会引发进度条来回抖动
+      recordPercent(percent);
+      rPercentDisp.value = currentPercent;
+    }
     console.log(
       `onProgress dragged percent=${percent} \
 x=${Math.floor(x)} \
@@ -122,7 +156,7 @@ y=${Math.floor(y)}`
   }, 15);
 
   // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
-  rJsvScrollBox.value.updatePercent(0.2);
+  initPercent(0.2);
 
   // 注册按下抬起的监听
   rPressDetectDiv.value.jsvSetTapListener({
@@ -134,6 +168,34 @@ y=${Math.floor(y)}`
     },
   });
 });
+
+/**
+ * 父组件通过 ref 调用（见 ScrollBoxTest/App.vue 示例）。
+ *
+ * beginKeyOperation — 何时调用：
+ *   onKeyDown 里，只要本次按键会驱动进度（左/右等），在调用 slideToPercentByKey 之前或之后调用一次。
+ *   标记进入「按键驱动」阶段，屏蔽滞后的 Sensor 回写，避免连按/快按时进度条抖动。
+ *   已到边界、本次 slide 不会改变进度时也应调用
+ *
+ * endKeyOperation — 何时调用：
+ *   onKeyUp 里、物理键抬起时调用一次，与 begin 成对，表示本次按键会话结束。
+ *   不要在每次 onKeyDown 末尾调用；长按连发时多次 onKeyDown 只对应一次 onKeyUp，只 end 一次。
+ *   结束后恢复 Sensor 同步，拖拽/惯性滑动可再次更新 currentPercent。
+ *
+ * 勿对触控拖拽调用 begin/end；组件内 initPercent、onMounted 初始化也不需要。
+ *
+ * getCurrentPercent — 返回当前进度 0~1（按键、拖拽、初始化后均由 recordPercent 维护）。
+ */
+defineExpose({
+  getCurrentPercent,
+  slideToPercentByKey,
+  beginKeyOperation: () => {
+    underKeyOperation = true;
+  },
+  endKeyOperation: () => {
+    underKeyOperation = false;
+  },
+});
 </script>
 
 <style scoped></style>

package/SecTorTest/App.vue

@@ -4,13 +4,14 @@
       <JsvPieChart
         :centerPosition="center"
         :radius="360"
+        :subRadius="300"
         :data="data"
-        :animationTime="0.5"
+        :animationTime="0.8"
       ></JsvPieChart>
       <!-- 文字说明 -->
       <div class="text">
         {{
-          "图为圆心在(400,400)位置，半径为360的饼图。此样例限制最多六个扇形。"
+          "图为圆心在(400,400)位置，半径为360-300的环形图(300为0时则为扇形饼图)。此样例限制最多六个扇形。"
         }}
       </div>
       <!-- 操作说明 -->
@@ -34,22 +35,27 @@ const center = {
 let data = shallowRef([
   {
     percent: 23.33,
+    // color: "#0000FF7F",
     color: "#0000FF",
   },
   {
     percent: 24.67,
+    // color: "#FFFF007F",
     color: "#FFFF00",
   },
   {
     percent: 15,
+    // color: "#FF12FF7F",
     color: "#FF12FF",
   },
   {
     percent: 13,
+    // color: "#FF12137F",
     color: "#FF1213",
   },
   {
     percent: 24,
+    // color: "#6EFFE17F",
     color: "#6EFFE1",
   },
 ]);
@@ -209,7 +215,7 @@ let actionDefines = {
 }
 .text {
   width: 500;
-  height: 60;
+  height: 90;
   left: 700;
   top: 300;
   background-color: rgba(255, 255, 255, 0.5);