1

Raphael JSで描画するパスがあります。コードは次のようになります。

var paper = Raphael($('#draw_here')[0], '32', '32');

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!'
});

それは機能し、32 x 32 ピクセルの大きな星を描画します。幅と高さを変更するには？

私はこれをやろうとしました:

var paper = Raphael($('#draw_here')[0], 64, 64);

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!',
    width: 64,
    height: 64
});

...しかし、変更されるのは「紙要素」の幅と高さだけであり、スターの幅と高さではありません。

やりたいことは、マウスカーソルを合わせると星が大きくなるエフェクトを入れたいです。

アドバイスをありがとう！

PS私はパスを自分で書いていません.Iconic setから取得しています。

4

1 に答える 1

7

パスも調整する必要があります。Raphaël Playgroundで試してみてください。

幅と高さの属性は描画する要素のサイズですが、パスの座標は同じです。

簡単なサイズ変更のために、あなたも使うことができます

star.transform("s2");

以前のようにサイズを変更し2xます。

パスを編集して単純にスケーリングしたくない場合はtransform、メソッドを使用してパスのサイズを変更しtranslate、フルパスを特定の値で変更する必要があります。

star.transform("t32,32 s2");

たとえば、これはオブジェクトを32px上32pxから左に移動し2x、以前と同じようにサイズを変更します。

于 2012-05-21T08:19:56.293 に答える