整理文件
This commit is contained in:
严浩
@ -1 +0,0 @@
|
||||
- [卫星星座图绘制原理](https://juejin.cn/post/6844904142448640007)
|
||||
@ -1,61 +0,0 @@
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,441 +0,0 @@
|
||||
// @ts-nocheck
|
||||
export class PlanisphereWidget {
|
||||
constructor(id, options) {
|
||||
console.log('PlanisphereWidget ' + id);
|
||||
|
||||
this.options = options;
|
||||
this.container = document.getElementById(id);
|
||||
this.bg_color = options && options.bg_color ? options.bg_color : '#27293D';
|
||||
this.fore_color = options && options.bg_color ? options.bg_color : '#CCCCCC';
|
||||
this.coor_color = options && options.coor_color ? options.coor_color : '#1B1B24';
|
||||
this.border_color = options && options.border_color ? options.border_color : '#CCCCCC';
|
||||
this.wave_color = options && options.wave_color ? options.wave_color : '#1D8CF8';
|
||||
|
||||
this.margin_left = options && options.margin_left ? options.margin_left : 0;
|
||||
this.margin_top = options && options.margin_top ? options.margin_top : 0;
|
||||
|
||||
this.stage = new Konva.Stage({
|
||||
container: id,
|
||||
width: this.container.clientWidth || 500,
|
||||
height: this.container.clientHeight || 500,
|
||||
});
|
||||
this.layer_coor = new Konva.Layer();
|
||||
this.layer_coor.hitGraphEnabled(false);
|
||||
this.layer_wave = new Konva.Layer();
|
||||
this.layer_wave.hitGraphEnabled(false);
|
||||
|
||||
this.stage.add(this.layer_coor);
|
||||
this.stage.add(this.layer_wave);
|
||||
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.ctx_canvas = this.canvas.getContext('2d');
|
||||
this.ctx_canvas.fillStyle = this.bg_color;
|
||||
|
||||
this.init();
|
||||
// this.initResize();
|
||||
|
||||
this.dAlpha = false;
|
||||
this.d1 = null;
|
||||
this.d2 = null;
|
||||
this.d3 = null;
|
||||
this.d4 = null;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (this.container.clientHeight === 0) return;
|
||||
this.stage.setWidth(this.container.clientWidth);
|
||||
this.stage.setHeight(this.container.clientWidth);
|
||||
this.area_x = this.margin_left;
|
||||
this.area_y = this.margin_top;
|
||||
this.area_width = this.stage.getWidth() - this.margin_left;
|
||||
this.area_height = this.stage.getHeight() - this.margin_top;
|
||||
|
||||
this.drawCoor();
|
||||
|
||||
this.canvas.height = this.area_height;
|
||||
this.canvas.width = this.area_width;
|
||||
this.ctx_canvas.strokeStyle = this.wave_color;
|
||||
this.ctx_canvas.lineWidth = 1;
|
||||
|
||||
this.pointer = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 0,
|
||||
radius: 1,
|
||||
stroke: this.wave_color,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
this.pointer.cache();
|
||||
}
|
||||
|
||||
drawCoor() {
|
||||
var layer = this.layer_coor;
|
||||
layer.destroyChildren();
|
||||
|
||||
var len = this.area_width;
|
||||
var rval = this.area_width / 2;
|
||||
layer.add(
|
||||
new Konva.Rect({
|
||||
x: this.area_x,
|
||||
y: this.area_y,
|
||||
width: this.area_width,
|
||||
height: this.area_height,
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
}),
|
||||
);
|
||||
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [0, 0, this.area_width, this.area_height],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [this.area_width, 0, 0, this.area_height],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [0, rval, this.area_width, rval],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [0, rval / 2, this.area_width, rval / 2],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [0, (rval / 2) * 3, this.area_width, (rval / 2) * 3],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
|
||||
///
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [rval, 0, rval, len],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [rval / 2, 0, rval / 2, len],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Line({
|
||||
points: [(rval / 2) * 3, 0, (rval / 2) * 3, len],
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
lineJoin: 'round',
|
||||
dash: [1, 1],
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Circle({
|
||||
x: rval,
|
||||
y: rval,
|
||||
radius: rval,
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
}),
|
||||
);
|
||||
layer.add(
|
||||
new Konva.Circle({
|
||||
x: rval,
|
||||
y: rval,
|
||||
radius: rval / 2,
|
||||
stroke: this.border_color,
|
||||
strokeWidth: 1,
|
||||
}),
|
||||
);
|
||||
layer.batchDraw();
|
||||
}
|
||||
|
||||
setViewMode(vm) {
|
||||
if (vm == 3) {
|
||||
//0=星座图，3=余晖图。2021.03.31李伟添加；
|
||||
this.dAlpha = true;
|
||||
vm = 0;
|
||||
} else {
|
||||
this.dAlpha = false;
|
||||
}
|
||||
this.viewmodel = vm;
|
||||
|
||||
this.clear();
|
||||
}
|
||||
//星座图
|
||||
feed(d, di, dq) {
|
||||
if (!this.viewmodel || this.viewmodel == 0) {
|
||||
this.drawWave_vector(d);
|
||||
// this.drawWave_planis(d);
|
||||
return;
|
||||
}
|
||||
}
|
||||
//矢量图
|
||||
feedVector(d) {
|
||||
if (!this.viewmodel || this.viewmodel == 0) {
|
||||
this.drawWave_vector(d);
|
||||
return;
|
||||
}
|
||||
}
|
||||
//眼图
|
||||
feedIQ(di, dq) {
|
||||
if (this.viewmodel == 1 && di != null) {
|
||||
this.drawIQ(di);
|
||||
} else if (this.viewmodel == 2 && dq != null) {
|
||||
this.drawIQ(dq);
|
||||
}
|
||||
}
|
||||
drawIQ(IQBuff) {
|
||||
this.clear();
|
||||
for (var j = 0; j < IQBuff.length; j++) {
|
||||
this.drawWave_eye(IQBuff[j]);
|
||||
}
|
||||
}
|
||||
clear() {
|
||||
this.imgData = null;
|
||||
this.drawWave_planis([]);
|
||||
this.drawWave_vector([]);
|
||||
}
|
||||
|
||||
drawWave_eye(d) {
|
||||
// console.log("in drawWave_eye" + d.length);
|
||||
var layer = this.layer_wave;
|
||||
|
||||
var width = this.area_width;
|
||||
var height = this.area_height;
|
||||
var rwidth = width / 2;
|
||||
var rHeight = height / 2;
|
||||
|
||||
var ctx_canvas = layer.getContext();
|
||||
ctx_canvas.strokeStyle = this.wave_color;
|
||||
ctx_canvas.lineWidth = 1;
|
||||
ctx_canvas.beginPath();
|
||||
|
||||
for (var n = 0; n < d.length; n++) {
|
||||
//var x = Math.floor(width*(1-1/1.4)/2+ n * width / d.length / 1.4);
|
||||
var x = Math.floor((n * width) / d.length);
|
||||
var y = Math.floor(rHeight + (d[n] * rHeight) / 1.4);
|
||||
|
||||
if (n == 0) {
|
||||
ctx_canvas.moveTo(x, y);
|
||||
} else {
|
||||
ctx_canvas.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
ctx_canvas.stroke();
|
||||
}
|
||||
|
||||
drawWave_planis(d) {
|
||||
//console.log("in plan" + d.length);
|
||||
var layer = this.layer_wave;
|
||||
|
||||
var width = this.getDrawWHByPixelRatio(this.area_width);
|
||||
var height = this.getDrawWHByPixelRatio(this.area_height);
|
||||
var rwidth = width / 2;
|
||||
var rHeight = height / 2;
|
||||
|
||||
//不显示的时候不报错
|
||||
if (!width || !height || width == 0 || height == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var context = layer.getContext();
|
||||
context.clearRect(0, 0, width, height);
|
||||
|
||||
var imgData = context.createImageData(width, height);
|
||||
var dlen = imgData.data.length;
|
||||
//2021.03.31 李伟增加余晖效果
|
||||
if (this.dAlpha && d) {
|
||||
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d4, 32);
|
||||
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d3, 32);
|
||||
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d2, 64);
|
||||
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d1, 128);
|
||||
this.d4 = this.d3;
|
||||
this.d3 = this.d2;
|
||||
this.d2 = this.d1;
|
||||
this.d1 = d;
|
||||
}
|
||||
this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, 255);
|
||||
/*
|
||||
for (var n = 0; n < d.length; n++) {
|
||||
|
||||
//console.log(rwidth+d[n][0] * rwidth);
|
||||
|
||||
var x = Math.floor(rwidth + d[n][0] * rwidth/1.4);
|
||||
var y = Math.floor(rHeight+ d[n][1] * rHeight/1.4);
|
||||
|
||||
var p = ( y * width + x )* 4;
|
||||
|
||||
this.setWaveColor(imgData, p, dlen,width*4);
|
||||
}
|
||||
*/
|
||||
context.putImageData(imgData, 0, 0);
|
||||
}
|
||||
drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, a) {
|
||||
if (!d) return;
|
||||
for (var n = 0; n < d.length; n++) {
|
||||
//console.log(rwidth+d[n][0] * rwidth);
|
||||
|
||||
var x = Math.floor(rwidth + (d[n][0] * rwidth) / 1.4);
|
||||
var y = Math.floor(rHeight + (d[n][1] * rHeight) / 1.4);
|
||||
|
||||
var p = (y * width + x) * 4;
|
||||
|
||||
this.setWaveColor(imgData, p, dlen, width * 4, a);
|
||||
}
|
||||
}
|
||||
drawWave_vector(d) {
|
||||
var maxLine = 100;
|
||||
|
||||
var dlen = Math.min(maxLine, d.length);
|
||||
|
||||
var layer = this.layer_wave;
|
||||
|
||||
var width = this.area_width;
|
||||
var height = this.area_height;
|
||||
var rwidth = width / 2;
|
||||
var rHeight = height / 2;
|
||||
|
||||
//不显示的时候不报错
|
||||
if (!width || !height || width == 0 || height == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var context = layer.getContext();
|
||||
context.clearRect(0, 0, width, height);
|
||||
|
||||
var ctx_canvas = layer.getContext();
|
||||
ctx_canvas.strokeStyle = this.wave_color;
|
||||
ctx_canvas.lineWidth = 1;
|
||||
ctx_canvas.beginPath();
|
||||
|
||||
for (var n = 0; n < dlen; n++) {
|
||||
var x = Math.floor(rwidth + (d[n][0] * rwidth) / 1.2);
|
||||
var y = Math.floor(rHeight + (d[n][1] * rHeight) / 1.2);
|
||||
if (n == 0) {
|
||||
ctx_canvas.moveTo(x, y);
|
||||
} else {
|
||||
ctx_canvas.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
ctx_canvas.stroke();
|
||||
}
|
||||
|
||||
/*像素单位转css单位,该函数返回当前浏览器缩放比例所影响的 x y width height 的绘图位置
|
||||
仅适用putImageData getImageData等函数*/
|
||||
getDrawWHByPixelRatio(xory) {
|
||||
if (xory == 0) return 0;
|
||||
if (!xory) return xory;
|
||||
var ret = Math.ceil(window.devicePixelRatio * xory);
|
||||
//console.log(`xory=${xory} ratio=${window.devicePixelRatio} ret=${ret}`);
|
||||
return ret;
|
||||
}
|
||||
setWaveColor_thin(imgData, p, dlen, rowlen) {
|
||||
var dp = p + rowlen;
|
||||
if (p < 0) return;
|
||||
if (dp + 11 >= dlen) return;
|
||||
|
||||
imgData.data[p] = 33;
|
||||
imgData.data[p + 1] = 129;
|
||||
imgData.data[p + 2] = 247;
|
||||
imgData.data[p + 3] = 255;
|
||||
}
|
||||
setWaveColor(imgData, p, dlen, rowlen, a = 255) {
|
||||
//2021.03.31 李伟增加余晖效果 a=alpha
|
||||
var dp = p + rowlen;
|
||||
if (p < 0) return;
|
||||
if (dp + 11 >= dlen) return;
|
||||
|
||||
var r = 33;
|
||||
var g = 129;
|
||||
var b = 247;
|
||||
if (a != 255) {
|
||||
r = 0;
|
||||
g = 255;
|
||||
b = 0;
|
||||
}
|
||||
//console.log(a);
|
||||
imgData.data[p] = r;
|
||||
imgData.data[p + 1] = g;
|
||||
imgData.data[p + 2] = b;
|
||||
imgData.data[p + 3] = a; //255;//2021.03.31 李伟增加余晖效果
|
||||
|
||||
imgData.data[p + 4] = r;
|
||||
imgData.data[p + 5] = g;
|
||||
imgData.data[p + 6] = b;
|
||||
imgData.data[p + 7] = a; //255;
|
||||
|
||||
imgData.data[p + 8] = r;
|
||||
imgData.data[p + 9] = g;
|
||||
imgData.data[p + 10] = b;
|
||||
imgData.data[p + 11] = a; //255;
|
||||
|
||||
imgData.data[dp] = r;
|
||||
imgData.data[dp + 1] = g;
|
||||
imgData.data[dp + 2] = b;
|
||||
imgData.data[dp + 3] = a; //255;
|
||||
|
||||
imgData.data[dp + 4] = r;
|
||||
imgData.data[dp + 5] = g;
|
||||
imgData.data[dp + 6] = b;
|
||||
imgData.data[dp + 7] = a; //255;
|
||||
|
||||
imgData.data[dp + 8] = r;
|
||||
imgData.data[dp + 9] = g;
|
||||
imgData.data[dp + 10] = b;
|
||||
imgData.data[dp + 11] = a; //255;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.imgData = null;
|
||||
this.stage.destroy();
|
||||
this.color_map = null;
|
||||
}
|
||||
dispose() {
|
||||
console.log('dispose wfmin');
|
||||
this.destroy();
|
||||
}
|
||||
// initResize() {
|
||||
// var _self = this;
|
||||
// $(this.container).resize(function () {
|
||||
// var target = this;
|
||||
// if (target.resizeFlag) {
|
||||
// clearTimeout(target.resizeFlag);
|
||||
// }
|
||||
// target.resizeFlag = setTimeout(function () {
|
||||
// _self.init();
|
||||
// target.resizeFlag = null;
|
||||
// }, 100);
|
||||
// });
|
||||
// }
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
```
|
||||
给我说一下 语谱图（spectrogram）是什么
|
||||
|
||||
卫星领域有什么用处？
|
||||
```
|
||||
|
||||
在卫星领域，语谱图（spectrogram）也发挥着重要的作用，主要应用于以下方面：
|
||||
|
||||
- **信号分析与识别:**
|
||||
- **信号干扰检测:** 通过观察语谱图，可以快速发现是否存在对卫星信号的干扰，例如人为的干扰（jamming）或意外的频率冲突。干扰信号通常在语谱图上会显示出异常的能量分布或特定的频率模式。
|
||||
- **信号欺骗检测 (Spoofing):** 在卫星导航领域，语谱图可以帮助识别欺骗信号。欺骗信号可能会伪造卫星的定位信息，语谱图可以显示出与真实信号不同的特征。
|
||||
- **雷达应用:**
|
||||
- **空间目标监视 (Space Domain Awareness):** 雷达卫星或地面雷达站利用语谱图分析反射回来的信号，可以识别和跟踪空间中的物体，如废弃的卫星或碎片。通过分析信号的多普勒频移等信息，可以估计目标的速度和距离。
|
||||
- 研究报告提到，通过观察RHESSI卫星的观测数据生成的语谱图，可以进行空间目标监视的微多普勒特征分析。
|
||||
- **科学研究:**
|
||||
- **粒子数据分析:** 在某些卫星任务中，例如分析太空中的粒子 flux（流量），可以将粒子能量随时间和空间（例如 McIlwain L 参数）的变化绘制成二维彩色图，这种图也被称为语谱图。虽然这里的语谱图侧重于能量分布而非频率，但可视化的原理是相似的。
|
||||
@ -1,153 +0,0 @@
|
||||
// @ts-nocheck
|
||||
colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];
|
||||
|
||||
colormapwidget.prototype.getGradientColors = function (name) {
|
||||
if (name == 'blue') {
|
||||
return ['#050525', '#000CFF', '#33FFFF', '#F9FFFF'];
|
||||
} else if (name == 'gray') {
|
||||
return ['#050525', '#FBFBFB'];
|
||||
} else if (name == 'cooledit') {
|
||||
return ['#010E19', '#720271', '#D7032C', '#FDBC5F', '#F8FFED'];
|
||||
} else {
|
||||
return ['#050525', '#0000CF', '#00FF20', '#EFFF00', '#FF007C'];
|
||||
}
|
||||
};
|
||||
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
|
||||
colormapwidget.prototype.colorRgb = function (sColor) {
|
||||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
var sColor = sColor.toLowerCase();
|
||||
if (sColor && reg.test(sColor)) {
|
||||
if (sColor.length === 4) {
|
||||
var sColorNew = '#';
|
||||
for (var i = 1; i < 4; i += 1) {
|
||||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
||||
}
|
||||
sColor = sColorNew;
|
||||
}
|
||||
//处理六位的颜色值
|
||||
var sColorChange = [];
|
||||
for (var i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
|
||||
}
|
||||
return sColorChange;
|
||||
} else {
|
||||
return sColor;
|
||||
}
|
||||
};
|
||||
|
||||
// 将rgb表示方式转换为hex表示方式
|
||||
colormapwidget.prototype.colorHex = function (rgb) {
|
||||
var reg = /(\d{1,3}),(\d{1,3}),(\d{1,3})/;
|
||||
var arr = reg.exec(rgb);
|
||||
|
||||
function hex(x) {
|
||||
return ('0' + parseInt(x).toString(16)).slice(-2);
|
||||
}
|
||||
var _hex = '#' + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
|
||||
return _hex.toUpperCase();
|
||||
};
|
||||
|
||||
//计算两个颜色的step个阶梯色
|
||||
colormapwidget.prototype.gradientColor = function (startColor, endColor, step) {
|
||||
var startRGB = this.colorRgb(startColor); //转换为rgb数组模式
|
||||
var startR = startRGB[0];
|
||||
var startG = startRGB[1];
|
||||
var startB = startRGB[2];
|
||||
|
||||
var endRGB = this.colorRgb(endColor);
|
||||
var endR = endRGB[0];
|
||||
var endG = endRGB[1];
|
||||
var endB = endRGB[2];
|
||||
|
||||
var sR = (endR - startR) / step; //总差值
|
||||
var sG = (endG - startG) / step;
|
||||
var sB = (endB - startB) / step;
|
||||
|
||||
var colorArr = [];
|
||||
for (var i = 0; i < step; i++) {
|
||||
//计算每一步的hex值
|
||||
//var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
|
||||
//colorArr.push(hex);
|
||||
colorArr.push([parseInt(sR * i + startR), parseInt(sG * i + startG), parseInt(sB * i + startB)]);
|
||||
}
|
||||
return colorArr;
|
||||
};
|
||||
|
||||
colormapwidget.prototype.setDbRange = function (count) {
|
||||
this.count = count;
|
||||
this.mapCount = count;
|
||||
this.calColors();
|
||||
};
|
||||
|
||||
colormapwidget.prototype.getColors = function () {
|
||||
if (
|
||||
this.name === this.buff_name &&
|
||||
this.gravity === this.buff_gravity &&
|
||||
this.gravity_value === this.buff_gravity_value &&
|
||||
this.count === this.buff_count
|
||||
)
|
||||
return this.buff_colors;
|
||||
|
||||
return this.calColors();
|
||||
};
|
||||
colormapwidget.prototype.getMapColors = function () {
|
||||
return this.buff_mapCountcolors;
|
||||
};
|
||||
|
||||
colormapwidget.prototype.calColors = function () {
|
||||
this.buff_name = this.name;
|
||||
this.buff_gravity = this.gravity;
|
||||
this.buff_gravity_value = this.gravity_value;
|
||||
this.buff_count = this.count;
|
||||
|
||||
this.buff_colors = this._calColorsByCount(this.count);
|
||||
this.buff_mapCountcolors = this._calColorsByCount(this.mapCount);
|
||||
|
||||
return this.buff_colors;
|
||||
};
|
||||
|
||||
colormapwidget.prototype._calColorsByCount = function (count) {
|
||||
//console.log("_calColorsByCount " + count)
|
||||
var colors = this.getGradientColors(this.name);
|
||||
var arr = [];
|
||||
var stepSpan = colors.length - 1;
|
||||
if (!this.gravity) {
|
||||
var step = Math.ceil(count / stepSpan);
|
||||
for (var i = 0; i < stepSpan; i++) {
|
||||
var carr = this.gradientColor(colors[i], colors[i + 1], step);
|
||||
arr = arr.concat(carr);
|
||||
}
|
||||
} else {
|
||||
var pStart = this.gravity_value - 0.2;
|
||||
pStart = pStart < 0 ? 0 : pStart;
|
||||
var pEnd = this.gravity_value + 0.2;
|
||||
pEnd = pEnd > 1 ? 1 : pEnd;
|
||||
pStart = count * pStart;
|
||||
pEnd = count * pEnd;
|
||||
|
||||
for (var i = 0; i < pStart; i++) {
|
||||
arr.push(this.colorRgb(colors[0]));
|
||||
}
|
||||
|
||||
var step = Math.ceil((pEnd - pStart + 1) / stepSpan);
|
||||
for (var i = 0; i < stepSpan; i++) {
|
||||
var carr = this.gradientColor(colors[i], colors[i + 1], step);
|
||||
arr = arr.concat(carr);
|
||||
}
|
||||
|
||||
for (var i = pEnd; i < count; i++) {
|
||||
arr.push(this.colorRgb(colors[colors.length - 1]));
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
|
||||
function colormapwidget(option) {
|
||||
this.name = option && option.name ? option.name : 'default';
|
||||
this.gravity = option && option.gravity ? option.gravity : false;
|
||||
this.gravity_value = option && option.gravity_value ? option.gravity_value : 0.5;
|
||||
this.count = option && option.count ? option.count : 200;
|
||||
this.mapCount = option && option.mapCount ? option.mapCount : 200;
|
||||
|
||||
this.getColors();
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
// @ts-expect-error TODO: 需要修复 shims
|
||||
import MD from './Spectrogram.md';
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
title: '语图',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MD b="1px solid black" p-4 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,153 +0,0 @@
|
||||
// @ts-nocheck
|
||||
colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];
|
||||
|
||||
colormapwidget.prototype.getGradientColors = function (name) {
|
||||
if (name == 'blue') {
|
||||
return ['#050525', '#000CFF', '#33FFFF', '#F9FFFF'];
|
||||
} else if (name == 'gray') {
|
||||
return ['#050525', '#FBFBFB'];
|
||||
} else if (name == 'cooledit') {
|
||||
return ['#010E19', '#720271', '#D7032C', '#FDBC5F', '#F8FFED'];
|
||||
} else {
|
||||
return ['#050525', '#0000CF', '#00FF20', '#EFFF00', '#FF007C'];
|
||||
}
|
||||
};
|
||||
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
|
||||
colormapwidget.prototype.colorRgb = function (sColor) {
|
||||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
var sColor = sColor.toLowerCase();
|
||||
if (sColor && reg.test(sColor)) {
|
||||
if (sColor.length === 4) {
|
||||
var sColorNew = '#';
|
||||
for (var i = 1; i < 4; i += 1) {
|
||||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
||||
}
|
||||
sColor = sColorNew;
|
||||
}
|
||||
//处理六位的颜色值
|
||||
var sColorChange = [];
|
||||
for (var i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
|
||||
}
|
||||
return sColorChange;
|
||||
} else {
|
||||
return sColor;
|
||||
}
|
||||
};
|
||||
|
||||
// 将rgb表示方式转换为hex表示方式
|
||||
colormapwidget.prototype.colorHex = function (rgb) {
|
||||
var reg = /(\d{1,3}),(\d{1,3}),(\d{1,3})/;
|
||||
var arr = reg.exec(rgb);
|
||||
|
||||
function hex(x) {
|
||||
return ('0' + parseInt(x).toString(16)).slice(-2);
|
||||
}
|
||||
var _hex = '#' + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
|
||||
return _hex.toUpperCase();
|
||||
};
|
||||
|
||||
//计算两个颜色的step个阶梯色
|
||||
colormapwidget.prototype.gradientColor = function (startColor, endColor, step) {
|
||||
var startRGB = this.colorRgb(startColor); //转换为rgb数组模式
|
||||
var startR = startRGB[0];
|
||||
var startG = startRGB[1];
|
||||
var startB = startRGB[2];
|
||||
|
||||
var endRGB = this.colorRgb(endColor);
|
||||
var endR = endRGB[0];
|
||||
var endG = endRGB[1];
|
||||
var endB = endRGB[2];
|
||||
|
||||
var sR = (endR - startR) / step; //总差值
|
||||
var sG = (endG - startG) / step;
|
||||
var sB = (endB - startB) / step;
|
||||
|
||||
var colorArr = [];
|
||||
for (var i = 0; i < step; i++) {
|
||||
//计算每一步的hex值
|
||||
//var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
|
||||
//colorArr.push(hex);
|
||||
colorArr.push([parseInt(sR * i + startR), parseInt(sG * i + startG), parseInt(sB * i + startB)]);
|
||||
}
|
||||
return colorArr;
|
||||
};
|
||||
|
||||
colormapwidget.prototype.setDbRange = function (count) {
|
||||
this.count = count;
|
||||
this.mapCount = count;
|
||||
this.calColors();
|
||||
};
|
||||
|
||||
colormapwidget.prototype.getColors = function () {
|
||||
if (
|
||||
this.name === this.buff_name &&
|
||||
this.gravity === this.buff_gravity &&
|
||||
this.gravity_value === this.buff_gravity_value &&
|
||||
this.count === this.buff_count
|
||||
)
|
||||
return this.buff_colors;
|
||||
|
||||
return this.calColors();
|
||||
};
|
||||
colormapwidget.prototype.getMapColors = function () {
|
||||
return this.buff_mapCountcolors;
|
||||
};
|
||||
|
||||
colormapwidget.prototype.calColors = function () {
|
||||
this.buff_name = this.name;
|
||||
this.buff_gravity = this.gravity;
|
||||
this.buff_gravity_value = this.gravity_value;
|
||||
this.buff_count = this.count;
|
||||
|
||||
this.buff_colors = this._calColorsByCount(this.count);
|
||||
this.buff_mapCountcolors = this._calColorsByCount(this.mapCount);
|
||||
|
||||
return this.buff_colors;
|
||||
};
|
||||
|
||||
colormapwidget.prototype._calColorsByCount = function (count) {
|
||||
//console.log("_calColorsByCount " + count)
|
||||
var colors = this.getGradientColors(this.name);
|
||||
var arr = [];
|
||||
var stepSpan = colors.length - 1;
|
||||
if (!this.gravity) {
|
||||
var step = Math.ceil(count / stepSpan);
|
||||
for (var i = 0; i < stepSpan; i++) {
|
||||
var carr = this.gradientColor(colors[i], colors[i + 1], step);
|
||||
arr = arr.concat(carr);
|
||||
}
|
||||
} else {
|
||||
var pStart = this.gravity_value - 0.2;
|
||||
pStart = pStart < 0 ? 0 : pStart;
|
||||
var pEnd = this.gravity_value + 0.2;
|
||||
pEnd = pEnd > 1 ? 1 : pEnd;
|
||||
pStart = count * pStart;
|
||||
pEnd = count * pEnd;
|
||||
|
||||
for (var i = 0; i < pStart; i++) {
|
||||
arr.push(this.colorRgb(colors[0]));
|
||||
}
|
||||
|
||||
var step = Math.ceil((pEnd - pStart + 1) / stepSpan);
|
||||
for (var i = 0; i < stepSpan; i++) {
|
||||
var carr = this.gradientColor(colors[i], colors[i + 1], step);
|
||||
arr = arr.concat(carr);
|
||||
}
|
||||
|
||||
for (var i = pEnd; i < count; i++) {
|
||||
arr.push(this.colorRgb(colors[colors.length - 1]));
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
|
||||
function colormapwidget(option) {
|
||||
this.name = option && option.name ? option.name : 'default';
|
||||
this.gravity = option && option.gravity ? option.gravity : false;
|
||||
this.gravity_value = option && option.gravity_value ? option.gravity_value : 0.5;
|
||||
this.count = option && option.count ? option.count : 200;
|
||||
this.mapCount = option && option.mapCount ? option.mapCount : 200;
|
||||
|
||||
this.getColors();
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
```bash
|
||||
bunx http-server --port 8000
|
||||
```
|
||||
7380
src/pages/Page/canvas/html-page/konva.2.4.2.min.js
vendored
7380
src/pages/Page/canvas/html-page/konva.2.4.2.min.js
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user