向jQuery圖像地圖插件添加反向高亮顯示？

我正在使用jQuery Map Hilighter插件，但是我不想在每個區域上淡出一片黑色補丁，而是想要將其反轉，而不是使周圍區域變暗，從而使懸停區域保持相同的顏色。向jQuery圖像地圖插件添加反向高亮顯示？

我已經看過插件的代碼，它似乎使用畫布元素（和我猜想的MS）來做突出顯示。然而，Firebug是不是很樂於提供確切位置定義形狀 - 在演示上面只是顯示了這一點：

<canvas style="border: 0pt none ; padding: 0pt; width: 960px; height: 593px; position: absolute; left: 0pt; top: 0pt; opacity: 1;" height="593" width="960"></canvas>

我不能看到任何指定元素形狀徘徊。這是出現要被創建形狀JS的一部分：

add_shape_to = function(canvas, shape, coords, options) { 
    var i, context = canvas.getContext('2d'); 
    context.beginPath(); 
    if(shape == 'rect') { 
     context.rect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]); 
    } else if(shape == 'poly') { 
     context.moveTo(coords[0], coords[1]); 
     for(i=2; i < coords.length; i+=2) { 
      context.lineTo(coords[i], coords[i+1]); 
     } 
    } else if(shape == 'circ') { 
     context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, false); 
    } 
    context.closePath(); 
    if(options.fill) { 
     context.fillStyle = css3color(options.fillColor, options.fillOpacity); 
     context.fill(); 
    } 
    if(options.stroke) { 
     context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity); 
     context.lineWidth = options.strokeWidth; 
     context.stroke(); 
    } 
    if(options.fade) { 
     fader(canvas, 0); 
    } 
};

來源

2009-11-13 DisgruntledGoat

的元件的形狀被定義爲在HTML代碼中的<map>元件內部<area>元件。

簡單回答你的問題是在默認的context.beginPath();行之後添加這樣的事情

if (options.inverseFill) { 
    context.rect(0,0, canvas.width,canvas.height); 
    }

，然後一個選項：inverseFill: true,，然後確保你的影像地圖的所有區域在相同的順時針方向上聲明。

會發生什麼情況是您定義了一個用於定義深色補丁的路徑的額外子路徑，並且當您填充時，只要子路徑的圈數小於或等於零，則重疊區域（即原始補丁）將抵消取消，導致你想要的倒行爲。

如果您的面多邊形定義可以在兩個方向上旋轉，則會變得相當複雜。例如，如果您對美國地圖的原始MapHilight演示進行上述操作，則只有一些狀態的行爲纔會正確，因爲它們的形狀是按照正確的順時針方向定義的 - 其餘部分保持黑暗狀態，因爲它們的繞組編號是錯誤的符號。

如果你有在影像地圖定義的完全控制，我的建議是留在這一點，只是確保所有領域走同樣的方向（即，只是扭轉每個不工作區域的COORDS名單）。

如果不是，那麼在初始時，您需要預先計算每個形狀的圈數。這很可能涉及遍歷點列表和總結每兩個連續段之間的角度 - 使用atan2計算。然後在add_shape_to函數中以正確的方向遍歷畫布的四個角。

無論如何，我希望幫助

更新：

對不起，我沒看到你的評論較早。的圓形區域，在add_shape_to功能，具有

} else if(shape == 'circ') { 
    context.closePath(); 
    context.moveTo(coords[0] + coords[2], coords[1]); 
    context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true); 
    context.closePath(); 
    }

更換 } else if(shape == 'circ') {部分關閉之前和之後的子路徑，然後移動到正確的地方，以避免討厭的紅線頂端角落，然後將逆時針參數更改爲true以匹配外部矩形。根據需要修改

來源

2009-11-16 17:48:47 ivancho

嗨，謝謝你的迴應。我已經實現了你所說的，它似乎適用於某些多邊形區域 - 我假設其他人都倒退了，所以我會盡快對其進行排序。但是，我無法用圓形元素來解決它。有任何想法嗎？ – DisgruntledGoat 2009-11-24 21:33:38

向jQuery圖像地圖插件添加反向高亮顯示？

回答

相關問題