경로 집합에서 Raphael의 호버 이벤트 적용

Question

호버 설정 이벤트에 호버 이벤트를 넣으면 모든 경로에 efect가 적용됩니다. 따라서 경로를 지나갈 때, 전체 경로의 채우기가 동시에 변경되지 않고 단일 경로의 채우기가 변경됩니다.

예를 들어,이지도에서 마우스로 캐나다를 통과하면 본토의 색이 바뀌지 만 모든 얼음 섬은 같은 색으로 유지됩니다.

이것은 내 코드입니다.

drawSets: function(){ 
    for (country in this.setsArr){ 
     var setset= R.set(); 
     var zone = this.setsArr[country]; 
     for (group in zone){ 
      var path = R.path(this.setsArr[country][group].path); 

      setset.push(
       path 
      ); 
     } 

     var attri = this.options.attributes; 
     setset.attr(attri); 
     var x = this.setsArr[country].translate.x; 
     var y = this.setsArr[country].translate.y; 
     setset.translate(x,y); 

     setset.hover(function(){ 
      this.animate({ 
       fill: '#000' 
      }, 300); 
     }, function(){ 
     this.animate({ 
      fill: attributes.fill 
     }, 300); 
    }); 

    } 
}, 

저는 Raphaels 애니메이션 방식을 사용하고 있습니다.

이 문제를 어떻게 해결할 수 있습니까? 여기

여기

http://www.megaupload.com/?d=GHQ5HATI

그리고

이 하나를 포함하는 또 다른 질문입니다 ... 전체 응용 프로그램의 파일입니다.

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

Answer 1

이것은 당신이 강조하는 데 사용하는 이벤트가 당신이 생각하는 객체를 참조하지 않는 노년 문제이다. 특히 이 참조.

자정입니다. 피곤해서 코드가 엉망입니다. 여기에 내가 한 일이있다

경로 집합을 래핑하는 개체를 만들고 mouseover 이벤트를 설정하여 개체 집합을 참조하도록 설정합니다. 여기서 마술은 객체 변수에 대한 참조를 사용하면 이벤트가 잠겨 모든 것이 작동한다는 것입니다.

So. 물건을 굽게합니다. 내가 mapclasses.js

기능 drawSets에서 다음

function setObj(country,myset) 
{ 
    var that = this; 
    that.country = country; 
    that.myset = R.set(); 

    that.setupMouseover = function() 
    { 
     that.myset.mouseover(function(event){ 
      myvar = that; 
      // in the mouseover, we're referring to a object member that.myset 
      // the value is locked into the anonymous object 
      that.myset.attr({"fill":"#ffaa00"}); 
     }); 
    } 

    that.addPath = function(newpath) 
    { 
     that.myset.push(newpath); 
    } 

    return that; 
} 

(라인 80)

drawSets: function(){ 
    for (country in this.setsArr){ 
     var setset= R.set(); 
        var holderObj = null; 
        // 
        // Create an object to hold all my paths 
        // 
        if (country == 'canada') 
        { 
         holderObj = setObj (country, setset); 
        } 
     var zone = this.setsArr[country]; 
     for (group in zone){ 
      var path = R.path(this.setsArr[country][group].path); 

      setset.push(path); 
          if (country == 'canada') 
          { 
           // add the path to the holder obj 
           holderObj.addPath(path); 
          } 
     } 

        if (country == 'canada') 
        { 
         // once all paths for the object are loaded, create a mouseover 
         // event 
         holderObj.setupMouseover(); 
        } 

     var attri = this.options.attributes; 
     setset.attr(attri); 
     var x = this.setsArr[country].translate.x; 
     var y = this.setsArr[country].translate.y; 
     setset.translate(x,y); 



    } 
} 

주의 상단에 넣어 : 난 단지 캐나다에 대해이 작업을 완료했습니다. 또한 마우스 오버 만 적용했습니다. 관련된 마우스 아웃을 적용하는 것은 사소한 일입니다. 또한 각 국가마다 개체를 저장해야하는데,이 개체를 저장하는 것이 좋습니다.

죄송합니다.이 점이 분명하지 않습니다. 내가 말했듯이, 그것은 늦었습니다. 원한다면 수정 된 js 파일을 보내거나 dropbox에 붙여 넣을 수는 있지만 아마도 StackOverflow의 정신에 어긋납니다.

문제가 발생하면 멀리 물어보십시오. 도와 드리겠습니다.

행운을 빈다.