html-page

public/html-page/planispherewidget.js

@@ -0,0 +1,428 @@
+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);
+        });
+    }
+}