Raphael元素與控件縮放重疊

我遇到了一個問題，即我的縮放按鈕確實會縮放元素，但隨着元素的增長它們會重疊。Raphael元素與控件縮放重疊

這裏是鏈接：http://jsfiddle.net/knottAverage/ArKDp/28/

這裏是我使用變焦功能+

$maxIcon.click(function(e) { 
mapZoom /= mapMultiplier; 
rsrGroupies.scale(mapZoom); 
e.stopPropagation(); 
e.preventDefault(); 
rsr.setViewBox(0, 0, rsr.mapWidth, rsr.mapHeight); 
});

預先感謝您的幫助。

來源

2012-06-18 user1431083

Mass-scaling該集正在做它應該做的 - 它縮放每個元素。這需要額外的邏輯來將每個元素相對於中心點進行轉換。

但我相信viewbox可以用來實現完全相同的效果。 This variation of your fiddle演示如何根據縮放調整畫布的視圖區域，並添加拖放以支持導航到縮放的場地地圖的隱藏區域。可悲的是，它也是可怕的破 - 確實，功能足以指出一個可能的解決方案向量。我希望你會發現它有幫助，而不是真氣！

最棘手的可能是變焦按鈕（和任何其他導航組件）將需要翻譯和縮放到否定可視區域的操縱。否則，他們會放大並隨着畫布的其餘部分一起移動！建議您在第一張紙的上面創建第二張紙（使用絕對定位和適當的z-index），並將導航元素放置在最上層。

祝你好運。

來源

2012-06-18 23:34:32

感謝您對nav元素的幫助和好的想法。我創建導航元素只是爲了在ie7和8中呈現。我的原始版本可行，但在ie7和8中非常緩慢，所以我認爲回覆到控制元素將是更好的體驗。如果您有任何建議，我很樂意聽到它，並再次感謝您的幫助。 – user1431083

將變焦按鈕作爲單獨的PNG圖像（通過jQuery）添加到SVG容器的頂部，使它們與SVG獨立，因此它們不會隨着viewBox更改（這是我對SVG映射所做的操作）進行放大。

來源

2013-02-27 07:45:26 oyatek

哦，不，這是個人形狀，而不是實際的按鈕。我能夠修復形狀的重疊，但使用setViewBox，然後創建不同的畫布大小尺寸爲「var」s我能夠拉出一個非常漂亮的縮放功能，並使用jQuery UI可以得到一個可拖動的去。即使在ie6中，這些組合的速度也非常快。 – user1431083

Raphael元素與控件縮放重疊

回答

相關問題