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

修改后的效果如下:

修改后鹰眼

可以根据自己想要的效果进行微调,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值