Question

我有一张拉斐尔纸，就像谷歌地图一样。

有一个主要内容就像地图一样，许多叠加层都附在它上面，就像谷歌地图上的那些引脚和标记一样。

因此，当我进行缩放时，我希望缩放主要内容，并且这些叠加需要移动到正确的位置但保持原始大小。（例如，在谷歌地图中，当我缩放城市时，这些叠加层将始终附加到屏幕上具有相同大小的正确地址。）

我目前正在制作数千篇论文，并在缩放发生时继续手动保持其位置。但这会引起很多工作。所以我很有兴趣知道是否有可能在一篇论文中绘制所有内容。并且只是做一些魔法来阻止那些元素在缩放发生时调整大小。类似的东西：

    paper.rect(0, 0, 10, 10).attr({resize: false})

Answer 1

你只需要两篇论文。把一个放在另一个上面。缩放底部纸张时，请使用setViewBox。在顶部纸张上，重新计算位置并翻译（.transform('T...)）每个元素。

Answer 2

那是不可能的。即使你神奇地设置了resize：false，你也需要将每个标记移动到一个新位置。

我可以给你一个我自己使用的功能：

markAdjustPosition : function(mark){
        var w = mark.data('width');
        var h = mark.data('height');
        var dx = w/2 - w/(2*_data.scale);
        var dy = h - h/_data.scale;
        mark.attr({width: w/(_data.scale), height: h/(_data.scale)}).transform('t'+dx+','+dy);
},

此功能将重新定位标记，考虑到标记的目标点位于底部边缘的中间（如Google地图中的标记）。

你传递给这个函数的

标记是拉斐尔的元素。您必须在开头添加正确的默认宽度/高度：

Mark.data("width") = 12;
Mark.data("height") = 24;

_data 是插件中所有数据的全局对象， _data.scale 是当前比例（您需要在每个缩放级别计算）。< / p>

是否有可能在Raphael中创建unzoom元素？

2 个答案: