3

Raphael JS を使用してベクトル グラフィック、特に円を作成しました。

この円をタイトルの文字「O」として使用したいと思います。また、クリックするとアニメーション化される円でもあります。これが可能かどうかを知りたいです。

これは、私が言おうとしていることをよりよく説明するためのフィドルです。

html は非常に単純です。

<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>

ここにjsfiddleがあります

基本的に円は「Notre」の2文字目で、クリックすると画面右に移動します。他のことは後で起こりますが、この効果は私が得ようとしているものです....

4

1 に答える 1

4

Raphaelキャンバスをスパンに配置するのは賢い方法ですが、結局のところ、ネイティブHTMLとRaphaelをこのように混合したことを後悔することになると思います。そのためには、Raphaelでより適切に処理およびサポートされる多くの絶対位置とzインデックスが必要になる可能性があります。

Raphaelでテキストを簡単に描くことをお勧めします。

var text = r.set();
text.push(
    r.text(10,20,"N"),
    r.text(70,20,"TRE APPROCHE :")
);
text.attr({
    'text-anchor': 'start',
    'font-size':'36px'        
});

SVG / VMLのスタイルが不十分な場合は、画像を使用することもできます。繰り返しになりますが、Raphael（paper.image（））を使用してその画像をキャンバスに配置することをお勧めします。

更新されたフィドルでは、キャンバスをロゴの幅のdivにしたことに注意してください。

フィドルを更新しました。

于 2012-12-05T14:24:26.393 に答える