CODEWITHSUNDEEP
javascriptraphael
user1409508
user1409508

Reputation: 623

Raphael: How to center circle inside div

I want to create cricle in center of div. Here is my http://jsfiddle.net/uuAjV/3/ If I set amount to 75, it will display correct position of circle, but if I change variable amount to less then 75, then position of circle starts in weird places.
Here is my code

var amount = 75;
var archtype = Raphael("canvas", 500, 500);
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
    var alpha = 360 / total * value, 
        a = (90 - alpha) * Math.PI / 180,
        x = xloc + R * Math.cos(a),
        y = yloc - R * Math.sin(a),
        path;
    if (total == value) {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
        ];
    } else {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, +(alpha > 180), 1, x, y]
        ];
    }
    return {
        path: path
    };
};


var my_arc = archtype.path().attr({
    "stroke": "#f00",
    "stroke-width": 2,
    arc: [100, 100, amount, 100, 100]
}).rotate(180);

I have tried change:

["M", xloc, yloc - R],

to:

["M", 100, 200],

So it would start from bottom od div, but it didn't work

Any help how to fix it? I want to have circle always in middle of div. For example: this is how is should look if amount is set to 25.
enter image description here

Thanks in advance!

Upvotes: 0

Views: 237

Answers (1)

Robert Longson
Robert Longson

Reputation: 124324

I suspect what you're wanting to achieve can be obtained by changing the rotate to rotate(180, 100, 100) so that you're rotating about the centre rather than some other point. I.e.

var my_arc = archtype.path().attr({
    "stroke": "#f00",
    "stroke-width": 2,
    arc: [100, 100, amount, 100, 100]
}).rotate(180, 100, 100);

Upvotes: 1

Related Questions