0

我在 RaphaelJS 中绘制了一个交互式地图并且它工作得很好，但我目前被卡住了。地图的每个区域都有一个标签，悬停时，需要填写路径并且标签需要更改颜色。

我已经触发了动画来填充该区域，我还可以在同一函数中为文本设置动画，但是，当您将鼠标悬停在文本上时，它会将其视为该区域上的鼠标移出。所以我需要他们一起制作动画。

我一直在尝试使用 set，但我不确定它应该如何工作，到目前为止我的尝试都没有成功。这是一些代码，

我的路径和文本都像这样重复：

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); 
     });

}

}

因此此代码的工作原理是它正确填充了该区域，但是当您将鼠标悬停在文本上时会触发鼠标移出。任何和所有建议表示赞赏！

4

1 回答 1

1

集合有时对我发现的事件有点繁琐。您可以设置一个从一个到另一个的 id，然后使用它并将两个动画设置在一起（这可能取决于最终解决方案的复杂程度）。我还会在描述而不是文本中将集合称为集合，否则会更加混乱。这是一个可以工作的例子......小提琴在这里http://jsfiddle.net/baYWR/2/

var text_1808 = rsr.text(50, 50, '1808');
text_1808.id = 'text_1808';
var set_1808 = rsr.set();  ///use one set for the lot, could be handy for manipulation later, rather than one set for each object, unless you will add to those.

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");

set_1808.push( text_1808 );


var path_1808 = 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.id = 'path_1808';
path_1808.attr({
  fill: '#ffffff',
  stroke: '#0A4E74',
  parent: 'suite_1808',
  "stroke-linecap": 'round',
  "stroke-linejoin": 'round',
  'stroke-width': '1',
  'stroke-opacity': '1'
}).data( 'textid', 'text_1808' );
set_1808.push ( path_1808 );

var suites = [path_1808];
//var labels = [text_1808];

for (i = 0; i <= suites.length; i++) {
    el = suites[i];

    if(el !== undefined){

        el.mouseover(function() {
           this.animate({ cursor: 'pointer', fill: '#0A4E74' }, 200); 
           rsr.getById( this.data('textid') ).animate({ fill: '#0A4E74' }, 20);
        });

        el.mouseout(function() { 
            this.animate({ fill: '#ffffff' }, 200); 
            rsr.getById( this.data('textid') ).animate({ fill: '#0A4E74' }, 20);
        });

        el.click(function() { 
             this.animate({ fill: '#EC008C' }, 200); 
             rsr.getById( this.data('textid') ).animate({ fill: '#EC008C' }, 20);
        });

    }
}
于 2013-10-31T15:58:35.523 回答