其实JTOTO中报警的处理是通过设置:alarm、alarmColor和setImage(url)来实现的。
alarm属性不为null表示有节点报警;
alarmColor属性设置报警时图片的颜色。
报警时修改图片颜色为alarmColor的代码在jtopo-min.js中的changeColor方法中实现,具体代码如下:
function changeColor(a,b,c){
var d=c.split(","),
e=parseInt(d[0]),
f=parseInt(d[1]),
g=parseInt(d[2]),
h=canvas.width=b.width,
i=canvas.height=b.height;
a.clearRect(0,0,canvas.width,canvas.height)
,a.drawImage(b,0,0);
for(var j=a.getImageData(0,0,b.width,b.height),k=j.data,l=0;h>l;l++)for(var m=0;i>m;m++){var n=4*(l+m*h);0!=k[n+3]&&(null!=e&&(k[n+0]+=e),null!=f&&(k[n+1]+=f),null!=g&&(k[n+2]+=g))}
a.putImageData(j,0,0,0,0,b.width,b.height);
var o=canvas.toDataURL();
return o
}
function genImageAlarm(a,b){
var c=a.src+b;
if(alarmImageCache[c])return alarmImageCache[c];
var d=new Image;
return d.src=changeColor(graphics,a,b),alarmImageCache[c]=d,d
}
但是有些图片报警效果并不如意。所以我做了些修改:
function changeColor(a, b, c) {
var d = c.split(","), e = parseInt(d[0]), f = parseInt(d[1]), g = parseInt(d[2]), h = canvas.width = b.width, i = canvas.height = b.height;
a.clearRect(0, 0, canvas.width, canvas.height), a.drawImage(b, 0, 0);
var j= a.getImageData(0, 0, b.width, b.height),k= j.data,len=k.length;
for (var l = 0; h > l; l++) for (var m = 0; i > m; m++) {
var n = 4 * (l + m * h);
0 != k[n + 3] && (null != e && (k[n + 0] += e), null != f && (k[n + 1] += f), null != g && (k[n + 2] += g))
}
//上面的代码不能注释,否则图片会变小
var qrcolor=c.split(',');
for(var i=0;i<len;i+=4){
k[i] = qrcolor[0];
k[i+1] = qrcolor[1];
k[i+2] = qrcolor[2];
}
a.putImageData(j,0, 0, 0, 0, b.width, b.height);
var o = canvas.toDataURL();
return o
}