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

package/Swiper/App.vue

@@ -7,6 +7,7 @@
 <script setup>
 import { JsvSwiper, useFocusHub, EdgeDirection } from "jsview";
 import { onMounted } from "vue";
+import Item from "./Item.vue"
 
 const focusHub = useFocusHub();
 
@@ -16,13 +17,19 @@ function randomColor() {
     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
   );
 }
+const imgSrcList = [
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228543_img_20230610184253.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228544_img_20230610184145.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228545_img_20230610184110.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228542_img_20230610184253.png",
+];
 let data = [];
 for (let i = 0; i < 10; i++) {
   data.push({
     width: 400,
     height: 300,
     index: i,
-    backgroundColor: randomColor(),
+    src: imgSrcList[i % imgSrcList.length],
   });
 }
 
@@ -59,14 +66,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div :style="{width: 1280, height: 720, backgroundColor:'#F5F5DC'}"></div>
+  <div :style="{
+    width: 1280,
+    height: 100,
+    fontSize: 30,
+    textAlign: 'center',
+    lineHeight: 100,
+    color: '#000000'
+  }">
+    上下键切换获焦的轮播图, 左右键切换轮播图显示海报, 失焦轮播图自动轮播
+  </div>
+  <div :style="{left: (1280 - 400) / 2, top: 100}">
     <jsv-swiper
       name="mySwiper1"
       ref="mySwiper1"
       :totalFrame="data.length"
       :layoutInfo="{
-        left: 50,
-        top: 50,
         width: 400,
         height: 200,
       }"
@@ -80,17 +96,7 @@ onMounted(() => {
       :onEdge="swiper1.onEdge"
     >
       <template #itemView="{ dataIndex, focused }">
-        <div
-          :style="{
-            width: data[dataIndex].width,
-            height: data[dataIndex].height,
-            backgroundColor: data[dataIndex].backgroundColor,
-            fontSize: 40,
-            color: focused ? '#FF0000' : '#FFFFFF',
-          }"
-        >
-          {{ data[dataIndex].index }}
-        </div>
+        <item :data="data[dataIndex]" :focused="focused"/>
       </template>
     </jsv-swiper>
 
@@ -99,7 +105,6 @@ onMounted(() => {
       ref="mySwiper2"
       :totalFrame="data.length"
       :layoutInfo="{
-        left: 50,
         top: 300,
         width: 400,
         height: 200,
@@ -118,30 +123,24 @@ onMounted(() => {
       :smoothTranslate="true"
     >
       <template #itemView="{ dataIndex, focused }">
-        <div
-          :style="{
-            width: data[dataIndex].width,
-            height: data[dataIndex].height,
-            backgroundColor: data[dataIndex].backgroundColor,
-            fontSize: 40,
-            color: focused ? '#FF0000' : '#FFFFFF',
-          }"
-        >
-          {{ data[dataIndex].index }}
-        </div>
+        <item :data="data[dataIndex]" :focused="focused"/>
       </template>
       <template #indicatorDot="{ dataIndex, currentIndex }">
         <div
           :style="{
             width: 20,
             height: 20,
+            color: '#ffffff',
+            lineHeight: 20,
+            textAlign: 'center',
             backgroundColor:
               dataIndex == currentIndex
                 ? 'rgba(100, 100, 100, 0.7)'
                 : '#ff0000',
-            borderRadius: 10,
           }"
-        ></div>
+        >
+        {{ dataIndex }}
+      </div>
       </template>
     </jsv-swiper>
   </div>

package/Swiper/Item.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundImage: data.src,
+      fontSize: 40,
+      color: focused ? '#FF0000' : '#FFFFFF',
+    }"
+  >
+    {{ "海报" + data.index }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  data: Object,
+  focused: Boolean,
+});
+</script>

package/SwiperTest/App.vue

@@ -44,39 +44,39 @@ const layoutInfo = {
 const items = reactive([
   {
     image:
-      "https://pic.meetao.com/images/admin/2531edf0b7e34c299892ceace72b2c81.jpg",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/2531edf0b7e34c299892ceace72b2c81.jpg",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp",
   },
   {
     image:
-      "https://pic.meetao.com/images/admin/bc28dfc4a9ae470e86eed8f743a3d97a.png",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/bc28dfc4a9ae470e86eed8f743a3d97a.png",
   },
   {
     image:
-      "https://pic.meetao.com/images/admin/1070701b82e8416d940c558f5fb61ad2.jpg",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/1070701b82e8416d940c558f5fb61ad2.jpg",
   },
   {
     image:
-      "https://pic.meetao.com/images/admin/5a454819dabd469991c62c72e348c49b.jpg",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/5a454819dabd469991c62c72e348c49b.jpg",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpxACASppDAACKmP9qkQ020.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpxACASppDAACKmP9qkQ020.webp",
   },
 ]);
 

package/TestNativeSharedView/AckEventDefine.ts

@@ -0,0 +1,82 @@
+export class AckEventDefine {
+    // Category
+    static CATEGORY_JSC: number = 1;
+    static CATEGORY_VIEW: number = 2;
+    static CATEGORY_EXCEPTION: number = 3;
+
+    // Type of jsc
+    // Content lifeCycle: event格式:
+    // {
+    //      "act": string类型，当前动作，
+    //      		JsContext重载启动时(reload动作，或者loadUrl动作, 以及closeView时): "reset"
+    //				js启动过程事件: 按顺序
+    //					"systemJsLoaded": 系统js加载完成
+    //					"engineJsRead": Engine Js 完成下载
+    //					"engineJsLoaded": Engine Js 完成eval
+    //					"mainJsRead": Main Js 完成下载
+    //					"mainJsLoaded": Main Js 完成 eval
+    //					"appJsStart": 开始运行框架的主入口处理
+    //      "contextId": int类型，发生事件对应的context id，当url切换或者reload时，contentId会发生变化
+    // }
+    static TYPE_JS_CONTEXT_LIFECYCLE: number = 1;
+
+    // Content permission: event格式:
+    // {
+    //      "contextId": int类型，发生事件对应的context id，当url切换或者reload时，contentId会发生变化
+    //      "authDone": int类型  是否完成校验, 0: 还未进行校验,  1: 已完成校验
+    // ================== 授权做完后的信息 ====================
+    // success(bool): 当次授权校验是否通过
+    // showAlert(bool): APP界面右下角展示未授权提示，满足下面条件之一时会展示
+    //                  1. app运行的main.js是未进行签名(签名参考src/appConfig/中的描述)的，提示"npm start 调试模式"
+    //                  2. 仅在在线授权服务器无法达到, 并且达到允许次数时生效(每日累计1次, 最多累计30天), 提示"抢先版内核"
+    //                  3. 远程授权api返回结果为未授权时
+    //                  4. 本地有授权文件，但授权文件不合法或者过期
+    // errorCount(int): 在线授权api访问失败(网络不通)的累计次数, api访问到并拿到结果后清0
+    // checkType(int): 授权的校验方式, 1: 调试模式, 2: 本地文件校验的方式, 3: 在线校验方式
+    // customDescribe: 授权的描述, 许可范围等描述
+    // errorCode: 授权失败的错误码
+    //     -1: apk签名不匹配(仅离线校验时)
+    //     -2: js的app name未登记
+    //     -3: js的app签名和app name登记信息不匹配
+    //     -4: permission.js文件过期
+    //     -5: core版本不匹配
+    //     -6: 分支名不匹配
+    //     -7: 在线鉴权时未通过的统一错误码(后台详细错误码搭建中...)
+    //     -8: 页面为npm start的调试模式(开发人员调试时才会出现此状态)
+    //     -101: 本地permission.js文件格式错误
+    //     -102: permission.js文件授权信息中core版本无法正确解析为数字错误
+    //     -103: permission.js文件授权信息中的日期格式错误
+    //     -105: 在线鉴权api请求失败错误
+    // playerMaxVer(int): 播放器授权的最高版本(0000 00000) 前4位为渠道号，后5位为版本号
+    // }
+    static TYPE_JS_CONTEXT_PERMISSION: number = 2;
+
+    // Type of view
+    // Shared view layout: event格式:
+    // {
+    //      "x": int类型，对应view更新到了x位置,
+    //      "y": int类型，对应view更新到了y位置,
+    //      "width": int类型，对应view宽度更新后的值,
+    //      "height": int类型，对应view高度更新后的值,
+    //      "mat4": native指针类型, view的位置信息的matrix,
+    //      "visible": int类型, view是否可见,(0:不可见, 1:可见)
+    //      "order": int类型, 本NativeSharedView的相对图层
+    //      "dw": int类型，Design map width，用于换算x,y,width,height
+    // }
+    static TYPE_SHARED_VIEW_LAYOUT: number = 1;
+
+    // app view aspect ratio change: event格式:
+    // {
+    //      "width": int类型，横轴比例，对应"16/9"中的16,
+    //      "height": int类型，纵轴比例，对应"16/9"中的9,
+    // }
+    static TYPE_APP_ASPECT_RATIO_CHANGE: number = 2;
+
+    // Type of exception
+    // Unhandled exit action: event格式:
+    // {
+    //      "reason": string类型，触发离开动作的触发器，例如: "backKey",
+    //      "comment": string类型, 当BackKey场景, 为"keyDown"和"keyUp"
+    // }
+    static TYPE_EXCEPTION_UNHANDLED_EXIT_ACTION: number = 1;
+}

package/TestNativeSharedView/App.vue

@@ -1,11 +1,9 @@
 <script setup>
+import { JsvNativeSharedDiv, JsvFocusBlock, jJsvRuntimeBridge } from "jsview";
 import {
-  JsvNativeSharedDiv,
-  JsvFocusBlock,
-  jJsvRuntimeBridge,
   enableNativeViewListener,
   disableNativeViewListener,
-} from "jsview";
+} from "./JsvDemoTester";
 import { onBeforeUnmount, onMounted, reactive, watch, shallowRef } from "vue";
 
 let state = reactive({
@@ -26,8 +24,8 @@ let _Index = 0;
 //给两个div给定不同的响应式变量
 let view1 = shallowRef("null");
 let view2 = shallowRef("null");
-let view1Dsp = shallowRef("null");
-let view2Dsp = shallowRef("null");
+let view1Dsp = shallowRef({ x: 0, y: 0, width: 0, height: 0 });
+let view2Dsp = shallowRef({ x: 0, y: 0, width: 0, height: 0 });
 let isShow = shallowRef(false);
 let isStop = shallowRef(false);
 //创造出需要的四个属性的对象

package/TestNativeSharedView/JsvDemoTester.js

@@ -0,0 +1,131 @@
+import "./AckEventDefine"
+import { AckEventDefine } from "./AckEventDefine";
+
+let interfaceLoaded = false;
+let idGeneratoer = 1;
+let idObjectMap = {};
+
+let TesterApis = {
+    "android": {
+        prepareApi: (resolve, reject) => {
+            let cb = () => {
+                // dynamic加载完成
+                if (window.jJsvDemoTester) {
+                    console.log("window.jJsvDemoTester ready")
+                } else {
+                    console.log("window.jJsvDemoTester failed")
+                }
+
+                console.log("remove cb=" + cb);
+
+                // 移除回调
+                window.JsView.removeEventListener(cb);
+
+                // 无论成功失败，暂且都论为加载完成
+                interfaceLoaded = true;
+                resolve();
+            };
+            window.JsView.addEventListener("__DemoTesterReady", cb);
+            window.JsView.ensureTesterUtils();
+        },
+        eventParser: (ret, reactive_ref) => {
+            // 返回是 .info 为android的bundle格式
+            let new_value = ret.info
+                .replace(/(\w+)\=/g, '"$1":')
+                .replace(/'/g, '"')
+                .replace(/^Bundle\[/, "")
+                .replace(/\]$/, "");
+            reactive_ref.value = new_value;
+        },
+        listenerToAckEvent: (nativeViewId, listenerId, callback) => {
+            // android
+            let eventName = "__enableNativeViewListener_" + listenerId;
+            window.JsView?.addEventListener(eventName, callback);
+            window.jJsvDemoTester?.enableNativeViewListener(nativeViewId, listenerId, eventName);
+        },
+        expireListener: (listenerId, callback) => {
+            window.JsView?.removeEventListener(callback);
+            window.jJsvDemoTester?.disableNativeViewListener(listenerId);
+        }
+    },
+    "pc-wasm": {
+        prepareApi: (resolve, reject) => {
+            // pc-wasm场景
+            interfaceLoaded = true;
+            resolve(); // 非JsView场景,默认为完成状态
+        },
+        eventParser: (ret, reactive_ref) => {
+            // ret为普通的json格式
+            reactive_ref.value = ret;
+        },
+        listenerToAckEvent: (nativeViewId, listenerId, callback) => {
+            // pc wasm
+            window.JsvCoreApi.WasmExt.listenerToAckEvent(
+                AckEventDefine.CATEGORY_VIEW,
+                AckEventDefine.TYPE_SHARED_VIEW_LAYOUT,
+                nativeViewId,
+                callback
+            );
+        },
+        expireListener: (listenerId, callback) => {
+            window.JsvCoreApi.WasmExt.recycleAckListener(callback);
+        }
+    }
+}
+
+
+const ensureInterface = () => {
+    return new Promise((resolve, reject) => {
+        if (interfaceLoaded) {
+            // 已经加载完成
+            resolve();
+            return;
+        }
+        TesterApis[window.JsvCoreApi.Platform].prepareApi(resolve, reject);
+    });
+}
+
+const enableNativeViewListener = (nativeViewId, reactive_ref) => {
+    let listenerId = idGeneratoer;
+    idGeneratoer++;
+    idObjectMap[listenerId] = {
+        eventCallback: (event_info) => {
+            TesterApis[window.JsvCoreApi.Platform].eventParser(event_info, reactive_ref);
+            console.log(`JsvDemoTester nativeView viewid=${nativeViewId} info=${reactive_ref.value}`);
+        }
+    };
+
+    (async () => {
+        await ensureInterface();
+
+        if (idObjectMap.hasOwnProperty(listenerId)) {
+            TesterApis[window.JsvCoreApi.Platform]
+                .listenerToAckEvent(
+                    nativeViewId,
+                    listenerId,
+                    idObjectMap[listenerId].eventCallback);
+        }
+    })();
+
+    return listenerId; // 用于 disableNativeViewListener() 调用
+}
+
+const disableNativeViewListener = (listenerId) => {
+    (async () => {
+        await ensureInterface();
+
+        if (idObjectMap.hasOwnProperty(listenerId)) {
+            TesterApis[window.JsvCoreApi.Platform].expireListener(
+                listenerId, idObjectMap[listenerId].eventCallback
+            );
+            delete idObjectMap[listenerId];
+        } else {
+            console.warn("disableNativeViewListener id gone");
+        }
+    })();
+}
+
+export {
+    enableNativeViewListener,
+    disableNativeViewListener,
+}

package/TextureAnimation/App.vue

@@ -1,8 +1,13 @@
 <script setup>
-import { jJsvRuntimeBridge, getKeyFramesGroup, JsvTextureAnim } from "jsview";
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+  DefaultKeyCodeMap,
+} from "jsview";
 import img from "./assets/borderOpacity.png";
 import swipLight from "./assets/swipLight.png";
-import { onMounted, onBeforeUnmount } from "vue";
+import { onMounted, onBeforeUnmount, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const styleShell = getKeyFramesGroup();
@@ -13,6 +18,9 @@ const borderRadius = 40;
 const repeat = -1;
 const duration = 3000;
 
+let sTranslateTextureRef = shallowRef(null);
+let sTranslateTextureTrigger = shallowRef(1);
+
 const translateAnim =
   "{from {transform: translate3d(-100%, -50%, 0);} to {transform: translate3d(100%, 50%, 0);}}";
 const rotateAnim =
@@ -30,6 +38,9 @@ const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == DefaultKeyCodeMap.Ok) {
+    sTranslateTextureRef.value.start();
+    sTranslateTextureTrigger.value = sTranslateTextureTrigger.value + 1;
   }
   return true;
 };
@@ -68,6 +79,7 @@ onBeforeUnmount(() => {
         }"
       />
       <jsv-texture-anim
+        ref="sTranslateTextureRef"
         :src="img"
         :width="300"
         :height="150"
@@ -75,18 +87,16 @@ onBeforeUnmount(() => {
         :duration="duration"
         :transform="null"
         :borderRadius="borderRadius"
-        :repeat="repeat"
         :autoStart="true"
       ></jsv-texture-anim>
       <div
+        :key="sTranslateTextureTrigger"
         :style="{
           width: 300,
           height: 150,
           backgroundColor: 'rgba(255,0,0,0.5)',
           transform: null,
-          animation: `texture-anim-translate ${
-            duration / 1000
-          }s linear infinite`,
+          animation: `texture-anim-translate ${duration / 1000}s linear 1`,
         }"
       />
     </div>

package/TextureAnimation/App3.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref, shallowRef, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import img from "./assets/blackWhiteTurntable.png";
+import img2 from "./assets/light.png";
+import { getDataUrl } from "../CommonUtils/ResourceData";
+import RotateFrame from "./utils/RotateFrame.vue";
+//无网络环境下使用
+const DemoResourceBase = getDataUrl();
+
+const getRandom = (start, end) => {
+  return Math.round(Math.random() * (end - start) + start);
+};
+
+const router = useRouter();
+const width = ref(300);
+const height = ref(200);
+const left = ref(50);
+const top = ref(80);
+
+const targetBorderRadius = 35;
+const targetLineWidth = 2;
+const texCoord = {
+  width: 400,
+  height: 400,
+};
+
+/**
+ * 其他回调处理
+ */
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 13) {
+    left.value = getRandom(50, 400);
+    top.value = getRandom(80, 200);
+    width.value = getRandom(100, 300);
+    height.value = getRandom(100, 300);
+  }
+  return true;
+};
+
+onBeforeUnmount(() => {});
+</script>
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: 'rgba(0,0,0,0.7)',
+    }"
+  >
+    <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)',
+      }"
+    >
+      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
+    </div>
+    <div>
+      <div
+        :style="{
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+          backgroundColor: 'rgba(0, 255, 0, 0.7)',
+          borderRadius: targetBorderRadius,
+          fontSize: 30,
+          lineHeight: height,
+          textAlign: 'center',
+        }"
+      >
+        {{ "带光晕的焦点框" }}
+      </div>
+      <rotate-frame
+        :imageUrl="img"
+        :left="left"
+        :top="top"
+        :width="width"
+        :height="height"
+        :maxViewSize="texCoord"
+        :borderRadius="targetBorderRadius"
+        :lineWidth="targetLineWidth"
+        :withHalo="true"
+      />
+    </div>
+  </jsv-focus-block>
+</template>

package/TextureAnimation/utils/FrameCanvasStore.ts

@@ -0,0 +1,68 @@
+import {
+    JsvTextureStoreApi,
+} from "jsview";
+
+declare interface CacheInfoType {
+    borderRadius: number;
+    lineWidth: number;
+    canvasSourceId: String;
+    borderOutset: number;
+    canvasWidth: number;
+}
+
+let sCurrentCacheList: Array<CacheInfoType> = [];
+
+function checkCache(border_radius: number, line_width: number): CacheInfoType | null {
+    for (let cache_item of sCurrentCacheList) {
+        if (cache_item.borderRadius == border_radius && cache_item.lineWidth == line_width) {
+            return cache_item;
+        }
+    }
+    return null;
+}
+
+function BuildFrame(border_radius: number, line_width: number): CacheInfoType {
+    let frame_cache: CacheInfoType | null;
+
+    frame_cache = checkCache(border_radius, line_width);
+    if (frame_cache != null) {
+        return frame_cache;
+    }
+
+    let sampleImageWidth = (border_radius + line_width + 3) * 2;
+    let canvasRef = JsvTextureStoreApi.canvasTexture(
+        sampleImageWidth,
+        sampleImageWidth
+    ); // 创建画布
+
+    let circleInnerDiameter = border_radius * 2; // 环形内直径, 为所要包括图形的borderRadius的一倍
+    let circleLineWidth = line_width; // 线宽
+    let circleRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 绘制线是圆圈的轨迹中线
+    let customPath = canvasRef.circlePath(
+        Math.floor(sampleImageWidth / 2),
+        Math.floor(sampleImageWidth / 2),
+        circleRadius
+    ); // 创建圆环绘制路径，圆形在画布的中心点位置
+    canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
+    customPath!.stroke(circleLineWidth, "#000000FF"); // 以给定线宽绘制圆环
+    let source_id = canvasRef.commit(); // texture和div的textureStore绑定
+
+    frame_cache = {
+        canvasWidth: sampleImageWidth,
+        borderRadius: border_radius,
+        lineWidth: line_width,
+        canvasSourceId: source_id,
+        borderOutset: Math.floor((sampleImageWidth - circleInnerDiameter) / 2), // (画布 - 圆环内直径) / 2
+    };
+
+    // 永远保存，不删除，界面上理论上不会有太多种转框，所以只存不清理
+    sCurrentCacheList.push(frame_cache);
+
+    console.log("Rotate frame cache increase to " + sCurrentCacheList.length);
+
+    return frame_cache;
+}
+
+export {
+    BuildFrame,
+}