キャンバスの周りを移動する円があります。
ユーザーが円の上にマウスを移動すると、半径が 20 から 100 に拡大し、離すと半径の拡大が停止します。
円の中心に円の半径を表示し、大きくなるにつれて更新したいと思います。
私のサークルとテキストコードは以下です。テキストを適切に中央に配置し、円を適切に拡大するには、円とテキストの高さと幅が必要ですか?
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'
});