raphael.js中一个不断增长的圈子

Question

我使用raphael创建了这个数字圈。

在滚动时，我希望重新定位（平移/转换）数字以便分散并且圆圈变大。

我设法通过创建一个新的数字对象来实现，例如

这告诉我我的x / y计算是正确的，但出于某种原因，当我尝试用这些坐标转换当前数字时，它们会立即离开页面滚动。 e.g。

这是滚动的代码，我试图用它来做。

$(window).scroll =>

  i = 0

  while i < n

    px = calc_x('x', i, 0, 20, r)
    py = calc_y('x', i, 0, 20, r)

    crosses[i].transform 't'+px+','+py

我有一种感觉我正在使用转换错误，我只想简单地用新的坐标系重新定位十字架[i]。看一下源代码似乎调整'x'和'y'at是可行的，但这似乎不是拉斐尔的方式？

如果你想查看所有代码http://jsfiddle.net/DDWmg/

，这是一个jsfiddle（我无法工作）

Answer 1

尽管我用陌生的coffeescript说法可以说出来，但你的方法完全合理。唯一的问题是，您遇到了一个最常见的误解，即对变换如何与元素的核心属性进行交互。具体来说，坐标转换会增加这些元素的内在x和y偏移，而不是替换它们。

要修复代码，您需要做的就是计算新x位置和元素内在位置之间的差值，如下所示：

px = calc_x('x', i, 0, 20, r)
py = calc_y('y', i, 0, 20, r)
dx = px - crosses[i].x
dy = py - crosses[i].y
crosses[i].transform 't'+dx+','+dy

或者，您可以使用围绕圆心（cx，cy）的缩放变换进行更简单的计算，数字旋转。为此，您只需根据滚动位置计算“缩放”z，然后使用此类转换

crosses[i].transform 's' + z + ',' + z + ',' + cx + ',' + cy