Raphael js를 클릭하고 마우스를 가져 가서 채우기

Question

나는 라파엘 js를 마을 플랜에 사용하고 있는데, 여기에서 모양은 계획의 별장입니다. 내가 코티지를 가져 가면 색으로 채워진다. 별장을 클릭하면 약간의 정보가 표시되는 창이 나타납니다. 커서를 그 창에서 나가면 사라집니다. 모든 것은 모양의 채우기를 제외하고는 꼭 필요한 것처럼 작동합니다. 내가 텍스트 창에서 빠져 나올 때 나는 모양의 채우기가 사라질 필요가있다. 그러나 그것은 유지됩니다. 웬일인지 내가 추가했던 마지막 오두막집에서만 올바르게 작동합니다. 창문이 이미 숨겨져있을 때 다른 오두막이 색으로 채워집니다.

이

var canvas = Raphael(canvas_setup.canvas_id, canvas_setup.canvas_width, canvas_setup.canvas_height), 
    speed_anim_in = 400, 
    speed_anim_out = 150, 
    cottage_color_start = '#fff', 
    cottage_color_end = '#fff', 
    cottages_array = []; 

for (var i = village_area.length - 1; i >= 0; i--) { 
    canvas.setStart(); 
    var obj = village_area[i]; 
    canvas.image(obj.plan_image, 0, 0, canvas_setup.canvas_width, canvas_setup.canvas_height); 

    for (var j = 0; j < obj.cottages.length; j++) { 
     var obj_cottages = obj.cottages[j], 
     my_path = canvas.path(obj_cottages.coords); 
      my_path 
       .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"}) 
       .data('type', obj_cottages.type) 
       .data('start_color', cottage_color_start) 
       .data('end_color', cottage_color_end) 
       .data('clicked', false) 
       .hover(
        function(){ 
         this.attr({fill: this.data('start_color'), opacity: 1}).animate({fill: this.data('end_color')}, speed_anim_in); 
        }, 
        function(){ 
         if(!this.data('clicked')) { 
          this.animate({fill: this.data('start_color'), opacity: 0}, speed_anim_out); 
         } 
        } 
       ) 
       .click(function (e) { 
        this.attr({fill: this.data('start_color'), opacity: 1}); 
        this.data('clicked', true); 
        $('.cottage_info').html(
         '<div>Cottage ' + this.data('type') + '</div>' 
        ).show(); 
        $('.cottage_info').css({'left': e.pageX-44 + 'px', 'top': e.pageY-150 + 'px'}); 
        $('.cottage_info').mouseleave(function() { 
         $(this).hide(); 
         my_path 
          .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"}) 
          .data('clicked', false) 
         this.animate({fill: this.data('start_color'), opacity: 0}, speed_anim_out); 
        }); 
        return false; 
       }); 
    }; 
    cottages_array.push(canvas.setFinish()); 

누군가가 나를 도울 수 :

이 내 코드? 나는 그것을 올바르게 작동시키는 법을 모른다. 만약 내가 단 하나의 오두막집을 가지고 있다면 그것은 완벽하게 작동합니다. 그러나 여러개가 있다면 모든 것을 망칠 것입니다 : (

Answer 1

좋아요, 제 동료가 도와 주셨습니다. 동일한 문제를 가지고 우리는 심지어 필요한 조치와하는 MouseLeave 위해 이브를 추가 한

:..

개체가 배열의주기 특성 및 트리거 라파엘 MouseLeave 이벤트를 필요한 경우 우리는 확인

eve.on('raphael.event.mouseleave', function(){ 
    this.animate({opacity: 0}, speed_anim_out); 
    this.data('clicked', false); 
}); 

$('.cottage_info').mouseleave(function() { 
    $(this).hide(); 
    for (var x = 0; x < cottages_array.length; x++) { 
     if (cottages_array[x].data('clicked')) { 
      eve('raphael.event.mouseleave', cottages_array[x]); 
      break; 
     }; 
    } 
});