Question

我使用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());

有人可以帮助我吗？我不知道如何让它正常工作。如果我只有一个小屋，它就像我需要的那样完美无缺，但是如果不止一个小屋它会毁掉一切:(

Answer 1

好的，我的同事帮助了我，所以我在这里写一个解决方案，有些人有同样的问题。

我们已经添加了eve，即使对于需要采取行动的mouseleave：

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

Raphael js点击，悬停并填充

1 个答案: