jtopo鷹眼的樣式修改，(jtopo加鷹眼後，topo圖中有一條連線的顔色被鷹眼邊框顔色覆寫)

最近在寫topo圖的時候，topo圖書莫名其妙出現一條黑色連線，但是資料庫裡并沒有設計黑色的連線，經過反複确定發現隻要顯示鷹眼就會顯示黑線，不顯示鷹眼就不會顯示那條黑線，效果如下圖所示：

看代碼是時候，在jtopo-0.4.8-min.js大概五百二十行左右有這樣的代碼，意識差不多就是鷹眼能看到的邊框，灰色填充，以及拓撲顯示，如果想簡單粗暴的隻改黑線的問題，把拓撲的邊框影藏掉即可，既：代碼中紅色部分b.stroke()注釋掉即可。

paint: function() {
                    if (null != this.eagleImageDatas) {
                        var b = a.graphics;
                        b.save(),
                            b.fillStyle = "rgba(211,211,211,0.3)",//鷹眼框左右兩邊填充顔色
                            b.fillRect(a.canvas.width - this.canvas.width - 2 * this.hgap, a.canvas.height - this.canvas.height - 1, a.canvas.width - this.canvas.width, this.canvas.height + 1),
                            b.fill(),
                            b.save(),
                            b.lineWidth = 1,
                            b.strokeStyle = "rgba(0,0,0,1)",
                            b.rect(a.canvas.width - this.canvas.width - 2 * this.hgap, a.canvas.height - this.canvas.height - 1, a.canvas.width - this.canvas.width, this.canvas.height + 1),
                            //b.stroke(),
                            b.restore(),
                            b.putImageData(this.eagleImageDatas, a.canvas.width - this.canvas.width - this.hgap, a.canvas.height - this.canvas.height),
                            b.restore()
                    } else this.eagleImageDatas = this.getData(a)
                },
           

我為了頁面能稍微好看一點，對這段代碼進行了修改，代碼如下：

paint: function() {
                    if (null != this.eagleImageDatas) {
                        var b = a.graphics;
                        b.save(),
                            b.fillStyle = "rgba(0,0,0,0.5)",//鷹眼框左右兩邊填充顔色
                            //fillRect繪制鷹眼顯示topo節點的地方context.fillRect(x,y,width,height);x,y是矩形左上角的坐标，width和height是矩形的寬高---既鷹眼灰色矩形
                            // console.log('x坐标',a.canvas.width - this.canvas.width - 2 * this.hgap);
                            // console.log('y坐标', a.canvas.height - this.canvas.height - 2.5);
                            // console.log('長',a.canvas.width - this.canvas.width);
                            // console.log('寬',this.canvas.height + 3)
                            b.fillRect(a.canvas.width - this.canvas.width - 0.1 * this.hgap, a.canvas.height - this.canvas.height - 2.5, 202, 163),
                            // b.fill(),
                            // b.save()
                            // b.lineWidth = 1,//線條寬度
                            // b.strokeStyle = "rgba(0,0,255,1)",//strokeStyle線條顔色
                            // b.rect(a.canvas.width - this.canvas.width - 2 * this.hgap, a.canvas.height - this.canvas.height - 1, a.canvas.width - this.canvas.width-980, this.canvas.height -2)
                            //b.stroke()
                            b.restore(),
                            b.putImageData(this.eagleImageDatas, a.canvas.width - this.canvas.width - 0.01* this.hgap, a.canvas.height - this.canvas.height - 1),
                            b.restore()
                    } else this.eagleImageDatas = this.getData(a)
                },
           

修改後的效果如下：

可以根據自己想要的效果進行微調，