0

キャンバスの周りを移動する円があります。

ユーザーが円の上にマウスを移動すると、半径が 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'
});

http://jsfiddle.net/ZQEer/2/

4

1 に答える 1