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元素与控件缩放重叠

回答

相关问题