62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<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>
|