@shijiu/jsview-vue-samples 2.3.0 → 3.0.0-next-vue.0

package/CanvasDrawChart/Graph2.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    :style="{
+      width: 400,
+      height: 400,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 400,
+      height: 400,
+      backgroundImage: `url(jsvtexturestore://${sourceId})`,
+    }"
+  ></div>
+  <div
+    v-for="pos in position"
+    :key="pos.x + pos.y"
+    :style="{
+      left: pos.x - 5,
+      top: pos.y - 5,
+      width: 10,
+      height: 10,
+      backgroundColor: '#00ff0055',
+    }"
+  ></div>
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "jsview";
+import { JsvDashPath } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const chartHelper = JsvTextureStoreApi.getChartHelper(
+  400,
+  400,
+  [-50, 450],
+  [-50, 450]
+);
+const canvas = chartHelper.getCanvas();
+
+//绘制x轴
+const { path: xAxis } = chartHelper.linePath(
+  [
+    { x: -30, y: 0 },
+    { x: 430, y: 0 },
+  ],
+  0,
+  0
+);
+xAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+//绘制y轴
+const { path: yAxis } = chartHelper.linePath(
+  [
+    { x: 0, y: -30 },
+    { x: 0, y: 430 },
+  ],
+  0,
+  0
+);
+yAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+const data = [
+  { x: 0, y: 200 },
+  { x: 50, y: 130 },
+  { x: 100, y: 200 },
+  { x: 150, y: 150 },
+  { x: 200, y: 300 },
+  { x: 250, y: 100 },
+  { x: 300, y: 20 },
+  { x: 350, y: 150 },
+  { x: 400, y: 10 },
+];
+
+//绘制折线图(不闭合)
+/**
+ * linePath参数说明
+ * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+ * @param isBroken {boolean} 是否为折线
+ * @param close {number} 
+ *          0: 不闭合,绘制线段用, 
+ *          1: 闭合到x轴(自动绘制左右两端垂直于x轴的线段), 需要填充颜色时用
+ *          2: 闭合到y轴(自动绘制上下两端垂直于y轴的线段), 需要填充颜色时用
+ * @returns {CustomPath, Data[]} 路径对象和数据点数组，每个点包含 x 和 y 坐标
+ */
+const { path, position } = chartHelper.linePath(data, true, 0);
+path.strokeWithSetting({
+  lineWidth: 2,
+  color: "#0088FF",
+  dash: [10, 5],
+  phase: 0,
+});
+
+//绘制柱状图
+const originPos = chartHelper.getOriginPosition();
+//data2Pos获取数据点对应的坐标
+const pos2 = chartHelper.data2Pos(data);
+for (const pos of pos2) {
+  const rect = canvas.rectPath(pos.x - 10, pos.y, pos.x + 10, originPos.y);
+  rect.fill("#0000FF88");
+}
+
+const sourceId = canvas.commit();
+onBeforeUnmount(() => {
+  //注意释放资源
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>

package/CssPreprocessor/Scss/PanelData.js

@@ -40,7 +40,7 @@ const contentListData = [
     { title: "关键帧- @keyframes", obj: ScssKeyframes},
   ],
   [
-    { title: "导入- @import", obj: ScssImporting, zoom: 2 },
+    { title: "导入- @use", obj: ScssImporting, zoom: 2 },
     { title: undefined, obj: undefined, zoom: 0 },
   ],
 ];

package/CssPreprocessor/Scss/components/scss-group4/ScssMaps.vue

@@ -18,14 +18,15 @@ export default {
 </template>
 
 <style scoped lang='scss'>
+@use 'sass:map';
+
 $font-sizes: (
   small: 10, medium: 14, large: 18,
 );
 
 .scss-map {
-  font-size: map-get($font-sizes,
-                     medium);
-
+  font-size: map.get($font-sizes, medium);
+  
   color: #126085;
   left: 10;
   top: 3;

package/CssPreprocessor/Scss/components/scss-group5/ScssImporting.vue

@@ -9,7 +9,7 @@ export default {
     {{'ScssImportFile.vue\n'
     + '\n'
     + '<style scoped lang=\'scss\'>\n'
-    + '@import \'./TextSettings\';\n'
+    + '@use \'./TextSettings\';\n'
     + '</style>\n'
     + '\n'
     + '=================\n'
@@ -28,7 +28,7 @@ export default {
 </template>
 
 <style scoped lang='scss'>
-@import './TextSettings';
+@use './TextSettings';
 .scss-bounds {
   left: 10;
   top: 0;

package/DashPath/App.vue

@@ -7,7 +7,7 @@
       }"
     >
       <!-- 带缺口的矩形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
           { x: 200, y: 0 }, // 右上角
           { x: 200, y: 100 }, // 右边中点（缺口处）
@@ -23,17 +23,15 @@
         :layout="{
           left: 50,
           top: 50,
-          width: 250,
-          height: 200,
         }"
       />
 
       <!-- 三角形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
-          { x: 100, y: 0 }, // 顶点
-          { x: 200, y: 150 }, // 右下角
-          { x: 0, y: 150 }, // 左下角
+          { x: -50, y: -50 }, // 顶点
+          { x: 50, y: -50 }, // 右下角
+          { x: 50, y: 150 }, // 左下角
         ]"
         :dash="[15, 8]"
         :phase="2"
@@ -41,14 +39,19 @@
         :lineWidth="4"
         :layout="{
           left: 350,
-          top: 50,
-          width: 250,
-          height: 200,
+          top: 100,
         }"
       />
+      <div :style="{
+        left: 350,
+        top: 100,
+        width: 5,
+        height: 5,
+        backgroundColor: '#00FF00',
+      }"></div>
 
       <!-- 凸字形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
           { x: 0, y: 0 }, // 左上角
           { x: 200, y: 0 }, // 右上角
@@ -62,18 +65,16 @@
         :dash="[20, 10]"
         :phase="5"
         color="#0088FF"
-        :lineWidth="3"
+        :lineWidth="10"
         :layout="{
           left: 650,
           top: 50,
-          width: 250,
-          height: 200,
         }"
       />
     </div>
   </template>
   
   <script setup>
-  import DashPath from "./DashPath.vue";
-  </script>
+  import { JsvDashPath } from "jsview";
+</script>
   

package/DashPath/AppForOperator.vue

@@ -7,7 +7,7 @@
       }"
     >
       <!-- 带缺口的矩形 -->
-      <DashPath
+      <JsvDashPath
         :points="[
           { x: 200, y: 0 }, // 右上角
           { x: 200, y: 100 }, // 右边中点（缺口处）
@@ -22,14 +22,12 @@
         :layout="{
           left: 150,
           top: 150,
-          width: 250,
-          height: 200,
         }"
       />
     </div>
   </template>
   
   <script setup>
-  import DashPath from "./DashPath.vue";
+  import { JsvDashPath } from "jsview";
   </script>
   

package/DemoForOperator/AnimPic/AnimPic.vue

@@ -5,18 +5,40 @@
 <script setup>
 import { JsvApic2, LoopType, ApicEndState } from "jsview";
 import { shallowRef, onMounted } from "vue";
+
 const props = defineProps({
+  /**
+   * 动画资源路径（必填）
+   * @type {String}
+   * @required
+   */
   src: {
     type: String,
     required: true,
   },
+
+  /**
+   * 动画循环配置
+   * @type {Number|String}
+   * @default 0
+   * @property {Number} [>=0] - 有限循环次数（0表示不循环）
+   * @property {Number} [-1] - 无限循环
+   * @property {String} ['default'] - 使用动画默认循环设置
+   * @property {String} ['infinite'] - 无限循环
+   */
   repeat: {
     type: [String, Number],
-    default: 0,
+    default: 0, // 默认不循环
   },
+
+  /**
+   * 布局样式配置
+   * @type {Object}
+   * @optional
+   */
   layout: {
     type: Object,
-  },
+  }
 });
 
 const apicRef = shallowRef();

package/DemoForOperator/Banger/Banger/Banger.vue

@@ -109,15 +109,79 @@ import {
 import { _formatInfo } from "./SpriteDeal";
 
 const props = defineProps({
-  top: { type: Number, default: 0 },
-  left: { type: Number, default: 0 },
-  num: { type: Number, default: 12 },
-  width: { type: Number, require: true },
-  leadWireTime: { type: Number, require: true },
-  starSrcs: { type: Array },
-  bangerSpriteSrc: { type: String },
-  sparkSpriteSrc: { type: String },
-  leadWireSrc: { type: String },
+  /**
+   * 组件顶端中心Left位置（单位：px）
+   * @type {Number}
+   * @default 0
+   */
+  left: { 
+    type: Number, 
+    default: 0 
+  },
+  /**
+   * 组件顶端中心Top位置（单位：px）
+   * @type {Number}
+   * @default 0
+   */
+  top: { 
+    type: Number, 
+    default: 0 
+  },
+  /**
+   * 鞭炮个数（决定组件长度）
+   * @type {Number}
+   * @default 12
+   */
+  num: { 
+    type: Number, 
+    default: 12 
+  },
+  /**
+   * 组件整体宽度（单位：px）
+   * @type {Number}
+   * @requires true
+   */
+  width: { 
+    type: Number, 
+    require: true 
+  },
+  /**
+   * 引线燃烧时间（单位：秒）
+   * @type {Number}
+   * @requires true
+   */
+  leadWireTime: { 
+    type: Number, 
+    require: true 
+  },
+  /**
+   * 星星特效资源路径数组
+   * @type {Array}
+   */
+  starSrcs: { 
+    type: Array 
+  },
+  /**
+   * 鞭炮资源路径
+   * @type {String}
+   */
+  bangerSpriteSrc: { 
+    type: String 
+  },
+  /**
+   * 火花特效动画资源路径
+   * @type {String}
+   */
+  sparkSpriteSrc: { 
+    type: String 
+  },
+  /**
+   * 引线图片资源路径
+   * @type {String}
+   */
+  leadWireSrc: { 
+    type: String 
+  }
 });
 
 const leadWire = props.leadWireSrc;

package/DemoForOperator/Blur/Blur.vue

@@ -0,0 +1,146 @@
+<!--
+ * @file Blur.vue
+ * 
+ * 【模块 export 内容】
+ * Blur：Vue组件，用于显示模糊效果的纹理
+ *      layout {Object}: (必填)组件布局信息对象，包含组件的位置和尺寸
+ *                     格式为 {left: number, top: number, width: number, height: number}
+ *      showRectPos {Object}: (必填)显示内容相对于原图左上角的位置
+ *                     格式为 {left: number, top: number}
+ *      borderRadius {Number}: 边框圆角半径，默认值 0
+ *      textureInfo {Object}: (必填)纹理信息对象，一般是captureBlurTexture的返回值
+ *                     格式为 {textureId: string, width: number, height: number}
+ * 
+ * captureBlurTexture(divRef, blurRadius): 捕获模糊纹理的方法
+ *      divRef {HTMLElement}: 要捕获的DOM元素引用
+ *      blurRadius {Number}: 模糊半径
+ *      返回值 {Promise<Object>}: 包含纹理信息的Promise，格式为 {textureId: string, width: number, height: number}
+ * 
+ * 注意事项:
+ *      组件会根据传入的textureInfo自动计算变换和缩放
+ *      使用前需要先调用captureBlurTexture方法获取纹理信息
+ -->
+
+<template>
+  <jsv-texture-anim
+    :key="randomKey"
+    :src="sourceSrc"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :transform="translateTransform"
+    :borderRadius="borderRadius"
+  ></jsv-texture-anim>
+</template>
+<script setup>
+import { JsvTextureAnim } from "jsview";
+import { shallowRef, computed } from "vue";
+
+const randomKey = Math.random().toString(36).substring(2, 15);
+
+const props = defineProps({
+  /**
+   * @description 布局信息对象，包含组件的位置和尺寸
+   * @property {number} left - 组件左侧位置
+   * @property {number} top - 组件顶部位置
+   * @property {number} width - 组件宽度
+   * @property {number} height - 组件高度
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @description 显示内容相对于原图左上角的位置
+   * @property {number} left - 显示区域左侧位置
+   * @property {number} top - 显示区域顶部位置
+   */
+  showRectPos: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @description 边框圆角半径
+   * @default 0
+   */
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * @description 纹理信息对象, 一般是captureBlurTexture的返回值
+   * @property {string} textureId - 纹理ID
+   * @property {number} width - 纹理宽度
+   * @property {number} height - 纹理高度
+   */
+  textureInfo: {
+    type: Object,
+    required: true,
+  },
+});
+const sourceSrc = computed(() => {
+  console.log("sourceSrc", props.textureInfo?.textureId);
+  return props.textureInfo?.textureId
+    ? `jsvtexturestore://${props.textureInfo.textureId}`
+    : "";
+});
+const translateTransform = computed(() => {
+  const leftPercent =
+    ((-props.showRectPos.left -
+      (props.layout.width - props.textureInfo.width) / 2) /
+      props.layout.width) *
+    100;
+  const topPercent =
+    ((-props.showRectPos.top -
+      (props.layout.height - props.textureInfo.height) / 2) /
+      props.layout.height) *
+    100;
+  const xScale = props.textureInfo.width / props.layout.width;
+  const yScale = props.textureInfo.height / props.layout.height;
+  const r = `translate3d(${leftPercent.toFixed(2)}%, ${topPercent.toFixed(2)}%, 0) scale3d(${xScale.toFixed(2)}, ${yScale.toFixed(2)}, 1)`;
+  console.log("ccht translateTransform", r);
+  return r;
+});
+</script>
+
+<script>
+import { JsvTextureStoreApi, CaptureProcessType } from "jsview";
+/**
+ * @description 捕获模糊纹理
+ * @param {HTMLElement} divRef - 要捕获的DOM元素引用
+ * @param {number} blurRadius - 模糊半径
+ * @returns {Promise<Object>} 返回包含纹理信息的Promise
+ * @property {string} textureId - 捕获的纹理ID
+ * @property {number} width - 纹理宽度
+ * @property {number} height - 纹理高度
+ */
+export function captureBlurTexture(divRef, blurRadius) {
+  return new Promise((resolve, reject) => {
+    try {
+      JsvTextureStoreApi.capture2Texture(
+        divRef,
+        (textureName, autoRecycle, w, h) => {
+          console.log("ccht captureBlurTexture", textureName, autoRecycle, w, h);
+          if (textureName) {
+            resolve({
+              textureId: textureName,
+              width: w,
+              height: h,
+            });
+          } else {
+            reject(new Error("Failed to capture texture"));
+          }
+        },
+        true,
+        {
+          type: CaptureProcessType.Blur,
+          radius: blurRadius,
+        }
+      );
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+</script>

package/DemoForOperator/Blur/BlurInOut/BlurInOut.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import Blur, { captureBlurTexture } from "../Blur.vue";
+import StaticBgSlide from "./StaticBgSlide.vue";
+
+const vToCapture = shallowRef(null);
+const vTextureInfo = shallowRef(null);
+
+let isBlur = false;
+function enableBlur() {
+  if (isBlur) {
+    return;
+  }
+  isBlur = true;
+  captureBlurTexture(vToCapture.value, 12).then((textureInfo) => {
+    vTextureInfo.value = textureInfo;
+    setTimeout(() => {
+      curPosition.left = 0;
+      bgAnim.value?.slide(curPosition);
+    }, 0);
+  });
+}
+
+const ImagePanda =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+
+let curPosition = {
+  left: 0,
+  top: 0,
+};
+let width1 = 300;
+let height1 = 720;
+const bgAnim = shallowRef(null);
+const onKeyDown = (ev) => {
+  console.log("ccht", ev.keyCode);
+  switch (ev.keyCode) {
+    case 37:
+      if (isBlur) {
+        curPosition.left = -width1;
+        bgAnim.value?.slide(curPosition);
+      }
+
+      break;
+    case 39:
+      if (isBlur) {
+        curPosition.left = 0;
+        bgAnim.value?.slide(curPosition);
+      } else {
+        enableBlur();
+      }
+      break;
+    // case 38:
+    //   curPosition.top = curPosition.top - 100;
+    //   bgAnim.value?.slide(curPosition);
+    //   break;
+    // case 40:
+    //   curPosition.top = curPosition.top + 100;
+    //   bgAnim.value?.slide(curPosition);
+    //   break;
+    // case 13:
+    //   enableBlur();
+    //   break;
+    default:
+      break;
+  }
+};
+
+onMounted(() => {
+  // enableBlur();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      ref="vToCapture"
+      :style="{
+        width: 1280, // 截屏区域的宽
+        height: 720, // 截屏区域的高
+      }"
+    >
+      <div
+        :style="{
+          width: 1280,
+          height: 720,
+          backgroundImage: `url(${ImagePanda})`,
+        }"
+      />
+      <div
+        :style="{
+          top: 300,
+          width: 1280,
+          // height: 81,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          color: '#ffffff',
+          // fontSize: 68,
+          textAlign: 'center',
+          // lineHeight: 81,
+
+          height: 38,
+          lineHeight: 38,
+          fontSize: 36,
+          fontWeight: 'bold',
+        }"
+      >
+        左右键展开/隐藏面板
+      </div>
+    </div>
+
+    <div v-if="vTextureInfo">
+      <StaticBgSlide
+        key="bg"
+        ref="bgAnim"
+        :imgUrl="`jsvtexturestore://${vTextureInfo.textureId}`"
+        :width="width1"
+        :height="height1"
+        :bgWidth="1280"
+        :bgHeight="720"
+        :borderRadius="'0 30 30 0'"
+        :initPosition="{
+          left: -width1,
+          top: 0,
+        }"
+      >
+        <div
+          :style="{
+            width: width1,
+            height: height1,
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: '0 30 30 0',
+            lineHeight: height1,
+            textAlign: 'center',
+            color: '#ffffff',
+            fontSize: 40,
+          }"
+        >
+          弹窗内容
+        </div>
+      </StaticBgSlide>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>