CODEWITHSUNDEEP
javascriptpaperjs
jalopezp
jalopezp

Reputation: 904

How do I get the center of a circle in paper.js?

I am trying out paper.js and I've made a few circles: 

var circle = new Shape.Circle({
   center: [100,100],
   radius: 50,
   strokeColor: 'black',
   strokeWidth: 2
});

This draws a circle with center [100,100] (which could also be a point: Point({x:100, y:100});) and radius 50. This is great, this is a circle.

If I want to get the radius of a circle, I can do this: 

circle.radius; // returns 50

But I don't know how to get the center back again. Part of the reason I guess is that Shape.Circle returns a Shape object, which does not have a center parameter (documentation here), but surely I can get this point back somehow. Does anyone know how?

Upvotes: 0

Views: 1793

Answers (3)

Nandan
Nandan

Reputation: 172

Use :

circle.center[0] and circle.center[1]

cause its an array 

<script>

var circle = {
   center: [100,100],
   radius: 50,
   strokeColor: 'black',
   strokeWidth: 2
};

console.log(circle.center[0]);
</script>

Update: Sorry, I haven't read your question properly. You can use circle.position to get the position of center.

Upvotes: -1

Epthelyn
Epthelyn

Reputation: 71

Since circles are centred on the position they're created at, you can get the position (as a Point) and the x and y values from that:

var circle = new Shape.Circle({
    center: [100,100],
    radius: 50,
    strokeColor: 'black',
    strokeWidth: 2
});

console.log(circle.position.x, circle.position.y); //100 100

From http://paperjs.org/reference/shape/#position

Upvotes: 2

slebetman
slebetman

Reputation: 114024

While the circle object does not have a center property, if you read the docs properly you will find that it does have a bounds property.

In graphics, a "bound" is the rectangle that fully contains your object. So for a circle, the bounds will be a rectangle that touches the circle on the left, right, top and bottom. Therefore the center of the bound is the center of the circle (note: this is not always true for all objects depending on your definition of "center").

Paper.js will give you:

circle.bounds.x
circle.bounds.width
circle.bounds.y
circle.bounds.height

Therefore the center of the circle is:

var centerX = circle.bounds.x + circle.bounds.width/2;
var centerY = circle.bounds.y + circle.bounds.height/2;

Note: You will have to try this out yourself as I have zero experience with paper.js. I just read the docs

Upvotes: 1

Related Questions