0

javascript 新手，使用 Raphaël 库。我使用的 SVG 图像有一堆不同颜色的方块。我想为每种颜色设置不同的集合（例如 bluepath、pinkpath）并共享相同的悬停和单击功能。弹出框工作正常，但我不确定如何加入多个数组以共享相同的悬停和单击功能。如果有人愿意帮助我，我将非常感激...... :)

arr = new Array();
for (var block in bluepaths) {
    var obj = r.path(bluepaths[block].path);
    obj.attr(attributes);
    arr[obj.id] = block, attributes = {
        fill: '#00CCFF',
        stroke: '#3899E6',
        'stroke-width': 1,
        'stroke-linejoin': 'round'
    }
}

arr = new Array();
for (var blocktwo in pinkpaths) {
    var obj = r.path(pinkpaths[blocktwo].path);
    obj.attr(attributes);
    arr[obj.id] = blocktwo, attributes = {
        fill: '#00F',
        stroke: '#3899E6',
        'stroke-width': 1,
        'stroke-linejoin': 'round'
    }

    obj.hover(function () {
        this.animate({ fill: '#fff' }, 300);
    }, function () {
        this.animate({ fill: attributes.fill }, 300);
    }).click(function () {
        document.location.hash = arr[this.id];
        var point = this.getBBox(0);

        $('#map').next('.point').remove();
        $('#map').after($('<div />').addClass('point'));

        $('.point').html(bluepaths[arr[this.id]].name).prepend(
            $('<a />').attr('href', '#').addClass('close').text('Close')
        ).prepend(
            $('<img />').attr('src', 'flags/' + arr[this.id] + '.png')
        ).css({
            left: point.x + (point.width / 2) - 80,
            top: point.y + (point.height / 2) - 20
        }).fadeIn();
    });

    $('.point').find('.close').live('click', function () {
        var t = $(this),
        parent = t.parent('.point');

        parent.fadeOut(function () {
            parent.remove();
        });

        return false;
    });
4

1 回答 1

0

查看 Raphaël 的set，它是一个能够获得多种形状的逻辑组，旨在通过一次调用来操作多个对象。这似乎非常适合您的需求。

例子：

您可以使用sets 将事件处理程序绑定到多个形状，如下所示：

var set = paper.set();

set.push(
    r.circle(240, 120, 60),
    r.rect(50,100,60,60),
    r.path('m160 200 l60 80 l-120 0 z')
);    

set.hover(
    function() {
        // use the magic of hover in!
    },
    function() {
        // do some crazy stuff on hover out!
    }
);

jsFiddle 上的演示

参考：

于 2012-06-21T09:07:10.497 回答