私は RaphaelJS でインタラクティブなマップを作成しており、かなりうまく機能していますが、現在行き詰まっています。マップの各地域にはラベルがあり、ホバーすると、パスが塗りつぶされ、ラベルの色が変わる必要があります。
領域を塗りつぶすためにアニメーションをトリガーしています。同じ関数でテキストをアニメーション化することもできますが、テキストにマウスオーバーすると、領域のマウスアウトとして扱われます。だから私はそれらが一緒にアニメーション化する必要があります.
セットを使用してみましたが、すべてがどのように機能するか正確にはわかりません。これまでの試みは失敗しました。ここにいくつかのコードがあります、
私のパスとテキストはすべて次のように繰り返されます。
var text_1808 = rsr.set();
text_1808.push(rsr.text(0, 0, '1808'));
text_1808.attr({
fill: '#0A4E74',
"font-family": 'source-sans-pro',
"font-size": '14.9932',
'stroke-width': '0',
'stroke-opacity': '1',
parent: 'text_1808'
});
text_1808.transform("m0.9587 0 0 1 194.3486 207.7305").data('id', 'text_1808');
var path_1808 = rsr.set();
path_1808.push(rsr.path("M 204.229,244.362 204.229,227.229 182.418,227.229 182.418,170.131 196.231,170.131 196.231,159.05 190.202,159.05 190.202,146.476 223.082,146.476 223.082,153.354 222.255,153.354 222.255,175.604 246.281,175.604 246.281,244.362 z"));
path_1808.attr({
fill: '#ffffff',
stroke: '#0A4E74',
parent: 'suite_1808',
"stroke-linecap": 'round',
"stroke-linejoin": 'round',
'stroke-width': '1',
'stroke-opacity': '1'
}).data('id', 'path_1808');
次に、アニメーションを次のように呼び出します
var suites = [path_q, path_r, path_s, path_t, path_u, path_1808, path_w];
var labels = [text_1808, text_ac, text_ad, text_ae, text_af, text_ag, text_ah];
for (i = 0; i <= suites.length; i++) {
el = suites[i];
if(el !== undefined){
el.mouseover(function() {
this.animate({ cursor: 'pointer', fill: '#0A4E74' }, 200);
});
el.mouseout(function() {
this.animate({ fill: '#ffffff' }, 200);
});
el.click(function() {
this.animate({ fill: '#EC008C' }, 200);
});
}
}
したがって、このコードは領域を適切に塗りつぶすという点で機能しますが、テキストの上にマウスを置くとマウスアウトがトリガーされます。どんな提案でも大歓迎です！