0

我有一个像谷歌地图一样的拉斐尔论文。

有一个主要内容，就像一张地图，上面有很多叠加层，就像谷歌地图上的那些图钉和标记一样。

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

我目前正在创建数千篇论文，并在缩放发生时手动保持它们的位置。但这会导致大量工作。所以我很想知道是否有可能在一张纸上画出所有东西。并且只是做一些魔术来阻止这些元素在缩放发生时调整大小。就像是：

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

2 回答 2

0

你只需要两张纸。把一个放在另一个上面。缩放底纸时，使用setViewBox. 在最上面的纸上，重新计算位置并平移 ( .transform('T...)) 每个元素。

于 2013-03-26T22:13:29.173 回答
0

那是不可能的。即使您神奇地设置了 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);
},

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

你传递给这个函数的标记是拉斐尔元素。您必须在开始时为其添加正确的默认宽度/高度：

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

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

于 2013-03-27T12:39:19.430 回答