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

package/DemoForOperator/Focus/Light/Item.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import LightFocusBox from "./LightFocusBox.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Light/Item/background.png";
+const lightImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Light/Item/blackWhiteTurntable.png";
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundImage: bgImage,
+        lineHeight: data.height,
+        textAlign: 'center',
+      }"
+    >
+      旋转光
+    </div>
+    <light-focus-box
+      v-if="focused"
+      :src="lightImage"
+      :layout="{
+        width: data.width,
+        height: data.height,
+      }"
+      :borderWidth="2"
+      :borderRadius="10"
+      :withHalo="true"
+      :circleTime="2"
+    />
+  </div>
+</template>

package/DemoForOperator/Focus/Light/LightFocusBox.vue

@@ -0,0 +1,87 @@
+<template>
+  <rotate-frame
+    :imageUrl="src"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :maxViewSize="texCoord"
+    :borderRadius="borderRadius"
+    :lineWidth="borderWidth"
+    :withHalo="withHalo"
+    :oneCircleTime="circleTime"
+  />
+</template>
+
+<script setup>
+import RotateFrame from "./utils/RotateFrame.vue";
+
+const props = defineProps({
+  /**
+   * 聚焦框使用的图片资源路径
+   * @type {String}
+   * @required
+   */
+  src: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * 布局位置和尺寸配置
+   * @type {Object}
+   * @property {number} left - 左侧定位（单位：像素）
+   * @property {number} top - 顶部定位（单位：像素）
+   * @property {number} width - 容器宽度（单位：像素）
+   * @property {number} height - 容器高度（单位：像素）
+   */
+  layout: {
+    type: Object,
+  },
+
+  /**
+   * 边框线宽（单位：像素）
+   * @type {Number}
+   * @default 6
+   */
+  borderWidth: {
+    type: Number,
+    default: 6,
+  },
+
+  /**
+   * 边框圆角半径（单位：像素）
+   * @type {Number}
+   */
+  borderRadius: {
+    type: Number,
+  },
+
+  /**
+   * 边框旋转一周所需时间（单位：秒）
+   * @type {Number}
+   */
+  circleTime: {
+    type: Number,
+  },
+
+  /**
+   * 是否显示光晕效果
+   * @type {Boolean}
+   */
+  withHalo: {
+    type: Boolean,
+  },
+});
+
+/**
+ * 纹理坐标最大视图尺寸配置
+ * @type {Object}
+ * @property {number} width - 最大视图宽度
+ * @property {number} height - 最大视图高度
+ */
+const texCoord = {
+  width: 500,
+  height: 500,
+};
+</script>

package/DemoForOperator/Focus/Light/LightPage.vue

@@ -0,0 +1,43 @@
+<template>
+  <metro-widget
+    name="light"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction"/>
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { MetroWidget, HORIZONTAL } from "jsview";
+import { onMounted, ref } from "vue";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting";
+
+const props = defineProps({
+  onEdge: Function
+})
+
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Light/LightPage/background.png";
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+</script>

package/DemoForOperator/Focus/Light/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,
+}

package/DemoForOperator/Focus/Light/utils/RotateFrame.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { defineProps } from "vue";
+import { JsvTextureAnim, DECORATE_NINEPATCH_ALPHA_MIX } from "jsview";
+import { BuildFrame } from "./FrameCanvasStore";
+import mask from "./circleHaloMask.png";
+
+const rProps = defineProps({
+  // 旋转圈内的url，可以是import内容，也可以是https内容
+  imageUrl: {
+    type: String,
+    require: true,
+  },
+
+  // 所包含区域的left, top, width, height
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  width: {
+    type: Number,
+    require: true,
+  },
+  height: {
+    type: Number,
+    require: true,
+  },
+
+  // 所包含区域的圆角值borderRadius
+  borderRadius: {
+    type: Number,
+    require: true,
+  },
+
+  // 焦点框的线宽
+  lineWidth: {
+    type: Number,
+    require: true,
+  },
+
+  // 焦点框旋转一圈所用的时间
+  oneCircleTime: {
+    type: Number,
+    default: 0.5, // 转一圈0.5秒
+  },
+
+  // 是否需要外发光光晕
+  withHalo: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * 设置转盘的绘制覆盖区域
+   * 注意texture的尺寸需要兼顾最大的view即可
+   */
+  maxViewSize: {
+    type: Object, // { width: Number, height: Number },
+    default: {
+      width: 400,
+      height: 400,
+    },
+  },
+});
+
+// 基础旋转动画
+const cRotateAnimation =
+  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+
+/**
+ * 创建右图的边缘遮罩，可调节边框的粗细:circleLineWidth
+ */
+// 设置设定模拟绘制.9图
+const cFrameInfo = BuildFrame(rProps.borderRadius, rProps.lineWidth);
+
+// 创建内边框(实心不发光部分)
+const ninePatchDecorator1 = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `jsvtexturestore://${cFrameInfo.canvasSourceId}`,
+  imageWidth: cFrameInfo.canvasWidth, // 等同于画布宽
+  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
+  borderOutset: cFrameInfo.borderOutset, // (画布 - 圆环内直径) / 2
+  animTime: rProps.oneCircleTime,
+};
+
+/**
+ * 导入右图的边缘光晕部分的遮罩
+ */
+// 外发光的圈的图片信息, 完全按照 circleHaloMask来配置
+const cOriginPngInfo = {
+  size: 160, // 图片尺寸
+  radius: 56, // 图片中的圆的圆内半径
+};
+const cRectRadius = Math.floor(rProps.borderRadius + rProps.lineWidth); // 光环在描边之外，留出描边的宽度
+const ninePatchDecorator2 = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `url(${mask})`,
+  imageWidth: cOriginPngInfo.size,
+  imageDspWidth: Math.floor(
+    (cRectRadius / cOriginPngInfo.radius) * cOriginPngInfo.size
+  ),
+  centerWidth: 2,
+  borderOutset: Math.floor(cOriginPngInfo.size / 2 - cOriginPngInfo.radius),
+  animTime: rProps.oneCircleTime,
+};
+
+const texCoord = {
+  width: rProps.maxViewSize.width,
+  height: rProps.maxViewSize.height,
+};
+</script>
+<template>
+  <div>
+    <!-- 光晕(halo)在下，实心区域在上 -->
+    <jsv-texture-anim
+      v-if="rProps.withHalo"
+      :src="rProps.imageUrl"
+      :left="rProps.left"
+      :top="rProps.top"
+      :width="rProps.width"
+      :height="rProps.height"
+      :texCoord="texCoord"
+      :animation="cRotateAnimation"
+      :duration="5000"
+      :repeat="-1"
+      :autoStart="true"
+      :decorate="ninePatchDecorator2"
+    ></jsv-texture-anim>
+    <jsv-texture-anim
+      :src="rProps.imageUrl"
+      :left="rProps.left"
+      :top="rProps.top"
+      :width="rProps.width"
+      :height="rProps.height"
+      :texCoord="texCoord"
+      :animation="cRotateAnimation"
+      :duration="5000"
+      :repeat="-1"
+      :autoStart="true"
+      :decorate="ninePatchDecorator1"
+    ></jsv-texture-anim>
+  </div>
+</template>

package/DemoForOperator/Focus/Normal/Item.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import NormalFocusBox from "./NormalFocusBox.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Normal/Item/background.png";
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundImage: bgImage,
+        lineHeight: data.height,
+        textAlign: 'center',
+      }"
+    >
+      普通
+    </div>
+    <normal-focus-box
+      v-if="focused"
+      color="#ffffff"
+      :layout="{
+        width: data.width,
+        height: data.height,
+      }"
+      :borderWidth="5"
+      :borderRadius="10"
+    />
+  </div>
+</template>

package/DemoForOperator/Focus/Normal/NormalFocusBox.vue

@@ -0,0 +1,65 @@
+<template>
+  <JsvNinePatch
+    :style="layout"
+    :imageUrl="`jsvtexturestore://${sourceId}`"
+    :imageWidth="sampleImageWidth"
+    :centerWidth="2"
+    :imageDspWidth="sampleImageWidth"
+    :borderOutset="borderWidth"
+  />
+</template>
+<script setup>
+import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+/** 
+ * 定义组件属性
+ * @type {Props}
+ */
+const props = defineProps({
+  /** @type {String} 边框颜色 */
+  color: {
+    type: String,
+  },
+  /** @type {Object} 布局样式配置 */
+  layout: {
+    type: Object
+  },
+  /** @type {Number} 边框宽度（默认3像素） */
+  borderWidth: {
+    type: Number,
+    default: 3,
+  },
+  /** @type {Number} 圆角半径（默认0像素） */
+  borderRadius: {
+    type: Number,
+    default: 0
+  }
+});
+
+let canvasRef;
+let circleRadius = props.borderRadius;
+let sampleImageWidth = circleRadius * 2 + props.borderWidth + 2;
+canvasRef = JsvTextureStoreApi.canvasTexture(
+  sampleImageWidth,
+  sampleImageWidth
+); // 创建画布
+
+let circleLineWidth = props.borderWidth;
+let customPath = canvasRef.circlePath(
+  Math.floor(sampleImageWidth / 2),
+  Math.floor(sampleImageWidth / 2),
+  circleRadius
+); // 创建圆环绘制路径，圆形在画布的中心点位置
+canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
+customPath.stroke(circleLineWidth, props.color); // 以给定线宽绘制圆环
+const sourceId = canvasRef.commit(); // texture和div的textureStore绑定
+
+/**
+ * 组件卸载前的清理操作
+ * @listens onBeforeUnmount
+ */
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>

package/DemoForOperator/Focus/Normal/NormalPage.vue

@@ -0,0 +1,41 @@
+<template>
+  <metro-widget
+    name="normal"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting";
+
+const props = defineProps({
+  onEdge: Function
+})
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Normal/NormalPage/background.png";
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+</script>

package/DemoForOperator/Focus/SwipeLight/Item.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import SwipeLightBox from "./SwipeLightBox.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  lightImg: String,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/SwipeLight/Item/background.png";
+
+const focused = ref(false);
+const showLight = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  showLight.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+  showLight.value = false;
+};
+const onClick = () => {};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+function onAnimEnd() {
+  showLight.value = false;
+}
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundImage: bgImage,
+        lineHeight: data.height,
+        textAlign: 'center',
+        borderRadius: 20,
+      }"
+    >
+      扫光
+    </div>
+    <swipe-light-box
+      v-if="showLight"
+      :lightImg="lightImg"
+      :size="{
+        width: data.width,
+        height: data.height,
+      }"
+      :borderRadius="20"
+      :onAnimEnd="onAnimEnd"
+    />
+  </div>
+</template>