3

Raphael.js を使用して米国の地図を作成しています。これはhttp://www.motionflashdesigns.com/usabbr/で確認できます。

set() を使用して州の省略形を追加し始めたので、州のパスとそのテキストの省略形の両方が同じオブジェクトに含まれます。

セットオブジェクト全体にマウスオーバーイベントハンドラーを追加していますが、子テキストもマウスオーバーイベントを登録します。これにより、セットでマウスアウトが効果的に発生します。セットの子でイベントの伝播を停止する方法を知っている人はいますか?

jquery ではmouseenterまたはevent.stopPropagationを使用しますが、Raphael ではどちらもサポートされていないようです。

JS は次のとおりです。

$(function () {

    var stateNames = new Array();
    var stateURLs = new Array();
    var stateModes = new Array();
    var stateColors = new Array();
    var stateOverColors = new Array();
    var stateClickedColors = new Array();
    var stateText = new Array();

    var offColor;
    var strokeColor;
    var mapWidth;
    var mapHeight;
    var useSideText;
    var textAreaWidth;
    var textAreaPadding;

    var mouseX = 0;
    var mouseY = 0;
    var current = null;

    // Detect if the browser is IE.
    var IE = $.browser.msie ? true : false;

    $.ajax({
        type: 'GET',
        url: 'xml/usaMapSettings.xml',
        dataType: $.browser.msie ? 'text' : 'xml',
        success: function (data) {

            var xml;
            if ($.browser.msie) {
                xml = new ActiveXObject('Microsoft.XMLDOM');
                xml.async = false;
                xml.loadXML(data);
            } else {
                xml = data;
            }

            var $xml = $(xml);

            offColor = '#' + $xml.find('mapSettings').attr('offColor');
            strokeColor = '#' + $xml.find('mapSettings').attr('strokeColor');
            mapWidth = $xml.find('mapSettings').attr('mapWidth');
            mapHeight = $xml.find('mapSettings').attr('mapHeight');
            useSideText = $xml.find('mapSettings').attr('useSideText');
            textAreaWidth = $xml.find('mapSettings').attr('textAreaWidth');
            textAreaPadding = $xml.find('mapSettings').attr('textAreaPadding');

            if (useSideText == 'true') {
                $("#text").css({
                    'width': (parseFloat(textAreaWidth) - parseFloat(textAreaPadding * 2)) + 'px',
                    'height': (parseFloat(mapHeight) - parseFloat(textAreaPadding * 2)) + 'px',
                    'display': 'inline',
                    'float': 'right',
                    'padding': textAreaPadding + 'px'
                });

                $('#text').html($xml.find('defaultSideText').text());
            }

            //Parse xml
            $xml.find('stateData').each(function (i) {

                var $node = $(this);

                stateText.push($node.text());
                stateNames.push($node.attr('stateName'));
                stateURLs.push($node.attr('url'));
                stateModes.push($node.attr('stateMode'));
                stateColors.push('#' + $node.attr('initialStateColor'));
                stateOverColors.push('#' + $node.attr('stateOverColor'));
                stateClickedColors.push('#' + $node.attr('stateSelectedColor'));
            });

            createMap();
        }
    });

    function createMap() {

        //start map
        var r = new ScaleRaphael('map', 930, 590),
            attributes = {
                fill: '#d9d9d9',
                cursor: 'pointer',
                stroke: strokeColor,
                'stroke-width': 1,
                'stroke-linejoin': 'round',
                'font-family':'Verdana', 
                'font-size':'19px', 
                'font-weight': 'bold'
            },
            arr = new Array();

            var usa = {};

            usa.alabama = r.set();
            usa.alaska = r.set();
            usa.arizona = r.set();
            usa.arkansas = r.set();
            usa.california = r.set();
            usa.colorado = r.set();
            usa.connecticut = r.set();
            usa.delaware = r.set();
            usa.dc = r.set();
            usa.florida = r.set();
            usa.georgia = r.set();
            usa.hawaii = r.set();
            usa.idaho = r.set();
            usa.illinois = r.set();
            usa.indiana = r.set();
            usa.iowa = r.set();
            usa.kansas = r.set();
            usa.kentucky = r.set();
            usa.louisiana = r.set();
            usa.maine = r.set();
            usa.maryland = r.set();
            usa.massachusetts = r.set();
            usa.michigan = r.set();
            usa.minnesota = r.set();
            usa.mississippi = r.set();
            usa.missouri = r.set();
            usa.montana = r.set();
            usa.nebraska = r.set();
            usa.nevada = r.set();
            usa.newHampshire = r.set();
            usa.newJersey = r.set();
            usa.newMexixo = r.set();
            usa.newYork = r.set();
            usa.northCarolina = r.set();
            usa.northDakota = r.set();
            usa.ohio = r.set();
            usa.oklahoma = r.set();
            usa.oregon = r.set();
            usa.pennsylvenia = r.set();
            usa.rhodeIsland = r.set();
            usa.southCarolina = r.set();
            usa.southDakota = r.set();
            usa.tennessee = r.set();
            usa.texas = r.set();
            usa.utah = r.set();
            usa.vermont = r.set();
            usa.virginia = r.set();
            usa.washington = r.set();
            usa.westVirginia = r.set();
            usa.wisconsin = r.set();
            usa.wyoming = r.set();

            var boxattrs = {'cursor': 'pointer', 'fill' : "#000"};
            var i = 0;

        for (var state in usamappaths) {
            //Create obj
            var obj = usa[state];
            obj.attr(attributes);

            if (stateModes[i] == 'OFF') {
                boxattrs = {'cursor': 'default', 'fill' : offColor};
            } else {
                boxattrs = {'cursor': 'pointer', 'fill' : stateColors[i], 'id' : i};
            }

            obj.push(r.path(usamappaths[state].path).attr(boxattrs));
            obj.push(r.text(usamappaths[state].textX, usamappaths[state].textY, usamappaths[state].text).attr(
                {"font-family":"Arial, sans-serif",
                 "font-weight":"bold",
                 "font-size":"14",
                 "font-color":"#000",
                 'cursor': 'pointer'}));

                obj[0].node.id = i;
                obj.mouseover(function (e) {
                    e.stopPropagation();

                    var id = $(this.node).attr('id');

                    if (stateModes[id] != 'OFF') {

                    //Animate if not already the current state
                        if (this != current) {
                            this.animate({
                                fill: stateOverColors[id]
                            }, 500);
                        }

                        //tooltip
                        $('#map').next('.point').remove();
                        $('#map').after($('<div />').addClass('point'));
                        $('.point').html(stateNames[id]).css({
                            left: mouseX - 50,
                            top: mouseY - 70
                        }).fadeIn();
                    }
                 });



        obj.mouseout(function (e) {

                var id = $(this.node).attr('id');

                if (stateModes[id] != 'OFF') {

                //Animate if not already the current state
                 if (this != current) {
                    this.animate({
                        fill: stateColors[id]
                    }, 500);
                }

                $('#map').next('.point').remove();

                }



         });

        obj.mouseup(function (e) {

                var id = $(this.node).attr('id');

                if (stateModes[id] != 'OFF') {
                    //Reset scrollbar
                    var t = $('#text')[0];
                    t.scrollLeft = 0;
                    t.scrollTop = 0;

                    //Animate previous state out
                    if (current) {
                        var curid = $(current.node).attr('id');
                        current.animate({
                            fill: stateColors[curid]
                        }, 500);
                    }

                    //Animate next
                    this.animate({
                        fill: stateClickedColors[id]
                    }, 500);

                    current = this;

                    if (useSideText == 'true') {
                        $('#text').html(stateText[id]);
                    } else {
                        //change "_self" to "_blank" if using in WP iframe
                        window.open(stateURLs[id], '_self');
                    }
                }
            });


         i++;
    }

    resizeMap(r);
    /*
    //Might use that for east coast states
    var t = r.text(120, 50, "WA").attr(
          {"font-family":"Arial, sans-serif",
           "font-weight":"bold",
           "font-size":"14",
           "font-color":"#000",
           "pointer-events":"none",
           'disabled': 'true'});

    var rect = r.rect(t.getBBox().x,t.getBBox().y,t.getBBox().width,t.getBBox().height).attr({'cursor': 'pointer'});
    */
}

// Set up for mouse capture
if (document.captureEvents && Event.MOUSEMOVE) {
    document.captureEvents(Event.MOUSEMOVE);
}

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {

    var scrollTop = $(window).scrollTop();

    if (e && e.pageX) {
        mouseX = e.pageX;
        mouseY = e.pageY-scrollTop;
    } else {
        mouseX = event.clientX + document.body.scrollLeft;
        mouseY = event.clientY + document.body.scrollTop;
    }
    // catch possible negative values
    if (mouseX < 0) {
        mouseX = 0;
    }
    if (mouseY < 0) {
        mouseY = 0;
    }

    $('#map').next('.point').css({
        left: mouseX - 50,
        top: mouseY - 70
    })
}

// Set-up to use getMouseXY function onMouseMove
document.body.onmousemove = getMouseXY;


    function resizeMap(paper) {

        paper.changeSize(mapWidth, mapHeight, true, false);

        if (useSideText == 'true') {
            $(".mapWrapper").css({
                'width': (parseFloat(mapWidth, 10) + parseFloat(textAreaWidth, 10)) + 'px',
                'height': mapHeight + 'px'
            });
        } else {
            $(".mapWrapper").css({
                'width': mapWidth + 'px',
                'height': mapHeight + 'px'
            });
        }
    }
});
4

3 に答える 3

0

JonathanGreeneのraphael.set.hoversetをチェックしてください。

于 2013-03-18T16:40:07.547 に答える
0

mouseoverおよびmouseoutの代わりに、mouseenterおよびmouseleaveイベントを使用する必要があります。

子要素によってトリガーされるmouseoutイベントを無効にする方法は？

于 2012-11-05T11:40:36.117 に答える
0

ここで何が問題なのか正確にはわかりませんが、テキストに影響を与えずに領域に影響を与えようとしていることが正しく理解できれば. 私がこれを回避した方法は、2つの要素を一緒に押すことでした

var North_Text = paper.set();
    North_Text.push(
    paper.text(80, 40, 'Dartford'),
    paper.circle(75, 32, 3)
);
North_Text.attr({
    id: 'North_Text',
}).data('id', 'North_Text');

var North_Kent = paper.set();
    var North = paper.circle(75, 32, 300);
    North.attr({id: 'West',parent: 'North_Kent'}).data('id', 'North');
North_Kent.attr({'id': 'North_Kent','name': 'North_Kent'});

North_Kent.push(North,North_Text);

次に、この関数を使用して、テキストとは無関係に領域に影響を与えました。iv はこれを過去の何かから適応させ、変数関数に合うように調整したので、for ループに配置して、配列内の複数のオブジェクトに影響を与えることができたと確信しています。

// Variable function "theEndFunction"
var theEndFunction = function(areaGroups,area){
    areaGroups.mouseover(function(){
        area.attr({"fill":"#099f1d"});
        area.animate({ stroke: "#099f1d", 'stroke-width': 2, opacity: .75 }, 1000, 'elastic');

    if(Raphael.type != 'VML')
    areaGroups.toFront();
        });

    areaGroups.mouseout(function(){ 
        area.attr({"fill":"#39B54A"});
        area.stop().animate({ stroke: "#39B54A", 'stroke-width': 0, opacity: .75 }, 1000, 'elastic');
    }); 
}


theEndFunction(North_Kent,North);

これが何らかの形で役立つことを願っています。後で機会があれば、フィドルを投げてみます

于 2013-07-17T16:03:47.867 に答える