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

Question

我用拉斐尔创建了这个数字圈。

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

我已经设法通过创建一个新的数字对象来做到这一点，例如

这告诉我我的 x/y 计算是正确的，但由于某种原因，当我尝试用这些坐标变换当前数字时，这些坐标分散但它们在滚动时立即移出页面。例如

这是我尝试使用的滚动代码。

$(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

我感觉我使用的变换错误，我只想简单地用新的坐标重新定位 crosses[i]。查看源代码似乎可以调整“x”和“y”属性，但这似乎不是拉斐尔的方式？

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

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

Answer 1

就我所知的咖啡脚本的不熟悉用语而言，您的方法非常合理。唯一的问题是您遇到了关于变换如何与元素的核心属性交互的最常见误解之一。具体来说，坐标平移会增加这些元素的固有 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