@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/Basic/components/div/DivRadius.vue

@@ -1,14 +1,14 @@
 <script setup>
 import iconImgPath from "../../assets/icon.png";
 const blockSize = {
-  width: 65,
-  height: 65,
+  width: 45,
+  height: 45,
 };
-const gap = 5;
+const gap = 3;
 </script>
 
 <template>
-  <div id="layout-root">
+  <div id="layout-root" :style="{ top: 2 }">
     <div
       class="content-font"
       :style="{
@@ -27,7 +27,7 @@ const gap = 5;
         width: blockSize.width,
         height: blockSize.height,
         backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '0 10 20 30',
+        borderRadius: '0 8 12 16',
       }"
     >
       各角不同
@@ -35,31 +35,113 @@ const gap = 5;
     <div
       class="content-font"
       :style="{
-        top: blockSize.height + gap,
+        left: (blockSize.width + gap) * 2,
         width: blockSize.width,
         height: blockSize.height,
-        backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '10',
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+        borderRadius: '0 0 16 16',
       }"
     >
-      各角相同
+      两角相同
     </div>
     <div
       class="content-font"
       :style="{
-        left: blockSize.width + gap,
-        top: blockSize.height + gap,
+        left: (blockSize.width + gap) * 3,
         width: blockSize.width,
         height: blockSize.height,
-        backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '0 10 20 30',
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+        borderRadius: '16 16 16 8',
       }"
     >
-      各角不同
+      3vs1角
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        left: (blockSize.width + gap) * 4,
+        width: blockSize.width,
+        height: blockSize.height,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+        borderRadius: '0 0 0 0',
+      }"
+    >
+      各角为0
+    </div>
+
+    <!-- 第二行 -->
+    <div :style="{top: blockSize.height + gap}">
+      <div
+        class="content-font"
+        :style="{
+          width: blockSize.width,
+          height: blockSize.height,
+          backgroundColor: 'rgba(255, 255, 0, 1)',
+          borderRadius: 10,
+        }"
+        :data-jsv-img-enable-aa="true"
+      >
+        各角相同(AA)
+      </div>
+      <div
+        class="content-font"
+        :style="{
+          left: blockSize.width + gap,
+          width: blockSize.width,
+          height: blockSize.height,
+          backgroundColor: 'rgba(255, 255, 0, 1)',
+          borderRadius: '0 8 12 16',
+        }"
+        :data-jsv-img-enable-aa="true"
+      >
+        各角不同(AA)
+      </div>
+      <div
+        class="content-font"
+        :style="{
+          left: (blockSize.width + gap) * 2,
+          width: blockSize.width,
+          height: blockSize.height,
+          backgroundColor: 'rgba(255, 255, 0, 1)',
+          borderRadius: '0 0 16 16',
+        }"
+        :data-jsv-img-enable-aa="true"
+      >
+        两角相同(AA)
+      </div>
+      <div
+        class="content-font"
+        :style="{
+          left: (blockSize.width + gap) * 3,
+          width: blockSize.width,
+          height: blockSize.height,
+          backgroundColor: 'rgba(255, 255, 0, 1)',
+          borderRadius: '16 16 16 8',
+        }"
+        :data-jsv-img-enable-aa="true"
+      >
+        3vs1角(AA)
+      </div>
+      <div
+        class="content-font"
+        :style="{
+          left: (blockSize.width + gap) * 4,
+          width: blockSize.width,
+          height: blockSize.height,
+          backgroundColor: 'rgba(255, 255, 0, 1)',
+          borderRadius: '0 0 0 0',
+        }"
+        :data-jsv-img-enable-aa="true"
+      >
+        各角为0(AA)
+      </div>
     </div>
   </div>
 </template>
 
 <style>
-@import "../FontStyle.css";
+.content-font {
+  font-family: 黑体;
+  font-size: 10;
+}
 </style>

package/Basic/components/div/DivTag3Group.vue

@@ -0,0 +1,30 @@
+<script setup>
+import ContentBlock from "../ContentBlock.vue";
+import ColorFormatTest from "./ColorFormatTest.vue";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+</script>
+
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="0"
+      title="颜色格式测试"
+    >
+      <ColorFormatTest />
+    </ContentBlock>
+  </div>
+</template>
+
+<style scoped></style>

package/Basic/components/img/ImageType.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="props.contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="0"
+      title="图片类型显示"
+    >
+      <div>
+        <div class="content-font titleStyle">
+          base64
+        </div>
+        <img :src="base64" :style="{top: 15, width: 30, height: 30 }" />
+      </div>
+    </ContentBlock>
+  </div>
+</template>
+
+<script setup>
+import ContentBlock from "../ContentBlock.vue";
+import { computed } from "vue";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+const contentBlockProps = computed(() => {
+  return {
+    colIndex: 0,
+    itemSides: { ...props.itemSides, height: props.itemSides.height * 2 },
+  };
+});
+
+const base64 =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAMrSURBVEiJnZRdaBRXHMV/985uMtmETeJXpK7N1gSLiIVSP4rtg6VFEB+MLSr6UFoES/ShIiJIRUtRUUQr0lJQKVqkaiBaSg1Y1EgRRB8irKWxCWkTiYauG5PsJtnNzOxcH/bD3czMJvY83Tn//z3n3jv3HkEJqJYFryPUOpRaC4SBEL19lWiagabFKfO3o5UfF18M3vPSEO7CoXng2w9sBbSi4r+9zgm63o/Pv1nsSNyZXJIO8cvhJtAeAdsc4l5IpUKMj/2hfggeLGmgWsJfImgFUTUt4ULYtiAe/0p9X9VaSOePSF0ON2XEnbtCnwWz3oPAPBgdBCMBPTfgeZe7WTB4SDTH9+UNVGtjiLTZ6bry2rehfgOI7Gn9dz+7NAHRLuj61WkgpaIq+I5oHn6QWa1lfeMqXvEa1G98KV4IpWD2Qqh7y1mzbYGRugggM1eRT123WrcKhPPEClyg4UP3Uir1pjo9c5lE2U143ZaqN0qIZyH93jVjYrdEsMazQfimNnB9SVlY1gcSVKNnQ3JgagO7RC1tVUtgrmdD7O7UBtE/vWsq7ZcglGfD8EOIecYMWAZ0t5UwEEjgied8VcadSIDfH8whGq/M86YI0N67gm9/W8q4CnobaJohVEu4DZw/+pkR5sLAMZ4Z4Tzn99l0dyeJJ8vyXGW5yb76z1iitzsNyvWoRKlrk/lBM8Tp/rNF4gCmJYvEAcYm/Oz/5wKdqfedBn7fTYmPKxTcBRuNSwOHGUtXe23cAdMSHHx8HksVmyP8R6T4pG8AwbkcF4mv5snEommL5zCSquDn4QMviUDFI7F9KJLJAU3bC4wAdCTWvrJ4DreH1mcGUio0fRNko1l83BMF9blCpB8nXcJrmoiN12ArCYHKo2L7UCRvACA29l0dsWbvMZX+vw1sBTF98S9iR2JvjiuKytot908sr7l6qEJLeD8+D2hS8dH8Wx11Ox+uL+Rdo+r6dydXPDUafupJLl2YpjjwIn+ZRd9CQENtv7Fy5u3mTV/v+XGyVqkspO3MqXdHUzW7Yub8VaPWjOoxq7aso9OH7rMIlo/aC4LdTxsDfx9wE87hBUkjEuf/QCsMAAAAAElFTkSuQmCC";
+</script>
+
+<style>
+@import "../FontStyle.css";
+</style>
+
+<style scoped>
+.titleStyle {
+  width: 100;
+  height: 16;
+}
+
+.imageStyle {
+  top: 2;
+  left: 2;
+  width: 100;
+  height: 50;
+}
+
+.frameStyle {
+  top: 16;
+  /* titleHeight */
+  width: 104;
+  /* imageSize.width+4 */
+  height: 54;
+  /* imageSize.height+4 */
+  background-color: rgba(0, 255, 0, 1);
+}
+</style>

package/Basic/components/panel/Panel2.vue

@@ -2,13 +2,15 @@
 import TitleBar from "./TitleBar.vue";
 import ImageGroup from "../img/ImageGroup.vue";
 import AnimGroup2 from "../anim/AnimGroup2.vue";
+import ImageType from "../img/ImageType.vue";
+import DivTag3Group from "../div/DivTag3Group.vue";
 
 const props = defineProps({
   panelClass: String,
   itemSides: Object,
 });
 
-const titleData = ["img标签", "div动画2"];
+const titleData = ["img标签", "div动画2", "图片类型", "div标签3"];
 </script>
 
 <template>
@@ -29,6 +31,16 @@ const titleData = ["img标签", "div动画2"];
         :contentClass="panelClass"
         :itemSides="itemSides"
       />
+      <ImageType
+        :style="{ left: itemSides.width * 2 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+      <DivTag3Group
+        :style="{ left: itemSides.width * 3 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
     </div>
   </div>
 </template>

package/Basic/components/text/TextAlign.vue

@@ -15,10 +15,16 @@ const blockStyle = {
   <div id="layout-root">
     <div
       class="content-font"
-      :style="{ ...blockStyle, width: blockSize.width * 1.5 }"
+      :style="{ ...blockStyle, width: blockSize.width }"
     >
       左上(默认)
     </div>
+    <div
+      class="content-font"
+      :style="{ ...blockStyle, left: blockSize.width + 5, width: blockSize.width + 50, height: blockSize.height - 18, lineHeight: blockSize.height - 18, fontSize: 18}"
+    >
+      单行居中Aa1
+    </div>
     <div
       class="content-font"
       :style="{ ...blockStyle, top: blockSize.height + 5, textAlign: 'center' }"

package/BlobLoadTest/App.vue

@@ -0,0 +1,201 @@
+<!--
+ * @Description: Blob加载测试用例
+ * 使用XMLHttpRequest请求blob，然后将此Blob通过响应式变量设置给img元素进行展示
+ * 注意createObjectURL的释放问题
+-->
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import { BlobApi } from "jsview";
+
+const router = useRouter();
+
+// 图片URL - 从DemoHomepage样例中获取
+const imageUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg";
+
+// 响应式变量，存储blob URL
+const blobUrl = ref(null);
+// 加载状态
+const loading = ref(false);
+// 错误信息
+const error = ref(null);
+
+// 存储当前的object URL，用于清理
+let currentObjectUrl = null;
+
+/**
+ * 使用XMLHttpRequest加载blob
+ */
+const loadBlob = () => {
+  loading.value = true;
+  error.value = null;
+
+  const xhr = new XMLHttpRequest();
+  xhr.open("GET", imageUrl);
+  xhr.responseType = "blob"; // 设置响应类型为blob
+
+  xhr.onload = async () => {
+    if (xhr.status === 200) {
+      // 获取blob数据
+      const blob = xhr.response;
+      
+      // 释放之前的object URL（如果存在）
+      if (currentObjectUrl) {
+        BlobApi.revokeObjectURL(currentObjectUrl);
+        currentObjectUrl = null;
+      }
+
+      // 创建新的object URL
+      currentObjectUrl = await BlobApi.createObjectURL(blob);
+      blobUrl.value = currentObjectUrl;
+      loading.value = false;
+      console.log("Blob加载成功，大小:", blob.size, "bytes");
+    } else {
+      error.value = `加载失败，状态码: ${xhr.status}`;
+      loading.value = false;
+      console.error("Blob加载失败:", xhr.status);
+    }
+  };
+
+  xhr.onerror = () => {
+    error.value = "网络错误，无法加载图片";
+    loading.value = false;
+    console.error("Blob加载网络错误");
+  };
+
+  xhr.send();
+};
+
+// 组件挂载时加载blob
+onMounted(() => {
+  loadBlob();
+});
+
+// 组件卸载前释放object URL，防止内存泄漏
+onBeforeUnmount(() => {
+  if (currentObjectUrl) {
+    BlobApi.revokeObjectURL(currentObjectUrl);
+    currentObjectUrl = null;
+    console.log("已释放object URL");
+  }
+});
+
+// 返回键处理
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1);
+    return true;
+  }
+  return false;
+};
+
+const onLoadFinished = () => {
+  console.log("图片加载完成");
+};
+
+const onLoadError = () => {
+  console.error("图片显示错误");
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#1a1a1a',
+    }"
+  >
+    <jsv-focus-block
+      :onAction="{
+        onKeyDown: onKeyDown,
+      }"
+    >
+      <!-- 标题 -->
+      <div
+        :style="{
+          top: 50,
+          left: 50,
+          width: 1180,
+          height: 50,
+          fontSize: 32,
+          color: '#ffffff',
+          textAlign: 'center',
+          lineHeight: 50,
+        }"
+      >
+        Blob加载测试用例
+      </div>
+
+      <!-- 加载状态提示 -->
+      <div
+        v-if="loading"
+        :style="{
+          top: 150,
+          left: 50,
+          width: 1180,
+          height: 40,
+          fontSize: 24,
+          color: '#ffff00',
+          textAlign: 'center',
+          lineHeight: 40,
+        }"
+      >
+        正在加载Blob...
+      </div>
+
+      <!-- 错误提示 -->
+      <div
+        v-if="error"
+        :style="{
+          top: 150,
+          left: 50,
+          width: 1180,
+          height: 40,
+          fontSize: 24,
+          color: '#ff0000',
+          textAlign: 'center',
+          lineHeight: 40,
+        }"
+      >
+        {{ error }}
+      </div>
+
+      <!-- 图片展示 -->
+      <div
+        v-if="blobUrl && !loading && !error"
+        :style="{
+          top: 150,
+          left: 50,
+        }"
+      >
+        <img
+          :src="blobUrl"
+          :style="{
+            width: 1180,
+            height: 450,
+            objectFit: 'contain',
+          }"
+          @load="onLoadFinished"
+          @error="onLoadError"
+        />
+      </div>
+
+      <!-- 说明文字 -->
+      <div
+        :style="{
+          top: 670,
+          left: 50,
+          width: 1180,
+          height: 30,
+          fontSize: 18,
+          color: '#888888',
+          textAlign: 'center',
+          lineHeight: 30,
+        }"
+      >
+        使用XMLHttpRequest加载Blob，通过createObjectURL创建URL并显示
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>

package/BreakLinesApi/App.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { JsvTextBox, TextTools } from "jsview";
+
+//TODO left, top, width, height无法通过class传递, 待调查
+const baseStyle = {
+  left: 50,
+  width: 1000,
+  height: 50,
+};
+
+//TODO 此字符串直接写在双花括号内编译出错, 待调查
+const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
+
+const longText =
+  "测试asdfakjljblk123\\textcolor{#FF0000}{红色并且\\textb{加粗测试加粗asdf测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗123llladf测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗asdfasdf测试加asdf粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗测试加粗asdf测试}}文字asdf测试";
+
+const lines = TextTools.breakLines(
+  longText,
+  {
+    fontFamily: "黑体",
+    fontSize: 25,
+    fontStyle: "normal",
+    fontWeight: "normal",
+    JsvTextEmoji: 0,
+    JsvTextLatex: 1,
+  },
+  1000
+);
+console.log("ccht lines ", lines);
+</script>
+
+<template>
+  <div :style="{ width: 1920, height: 1080, backgroundColor: '#007788' }"></div>
+
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      top: 10,
+      left: 10,
+      fontSize: 30,
+    }"
+  >
+    上方为api分行结果, 与下方对比每行的文字是否一致
+  </div>
+  <div :style="{ top: 100 }">
+    <jsv-text-box
+      v-for="(line, index) in lines"
+      :key="index"
+      :style="{
+        width: 1000,
+        height: 50,
+        left: 0,
+        top: 50 * index,
+        fontSize: 25,
+      }"
+      :enableLatex="true"
+    >
+      {{ line }}
+    </jsv-text-box>
+  </div>
+
+  <div :style="{ top: 450 }">
+    <jsv-text-box
+      :style="{
+        width: 1000,
+        left: 0,
+        fontSize: 25,
+      }"
+      :enableLatex="true"
+    >
+      {{ longText }}
+    </jsv-text-box>
+  </div>
+</template>
+
+<style scoped>
+.textStyle {
+  line-height: 50;
+  font-size: 40;
+}
+</style>

package/CanvasDrawChart/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <div :style="{left: 10, top: 10}"><Graph1 /></div>
+    <div :style="{left: 500, top: 10}"><Graph2 /></div>
+  </div>
+</template>
+
+<script setup>
+import Graph1 from "./Graph1.vue";
+import Graph2 from "./Graph2.vue";
+</script>

package/CanvasDrawChart/Graph1.vue

@@ -0,0 +1,104 @@
+<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 - 2,
+      top: pos.y - 2,
+      width: 4,
+      height: 4,
+      backgroundColor: '#00ff00aa',
+    }"
+  ></div>
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "jsview";
+import { JsvDashPath } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const chartHelper = JsvTextureStoreApi.getChartHelper(
+  400,
+  400,
+  [-100, 400],
+  [-100, 400]
+);
+const canvas = chartHelper.getCanvas();
+
+//绘制x轴
+const { path: xAxis } = chartHelper.linePath(
+  [
+    { x: -100, y: 0 },
+    { x: 400, y: 0 },
+  ],
+  0,
+  0
+);
+xAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+//绘制y轴
+const { path: yAxis } = chartHelper.linePath(
+  [
+    { x: 0, y: -100 },
+    { x: 0, y: 400 },
+  ],
+  0,
+  0
+);
+yAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+//绘制数据曲线
+const data1 = [
+  { x: 0, y: 0 },
+  { x: 50, y: 100 },
+  { x: 100, y: 0 },
+  { x: 150, y: 200 },
+  { x: 170, y: 0 },
+  { x: 200, y: 350 },
+  { x: 250, y: 30 },
+  { x: 300, y: 320 },
+  { x: 350, y: 320 },
+  { x: 400, y: 320 },
+];
+
+//绘制曲线图(闭合到x轴)
+/**
+ * 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(data1, false, 1);
+//填充渐变色
+path.fillWithLinearGradient(0, 100, 0, 400, ["#FF00FF", "#0000FF"], [0, 1]);
+
+const sourceId = canvas.commit();
+onBeforeUnmount(() => {
+  //注意释放资源
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>