@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/ScrollBoxTest/App.vue

@@ -11,57 +11,17 @@
         class="logo-bg"
         :style="{
           left: 210,
-          top: 200,
+          top: 160,
         }"
       >
-        <!-- 三个背景色块 -->
+        <!-- 三个背景色块,用来确认进度条的透明度 -->
         <div class="bg1" />
         <div class="bg2" />
         <div class="bg3" />
         <!-- 进度条 -->
-        <div :style="{ top: 80, left: 0 }">
-          <JsvScrollBox
-            ref="rJsvScrollBox"
-            :style="{
-              width: 800,
-              height: 84,
-            }"
-            :direction="HORIZONTAL"
-            :sliderSize="{
-              width: 84,
-            }"
-          >
-            <template #FixedBox="{ boxWidth, boxHeight }">
-              <div
-                :style="{
-                  width: boxWidth,
-                  height: boxHeight,
-                  lineHeight: boxHeight,
-                  backgroundColor: 'rgba(255,255,255,0.3)',
-                  borderRadius: Math.floor(boxHeight / 2),
-                  fontSize: Math.floor(boxHeight * 0.5),
-                  textAlign: 'center',
-                  color: 'rgba(0,0,0,1)',
-                }"
-              >
-                {{ `进度:${rPercentDisp}` }}
-              </div>
-            </template>
-            <template #SliderBox="{ boxWidth, boxHeight }">
-              <div
-                :style="{
-                  top: -15,
-                  left: -15,
-                  width: boxWidth + 30,
-                  height: boxHeight + 30,
-                  backgroundColor: 'rgba(255, 0,0,0.8)',
-                  borderRadius: Math.floor((boxHeight + 30) / 2),
-                }"
-                @click="fncOnClick"
-              />
-            </template>
-          </JsvScrollBox>
-        </div>
+        <SizeDivBar :top="80" :left="0" />
+        <ClipBar :top="210" :left="0" />
+        <NinePatchBar :top="340" :left="0" />
         <!-- 图1说明 -->
         <div :style="{ left: 0, top: 26 }" class="text">
           {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
@@ -73,48 +33,37 @@
 
 <script setup>
 import { shallowRef, onMounted } from "vue";
-import { JsvScrollBox, HORIZONTAL } from "jsview";
+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
+// //进度百分比
+// 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;
-  }
+  //   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;
+  //   }
 };
 
-let fncOnClick = () => {};
-
-let rJsvScrollBox = shallowRef(null);
-let rPercentDisp = shallowRef(0);
-
-onMounted(() => {
-  rJsvScrollBox.value.setSensor((percent, x, y) => {
-    rPercentDisp.value = Math.floor(percent * 100) / 100;
-    console.log(
-      `onProgress dragged percent=${percent} \
-x=${Math.floor(x)} \
-y=${Math.floor(y)}`
-    );
-  }, 15);
-});
+onMounted(() => {});
 </script>
 
 <style scoped>
@@ -139,21 +88,21 @@ y=${Math.floor(y)}`
 .bg1 {
   left: 0;
   top: 0;
-  height: 400;
+  height: 500;
   width: 267;
   background-color: #007f00;
 }
 .bg2 {
   left: 267;
   top: 0;
-  height: 400;
+  height: 500;
   width: 267;
   background-color: #3049b8;
 }
 .bg3 {
   left: 534;
   top: 0;
-  height: 400;
+  height: 500;
   width: 266;
   background-color: #d12b8c;
 }

package/ScrollBoxTest/ClipBar.vue

@@ -0,0 +1,154 @@
+<template>
+  <!-- 进度条 -->
+  <div :style="{ top: rProps.top, left: rProps.left }">
+    <div ref="rPressDetectDiv" :style="{ width: 800, height: 84 }">
+      <JsvScrollBox
+        ref="rJsvScrollBox"
+        :linkName="cLinkName"
+        :style="{
+          width: 800,
+          height: 84,
+        }"
+        :direction="HORIZONTAL"
+        :sliderSize="{
+          width: 84,
+        }"
+      >
+        <!-- 用位置固定的区域来进行进度条展示(FixedBox) -->
+        <template #FixedBox="{ boxWidth, boxHeight }">
+          <!-- 正向进度的颜色(对圆角div进行剪切) -->
+          <JsvScrollFollow
+            :proxyType="ScrollBoxStyle.SizeClip"
+            :syncWith="cLinkName"
+            :varWidth="{ start: 0, end: boxWidth }"
+            :varHeight="boxHeight"
+          >
+            <div
+              :style="{
+                width: boxWidth,
+                height: boxHeight,
+                backgroundColor: 'rgba(128,128,0,0.7)',
+                borderRadius: Math.floor(boxHeight / 2),
+              }"
+            />
+          </JsvScrollFollow>
+
+          <!-- 反向进度的颜色(对圆角div进行剪切) -->
+          <JsvScrollFollow
+            :proxyType="ScrollBoxStyle.SizeClip"
+            :varMode="ScrollBoxStyle.Size"
+            :syncWith="cLinkName"
+            :varLeft="boxWidth /* 将left置于进度条最右边 */"
+            :varWidth="{ start: 0, end: -boxWidth }"
+            :varHeight="boxHeight"
+            :syncType="ScrollBoxStyle.SyncReverse"
+          >
+            <div
+              :style="{
+                left: -boxWidth,
+                width: boxWidth,
+                height: boxHeight,
+                backgroundColor: 'rgba(0,128,255,0.7)',
+                borderRadius: Math.floor(boxHeight / 2),
+              }"
+            />
+          </JsvScrollFollow>
+
+          <!-- 进度文字 -->
+          <div
+            :style="{
+              width: boxWidth,
+              height: boxHeight,
+              lineHeight: boxHeight,
+              fontSize: Math.floor(boxHeight * 0.5),
+              textAlign: 'center',
+              color: 'rgba(0,0,0,1)',
+            }"
+          >
+            {{
+              `左黄色:${rPercentDisp} 右蓝色:${
+                Math.floor((1 - rPercentDisp) * 100) / 100
+              }`
+            }}
+          </div>
+        </template>
+
+        <!-- 进度游标球(SliderBox) -->
+        <template #SliderBox="{ boxWidth, boxHeight }">
+          <div
+            :style="{
+              top: -15,
+              left: -15,
+              width: boxWidth + 30,
+              height: boxHeight + 30,
+              backgroundColor: 'rgba(255, 0,0,0.5)',
+              borderRadius: Math.floor((boxHeight + 30) / 2),
+            }"
+            @click="fncOnClick"
+          />
+        </template>
+      </JsvScrollBox>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import {
+  JsvScrollBox,
+  JsvScrollFollow,
+  ScrollBoxStyle,
+  HORIZONTAL,
+} from "jsview";
+import { numberCheckSet } from "../../jsview-vue/utils";
+
+let rProps = defineProps({
+  top: {
+    Type: Number,
+    default: 0,
+  },
+  left: {
+    Type: Number,
+    default: 0,
+  },
+});
+
+const cLinkName = "ScrollBoxTest_ClipSlider";
+
+//进度百分比
+let myProgress = shallowRef(20);
+
+let fncOnClick = () => {
+  console.log("ClipBar slider OnClicked");
+};
+
+let rJsvScrollBox = shallowRef(null);
+let rPressDetectDiv = shallowRef(null);
+let rPercentDisp = shallowRef(0);
+
+onMounted(() => {
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+
+  // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
+  rJsvScrollBox.value.updatePercent(0.7);
+
+  // 注册按下抬起的监听
+  rPressDetectDiv.value.jsvSetTapListener({
+    onTouchStart: () => {console.log(" touch start")},
+    onTouchEnd: () => {
+      rPercentDisp.value =
+        Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;
+      console.log("ClipBar release percent=" + rPercentDisp.value);
+    },
+  });
+});
+</script>
+
+<style scoped></style>

package/ScrollBoxTest/DrawCircle.ts

@@ -0,0 +1,25 @@
+import { JsvTextureStoreApi } from "@shijiu/jsview-vue";
+
+export function DrawCircle(
+    bitmapWidth: number,
+    bitmapHeight: number,
+    cornerX: number,
+    cornerY: number,
+    radius: number,
+    colorFormat: string): any {
+    const canvasRef = JsvTextureStoreApi.canvasTexture(
+        bitmapWidth,
+        bitmapHeight,
+        null
+    );
+    const customPath = canvasRef.circlePath(cornerX, cornerY, radius);
+    customPath?.fill(colorFormat);
+    const textureId = canvasRef.commit();
+
+    return {
+        id: textureId,
+        doRecycle: () => {
+            JsvTextureStoreApi.deleteTexture(textureId);
+        }
+    }
+}

package/ScrollBoxTest/NinePatchBar.vue

@@ -0,0 +1,188 @@
+<template>
+  <!-- 进度条 -->
+  <div id="NinePatchBar" :style="{ top: rProps.top, left: rProps.left }">
+    <div ref="rPressDetectDiv" :style="{ width: 800, height: 84 }">
+      <JsvScrollBox
+        ref="rJsvScrollBox"
+        :linkName="cLinkName"
+        :style="{
+          width: 800,
+          height: cBarHeight,
+        }"
+        :direction="HORIZONTAL"
+        :sliderSize="{
+          width: 84,
+        }"
+      >
+        <!-- 用位置固定的区域来进度条展示(FixedBox) -->
+        <template #FixedBox="{ boxWidth, boxHeight }">
+          <!-- 正向进度的颜色条(.9形变) -->
+          <JsvScrollFollow
+            ref="rJsvScrollFlowA"
+            :proxyType="ScrollBoxStyle.JsvNinePatch"
+            :proxyProps="{
+              imageUrl: `jsvtexturestore://${cLeftBarTexture.id}`,
+              imageWidth: cBitMap.width,
+              centerWidth: 1,
+              borderOutset: cCircleBorderGap,
+              waitForInit: false,
+            }"
+            :syncWith="cLinkName"
+            :varWidth="{ start: cMiniWidth, end: boxWidth }"
+            :varHeight="boxHeight"
+          />
+
+          <!-- 反向进度的颜色条(.9形变) -->
+          <JsvScrollFollow
+            :proxyType="ScrollBoxStyle.JsvNinePatch"
+            :syncWith="cLinkName"
+            :varLeft="boxWidth /* 将left置于进度条最右边 */"
+            :varWidth="{ start: -cMiniWidth, end: -boxWidth }"
+            :varHeight="boxHeight"
+            :syncType="ScrollBoxStyle.SyncReverse"
+            :proxyProps="{
+              imageUrl: `jsvtexturestore://${cRightBarTexture.id}`,
+              imageWidth: cBitMap.width,
+              centerWidth: 1,
+              borderOutset: cCircleBorderGap,
+              waitForInit: false,
+            }"
+          />
+
+          <!-- 进度文字 -->
+          <div
+            :style="{
+              width: boxWidth,
+              height: boxHeight,
+              lineHeight: boxHeight,
+              fontSize: Math.floor(boxHeight * 0.5),
+              textAlign: 'center',
+              color: 'rgba(0,0,0,1)',
+            }"
+          >
+            {{
+              `左黄色:${rPercentDisp} 右蓝色:${
+                Math.floor((1 - rPercentDisp) * 100) / 100
+              }`
+            }}
+          </div>
+        </template>
+
+        <!-- 进度游标球(SliderBox) -->
+        <template #SliderBox="{ boxWidth, boxHeight }">
+          <div
+            :style="{
+              top: -15,
+              left: -15,
+              width: boxWidth + 30,
+              height: boxHeight + 30,
+              backgroundColor: 'rgba(255, 0,0,0.5)',
+              borderRadius: Math.floor((boxHeight + 30) / 2),
+            }"
+            @click="fncOnClick"
+          />
+        </template>
+      </JsvScrollBox>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onMounted, onUnmounted } from "vue";
+import { DrawCircle } from "./DrawCircle";
+import {
+  JsvScrollBox,
+  JsvScrollFollow,
+  ScrollBoxStyle,
+  HORIZONTAL,
+} from "jsview";
+
+let rProps = defineProps({
+  top: {
+    Type: Number,
+    default: 0,
+  },
+  left: {
+    Type: Number,
+    default: 0,
+  },
+});
+
+const cLinkName = "ScrollBoxTest_NinePatchSlider";
+const cBarHeight = 84;
+const cMiniWidth = cBarHeight; // 进度条最小宽度和高度相同，形成一个.9的原点
+
+/***** 构建NinePatch的图元 *****/
+const cBitMap = {
+  width: cBarHeight,
+  height: cBarHeight,
+};
+const cCircleBorderGap = 2;
+const cRadius = Math.floor((cBarHeight - 2 * cCircleBorderGap) / 2);
+//相应Texture赋值
+const cLeftBarTexture = DrawCircle(
+  cBitMap.width,
+  cBitMap.height,
+  cRadius + cCircleBorderGap,
+  cRadius + cCircleBorderGap,
+  cRadius,
+  "rgba(128,128,0,0.7)"
+);
+const cRightBarTexture = DrawCircle(
+  cBitMap.width,
+  cBitMap.height,
+  cRadius + cCircleBorderGap,
+  cRadius + cCircleBorderGap,
+  cRadius,
+  "rgba(0,128,255,0.7)"
+);
+
+let fncOnClick = () => {
+  console.log("NinePatchBar slider OnClicked");
+};
+
+let rJsvScrollBox = shallowRef(null);
+let rPressDetectDiv = shallowRef(null);
+let rPercentDisp = shallowRef(0);
+let rJsvScrollFlowA = shallowRef(null);
+
+onMounted(() => {
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+
+  // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
+  rJsvScrollBox.value.updatePercent(0.5);
+
+  // 注册按下抬起的监听
+  rPressDetectDiv.value.jsvSetTapListener({
+    onTouchStart: () => {console.log(" touch start")},
+    onTouchEnd: () => {
+      rPercentDisp.value =
+        Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;
+      console.log("+NinePatchBar release percent=" + rPercentDisp.value);
+    },
+  });
+
+  rJsvScrollFlowA.value.setSensor((percent, x, y) => {
+    console.log(
+      `follow onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+});
+
+onUnmounted(() => {
+  // 销毁记录在全局的texture
+  cLeftBarTexture?.doRecycle();
+  cRightBarTexture?.doRecycle();
+});
+</script>
+
+<style scoped></style>

package/ScrollBoxTest/NoBackgroundBar.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- 进度条 -->
+  <div :style="{ top: rProps.top, left: rProps.left }">
+    <JsvScrollBox
+      ref="rJsvScrollBox"
+      :style="{
+        width: 800,
+        height: 84,
+      }"
+      :direction="HORIZONTAL"
+      :sliderSize="{
+        width: 84,
+      }"
+    >
+      <template #FixedBox="{ boxWidth, boxHeight }">
+        <div
+          :style="{
+            width: boxWidth,
+            height: boxHeight,
+            lineHeight: boxHeight,
+            backgroundColor: 'rgba(255,255,255,0.3)',
+            borderRadius: Math.floor(boxHeight / 2),
+            fontSize: Math.floor(boxHeight * 0.5),
+            textAlign: 'center',
+            color: 'rgba(0,0,0,1)',
+          }"
+        >
+          {{ `进度:${rPercentDisp}` }}
+        </div>
+      </template>
+      <template #SliderBox="{ boxWidth, boxHeight }">
+        <div
+          :style="{
+            top: -15,
+            left: -15,
+            width: boxWidth + 30,
+            height: boxHeight + 30,
+            backgroundColor: 'rgba(255, 0,0,0.8)',
+            borderRadius: Math.floor((boxHeight + 30) / 2),
+          }"
+          @click="fncOnClick"
+        />
+      </template>
+    </JsvScrollBox>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { JsvScrollBox, HORIZONTAL } from "jsview";
+
+let rProps = defineProps({
+  top: {
+    Type: Number,
+    default: 0,
+  },
+  left: {
+    Type: Number,
+    default: 0,
+  },
+});
+
+//进度百分比
+let myProgress = shallowRef(20);
+
+let fncOnClick = () => {
+  console.log("OnClicked");
+};
+
+let rJsvScrollBox = shallowRef(null);
+let rPercentDisp = shallowRef(0);
+
+onMounted(() => {
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+});
+</script>
+
+<style scoped>
+.bgSty {
+  background-color: #5490d1;
+  width: 1280;
+  height: 720;
+}
+.logo-bg {
+  width: 800;
+  height: 400;
+}
+.text {
+  width: 800;
+  height: 200;
+  font-size: 24;
+  font-weight: bold;
+  line-height: 32;
+  color: #ffffff;
+  text-align: center;
+}
+.bg1 {
+  left: 0;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #007f00;
+}
+.bg2 {
+  left: 267;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #3049b8;
+}
+.bg3 {
+  left: 534;
+  top: 0;
+  height: 400;
+  width: 266;
+  background-color: #d12b8c;
+}
+</style>