Calculate the center of a circle to align text in the middle
I have a circle that moves around a canvas.
When the user mouses down on the circle, the radius expands from 20 to 100
and when they release it it stops growing.
I want to display the radius of the circle in the center of it and have it
update as it grows.
My circle and text code is below. Do I need a height and width for the
circle and text for the text to center properly, and still have the circle
grow properly?
var circle = new Kinetic.Circle({
x : stage.getWidth() / 2,
y : stage.getHeight() / 2,
radius : 20,
fill : 'grey',
stroke : 'black',
strokeWidth : 1,
});
var radiusText = new Kinetic.Text({
x : circle.getX(),
y : circle.getY(),
text : '10',
fontSize : 10,
height : (circle.getAttr('radius') * 2) / 2,
width : (circle.getAttr('radius') * 2) /2,
fontFamily : 'Verdana',
fill : '#000',
align : 'center'
});
http://jsfiddle.net/ZQEer/
No comments:
Post a Comment