0

Raphaël ライブラリを使用して、JavaScript を初めて使用します。私が使用している SVG 画像には、さまざまな色の正方形がたくさんあります。色ごとに異なるセット (ブルーパス、ピンクパスなど) を用意し、同じホバーとクリック機能を共有したいと考えています。ポップアップ ボックスは正常に動作しますが、複数の配列を結合して同じホバーおよびクリック機能を共有する方法がわかりません。誰かが私を助けるのに十分親切であるなら、私は非常に感謝しています... :)

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's をチェックしてくださいset。これは、複数の形状を取得できる論理グループであり、1 回の呼び出しで多くのオブジェクトを操作する目的で設計されています。それはあなたのニーズによく合っているようです。

例：

set次のように、イベント ハンドラーを複数の形状にバインドするために s を使用できます。

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 に答える