マウス位置の取得と、動的表示。

jQueryで以下のようにすると、マウス位置を取得できて便利でした。
(http://api.jquery.com/mousemove/ 参照)

       $(function(){
            $("#canvas").mousemove(function(e){
            X=e.clientX;
            Y=e.clientY;
            });
        });

ラファエル上で取得した位置をグローバル変数で受け取り、以下のように使うと、動的に地図の場所名などが表示できて便利です。
        $("#"+state).css({display:"block",left:X,top:Y});

ラファエルの地図と同時に使っています。

Raphaelでクリッカブルマップ、やっと実装。

Raphaelで地図をクリッカブルにしようと思い、IE対策で苦労していた。
最終的に以下のフォーラム投稿が参考になったので、メモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/b2f6afcb16d06bbd/a2a1d338301f26c2?lnk=gst&q=map#a2a1d338301f26c2

st[0].onmouseup = function() {
      alert("");

};

のようにしてonmouseupで処理し、その中に実行したい関数を書けばOKだった。

(要するに、IEにおいては、attachEventしてのonclickやjQueryのclickでは、(on)mouseover ,mouseoutなどと並列処理ができなかったため、onmousedownかonmouseupにした、というわけです。）

RaphaelとGoogle map APIの融合ライブラリ（cartgrapher.js)

Raphaelをベースにし、Google map APIを使用して、
エリアごとの人口分布地図や、
ツイッターユーザーの分布などを表示させる、といったことができるライブラリが公開されていた。

http://cartographer.visualmotive.com/

すごい。

RaphaelとjQueryの併用メモ

jQueryとRaphaelを併用したかったので、やり方を探していて、載っていたのでメモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/5d1afd18d3670d53/ca94967a53dc41c9?lnk=gst&q=jQuery#ca94967a53dc41c9

$(window).load(function() {
  // put your Raphaël draw code here

}); 

と記述すれば動く、というのでやってみたら動いた。

jQueryのDOM操作で、Raphaelが動かせるのはとてもありがたい。

Raphaelでクリッカブルマップの参考になるサイト。

Raphaelを使ってクリッカブルマップを作ろうと思っていますが、
思っている通りのことを実現しているサイトがあったのでリンクメモです。
http://freejoblistings.ca/
（■追記：jsのソースを見ると、あまりに詳細で難解なので、現時点では無理だと判明。。
すごいな。）

以下のフォーラムで作者の人がクリッカブルなマップについて何か書いてるのでメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/d59a01dcd3c8130d?lnk=gst&q=freejoblistings#d59a01dcd3c8130d

liveでRaphaelを触って学べるサイト

raphael_liveというページがありました。
コードを書きかえると、すぐその場で実行でき、Raphaelが効率的に学べそうです。
http://craic.com/tutorials/javascript/raphael_live/raphael_live.html

Flashにおけるwonderflみたいな感じですね。
簡易的な。

素晴らしい。

Raphaelでelementにmethodを適用させる方法メモ。

Raphaelで、あるelementにメソッドを適用する方法のメモです。

Raphael.el.red = function () {
    this.attr({fill: "#f00"});
};

というように、elなどで表したものをthisでattrを適用させる、
といったように宣言しておき、

paper.circle(100, 100, 20).red();

あとは普通にelのところに、オブジェクトを書くだけ。

解説は以下にありました。
http://raphaeljs.com/reference.html#plugins-elements

とあるプラグインのソースの意味が分からないので学習中。。。

getColor()はスペクトラム上の次の色を返すらしい。

raphaelでgetColor()は、スペクトラム上で次の色をオブジェクトに返す機能らしい。
便利だ。


http://raphaeljs.com/reference.html#getcolor

Raphaelでオブジェクトを前面に配置するのはtoFront();

オブジェクトを前面に配置したかったのですが、
toFront();
で実現できると知り、便利でした。

var c = paper.circle(10, 10, 10);
c.toFront();

みたいな。

http://raphaeljs.com/reference.html#toFront 

でも、これを適用してもフロントに行ってくれない問題が起きて、

悩んだら、

既に前のオブジェクトにtoFrontが適用されていました。

そちらをコメントアウトしたらOKに＾＾

Raphaelで文字サイズを大きく（メモ）

Raphaelで、文字サイズを大きくしたりするのができずに困ってました。
http://raphaeljs.com/reference.html
ドキュメントを見てもよくわからず、attr({font-size:"20px"});とかをつけてもうまくいかず。。

最終的に、

var t= paper.text(120, 100, "Test string")
.attr({font: '50px Fontin-Sans, Arial', opacity: 0.5});

のようにしたら、文字サイズが大きくなりました。
(もちろんopacityはおまけです。二つのフォント指定はひとつにしてもいけました。サイズだけだとダメでした。）

参考にしたのは、Raphaelのこちらのサンプルコードです。
http://raphaeljs.com/text-rotation.html

■追記：
他でfontサイズを指定したとき、
txt.attr("font-size","130");
のような形で("font-size","30");
などのように両方をダブルクオーテーションで囲ってやったらうまくいきました。