Question

我正在RaphaelJS制作一张互动地图并让它工作得很好，但我现在卡住了。地图的每个区域都有一个标签，在悬停时，路径需要填写，标签需要更改颜色。

我有动画触发来填充区域，我也可以在同一个函数中为文本设置动画，但是，当鼠标悬停在文本上时，它会将其视为区域上的mouseout。所以我需要他们一起动画。

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

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

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

}

}

所以这段代码的工作原理是它正确地填充了区域，但是当你将鼠标悬停在文本上时会触发鼠标。任何和所有建议都赞赏！

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

    }
}

Raphael.js两种不同的动画，一种悬停

1 个答案: