429 lines
12 KiB
JavaScript
429 lines
12 KiB
JavaScript
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);
|
||
});
|
||
}
|
||
}
|