@shijiu/jsview-vue-samples 2.2.35 → 2.2.201

package/ScrollBoxTest/ClipBar.vue

@@ -0,0 +1,153 @@
+<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({
+    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,187 @@
+<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({
+    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>

package/ScrollBoxTest/SizeDivBar.vue

@@ -0,0 +1,138 @@
+<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
+            :style="{
+              width: boxWidth,
+              height: boxHeight,
+              backgroundColor: 'rgba(255,255,255,0.3)',
+              borderRadius: Math.floor(boxHeight / 2),
+            }"
+          />
+
+          <!-- 正向进度的颜色(对圆角div进行剪切) -->
+          <JsvScrollFollow
+            :proxyType="ScrollBoxStyle.SizeDiv"
+            :proxyProps="{
+              style: {
+                backgroundColor: 'rgba(255,255,255,0.7)',
+                borderRadius: Math.floor(boxHeight / 2),
+              },
+            }"
+            :syncWith="cLinkName"
+            :varWidth="{
+              start: boxHeight /* 最小尺寸为一个小圆形 */,
+              end: boxWidth,
+            }"
+            :varHeight="boxHeight"
+          />
+
+          <!-- 进度文字 -->
+          <div
+            :style="{
+              width: boxWidth,
+              height: boxHeight,
+              lineHeight: boxHeight,
+              fontSize: Math.floor(boxHeight * 0.5),
+              textAlign: 'center',
+              color: 'rgba(0,0,0,1)',
+            }"
+          >
+            {{ `进度:${rPercentDisp}` }}
+          </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_SizeDivSlider";
+
+//进度百分比
+let myProgress = shallowRef(20);
+
+let fncOnClick = () => {
+  console.log("SizeDiv 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.2);
+
+  // 注册按下抬起的监听
+  rPressDetectDiv.value.jsvSetTapListener({
+    onTouchEnd: () => {
+      rPercentDisp.value =
+        Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;
+      console.log("+SizeDiv release percent=" + rPercentDisp.value);
+    },
+  });
+});
+</script>
+
+<style scoped></style>