Identify center

I am developing a pie chart in which there will be lines that move around it (for example, a clock, but not necessarily so ordinary). The lines will actually be vectors, so they will have an angle and magnitude. I do this with images (unless someone has a better idea), and I resize the image to represent the value, and I use CSS transforms to change the angle. My problem is that I never know how to position the image so that it looks like the line comes from the center of the circle. Right now I am using the top and left CSS properties to place the image. Does anyone have any ideas for developing an algorithm to support a “centered” image or have an idea for a better way to do this? I would use HTML and the canvas tag, but I need to support IE8.

+3
source share
1 answer

Does anyone have any ideas for developing an algorithm to keep the image "focused" or have an idea of ​​the best way to do this? I would like to use HTML and the canvas tag, but I need IE8 support.

You should use Raphaël:

http://raphaeljs.com/

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, and Internet Explorer 6.0+.

Random demo with circles: http://raphaeljs.com/polar-clock.html

A similar question: “How to chart,” where Raphael gets votes: Which method is best to build for this complex schedule


To answer another part of your question:

CSS . CSS .

transform-origin?

+2

All Articles