0

我将 Raphael 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());

有人可以帮助我吗？我不知道如何使它正常工作。如果我只有一间小屋，它可以完美地满足我的需要，但如果有不止一间，它会毁掉一切:(

4

1 回答 1

0

好的，我的同事帮助了我，所以我在这里为某人有同样问题的案例编写解决方案。

我们甚至为 mouseleave 添加了 eve 并执行了必要的操作：

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

我们检查对象是否具有需要的属性，并在数组的循环中触发 raphael mouseleave 事件。

$('.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;
        };
    }
});
于 2013-04-17T11:10:02.033 回答