寫法記錄

setInterval(function(){
            $("img").each(function(){
                if($(this).width() > 300 || $(this).height() > 300){
                    var imgID;
                    //alert($(this).attr('src'));
                   
                    if(!$(this).data('tagtoo_imgobj')){
                        imgID =  new Date().getTime()
                        $(this).data('tagtoo_imgobj', imgID);
                        $(this).addClass("tagtoo_imgobj"+imgID);
                    }
                    else{
                        imgID = $(this).data('tagtoo_imgobj');
                    }
                   
                    //alert(imgID);
                   
                    var top = $(this).offset().top;
                    var left = $(this).offset().left;
                    var width = $(this).width();
                    var height = $(this).height();
                    //if(top != $(this).data('top') || left != $(this).data('left') || width != $(this).data('width') || height != $(this).data('height')){
                        $(this).data('top', top);
                        $(this).data('left', left);
                        $(this).data('width', width);
                        $(this).data('height', height);
                        $(".tagtoo_regional_tag"+imgID).remove();
                        Tagtoo.LoadTagData("",imgID);
                    //}
                }
            });
        }, 800);


用以上的程式碼下去實測, 會發現以下事實:
1. 如果用圖片的位置和長寬來做為判斷圖片是否有更動的依據, 會發現這些資訊在最初有改變過一次, 但後來都沒有改變, 也因此根本不會進到if 那個狀況內, 也就跟本不會LoadTagData

2....

// 想法: 在網頁load完成後, 去查詢每個img 的狀況, 如果發現它的狀態有變動, 就重繪一次tags
// 問題: 這樣仍有很大的機率標籤會歪掉!  似乎是img 的width 和 height 沒有真正進入視線範圍是 // 不會正確

--> 只能用進入視線做為畫tag之判斷依據了... 如果要做到不mouseover 就顯示tag的話


結果: 總覺得好像標籤的顯示和"圖片有沒有進入視線"有關, 最後trace 到root發現原來是這樣的!

原本是用mouseenter 當成改變鎖定image 物件的條件, 也就是說, 假如滑鼠移到一圖片上, 全域變數像Tagtoo.imgWidth 和 Tagtoo.imgHeight 就會改變, 圖片也會被嵌上一個class name 叫做 "tagtoo_plugin_active_img" , 因為以前的架構下同一時間只會有一個這樣的物件, 所以不會出問題, 然而現在架構改了, 變成不必靠滑鼠移過來驅動圖片標籤, 所以這樣的工作難度也增加, 以前在setHotTags() 裡頭會去計算tags的位置, 用calculateDotPos() 這個函式, 之前一直沒有檢察到這個函式, 然而剛剛看過以後, 發現裡面有個關鍵的地方出了問題, 之前沒改到, 注意以下程式碼黃色底的部分:


Tagtoo.calculateDotPos = function(desp, imgID){
    var imgclass = "tagtoo_imgobj" + imgID;
var imgobj = $('img[class*="'+imgclass+'"]');
var img_left_top_cordX = imgobj.offset().left;
var img_left_top_cordY = imgobj.offset().top;
var ratioX = 0;
var ratioY = 0;
var tag_cor = new Array();

var ratios = desp.split(",");
if(ratios.length == 6){
// calculate the new dot "desp" format(from old dot desp)
var desp_string = Tagtoo.reCalculateDotDesp(desp);
var desps = desp_string.split(",");
ratioX = parseFloat(desps[0])/1000;
ratioY = parseFloat(desps[1])/1000;
}
else{
ratioX = parseFloat(ratios[0])/1000;
ratioY = parseFloat(ratios[1])/1000;
}
// calculate the absolute coordinate of this reginonal tag(dot)
tag_cor[0] = ratioX * Tagtoo.imgWidth+ img_left_top_cordX;
tag_cor[1] = ratioY * Tagtoo.imgHeight+ img_left_top_cordY;
return tag_cor;
}

注意到了嗎? 他仍是沿用舊的架構, 去讀Tagtoo.imgWidth, 而這個變數是共用的, 不保險的, 在滑鼠沒有移到圖片上時, 這個變數根本就會是錯的(不會是你目前看的圖片的長寬), 會是最後一次滑鼠移到圖片上時該圖片的長寬, 如果標籤是依據此而算的, 鐵定會歪, 我改成這樣以後就好了:


Tagtoo.calculateDotPos = function(desp, imgID){
    var imgclass = "tagtoo_imgobj" + imgID;
var imgobj = $('img[class*="'+imgclass+'"]');
var img_left_top_cordX = imgobj.offset().left;
var img_left_top_cordY = imgobj.offset().top;
        var imgWidth = imgobj.width();
        var imgHeight = imgobj.height();
var ratioX = 0;
var ratioY = 0;
var tag_cor = new Array();

var ratios = desp.split(",");
if(ratios.length == 6){
// calculate the new dot "desp" format(from old dot desp)
var desp_string = Tagtoo.reCalculateDotDesp(desp);
var desps = desp_string.split(",");
ratioX = parseFloat(desps[0])/1000;
ratioY = parseFloat(desps[1])/1000;
}
else{
ratioX = parseFloat(ratios[0])/1000;
ratioY = parseFloat(ratios[1])/1000;
}
// calculate the absolute coordinate of this reginonal tag(dot)
tag_cor[0] = ratioX * imgWidth + img_left_top_cordX;
tag_cor[1] = ratioY * imgHeight + img_left_top_cordY;
return tag_cor;
}


注意到裡面差異了嗎? 這就是為什麼之前會覺得好像出現在視野裡的圖片上的tag會排列得比較整齊的原因~