语图page

src/pages/Page/canvas/ConstellationDiagram/index.page.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+import { 星座图示例数据_50点 } from './_星座图示例数据_50.js';
+import './konva.2.4.2.min.js'; // 引入 Konva 库
+import { PlanisphereWidget } from './planispherewidget.js'; // 导入 onMounted
+
+definePage({
+  meta: {
+    title: '星座图',
+  },
+});
+
+// 在组件挂载后执行
+onMounted(() => {
+  // 创建 PlanisphereWidget 实例，指定容器 ID
+  const widget = new PlanisphereWidget('constellation-container', {
+    // 可以根据需要传递配置选项，例如背景色
+    bg_color: '#1e1e2f',
+    border_color: '#4a4a6a',
+    wave_color: '#00bcd4', // 更改波形颜色以便更清晰
+  });
+
+  // 调用 feed 方法绘制星座图
+  // 默认 viewmodel 为 0，会调用 drawWave_planis
+  widget.feed(星座图示例数据_50点);
+
+  // 如果需要明确设置模式（虽然默认就是星座图）
+  // widget.setViewMode(0); // 0=星座图
+  // widget.feed(testData);
+
+  // 如果想测试余晖效果
+  // widget.setViewMode(3); // 3=余晖图
+  // setInterval(() => {
+  //   const newData = [];
+  //   for (let i = 0; i < 20; i++) { // 每次添加少量新点
+  //     const x = Math.random() * 2 - 1;
+  //     const y = Math.random() * 2 - 1;
+  //     newData.push([x, y]);
+  //   }
+  //   widget.feed(newData); // 传入新数据以观察余晖
+  // }, 500); // 每 500ms 更新一次
+});
+</script>
+
+<template>
+  <div>
+    <h2>星座图示例</h2>
+    <!-- 添加一个具有 ID 的 div 作为 Konva 的容器 -->
+    <div id="constellation-container" class="canvas-container"></div>
+  </div>
+</template>
+
+<style scoped>
+.canvas-container {
+  width: 500px; /* 设置容器宽度 */
+  height: 500px; /* 设置容器高度 */
+  border: 1px solid #ccc; /* 添加边框以便观察容器位置 */
+  margin-top: 20px;
+}
+</style>