CODEWITHSUNDEEP
javascriptsvgraphael
cupcakekid
cupcakekid

Reputation: 233

A growing circle in raphael.js

I have created this circle of numbers using raphael.

On scroll, I would like the reposition (translate/transform) the numbers to disperse and the circle grow larger.

I've managed to do it by creating a new number object e.g.

This tells me my x/y calculations are correct, but for some reason, when I try to transform the current numbers with those co-ordinates disperse but they instantly move off the page on scroll. e.g.

Here's the code on scroll I'm trying to do that with.

$(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 have a feeling I'm using transform wrong, I'd just like to simply reposition crosses[i] with new coordionates. Looking at the source code it seems that adjusting the 'x' and 'y' attr would work but this doesn't seem to be the Raphael way?

Here's a jsfiddle (that I couldn't get to work) if you'd like to see all the code http://jsfiddle.net/DDWmg/

Upvotes: 0

Views: 515

Answers (1)

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

as best as I can tell in the unfamiliar parlance of coffeescript, your approach is perfectly sound. The only problem is that you've encountered one of the most common misunderstandings of how transforms interact with elements' core attributes. Specifically, coordinate translation adds to those elements' intrinsic x and y offsets rather than replacing them.

To fix your code, all you should need to do is calculate the delta between the new x location and the elements' intrinsic location, something like this:

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

Alternatively, you could shoot for a simpler calculation by using a scaling transform around the center of the circle (cx,cy) that the numerals are rotated around. To do that, you'd simply calculate your 'zoom' z based on scrolling position and then use a transform like this

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

Upvotes: 1

Related Questions