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); }); } }