0

画像パターンでパスを埋めようとしましたが、無駄です。私はこのフィドルを持っています。サークルのようなオブジェクトを画像で塗りつぶすことはできますが、パスはできません。赤いエリア ラベルをクリックし、アクションの任意のパスをクリックしてください。

JS:

var paths = {
    path_1: {
        name: '1',
        path: 'M30.848,0.13 45.4,1.747 58.983,1.747 74.829,3.687   90.999,3.687 123.015,3.687 149.21,0.13 176.051,1.908 201.923,3.687 236.526,3.687 268.865,6.598 279.538,6.598 297.647,6.598   316.404,6.598 339.042,3.364 369.765,6.598 391.108,6.598 420.861,9.185 435.091,18.563 440.265,40.23 443.499,68.366   447.703,91.65 451.907,115.582 453.848,138.287 453.848,160.533 456.758,179.29 459.345,195.46 461.608,213.57 462.902,229.093   465.489,239.441 466.783,254.965 464.196,277.926 461.285,288.921 455.464,292.479 440.911,297.006 423.448,298.623   389.492,298.623 376.232,298.623 370.411,298.623 360.387,298.623 355.858,298.623 348.421,298.623 340.659,298.623   331.928,297.329 328.047,298.623 318.668,298.623 309.29,298.623 289.563,298.623 273.394,298.623 262.397,298.623 243.317,297.329   235.232,298.623 227.794,300.887 218.416,300.887 212.271,299.27 195.132,300.887 187.694,300.887 178.962,300.887 164.409,300.887   149.533,300.887 137.567,303.15 123.338,303.15 97.79,303.15 87.118,303.15 73.859,304.444 58.659,304.444 40.226,304.444   21.146,302.827 13.708,296.035 5.946,289.567 2.065,282.13 0.125,262.402 0.125,228.77 0.125,201.281 0.125,171.529 4.006,147.274   3.359,122.373 3.359,106.526 4.006,92.621 8.21,70.63 11.444,42.495 15.325,24.708 15.325,17.27 18.882,9.832 z'
    }

}
var colorAttributeMap = {};
var drawn = false;
var choosenColor;

    function drawOnPaper(r) {
       var cir = r.circle(50,50,10);
        cir.attr({
                cursor: 'pointer',
                fill: choosenColor
            })
        for (var country in paths) {
            var path = r.path(paths[country].path);
            path.node.id = country;
            if (drawn == false) {
                colorAttributeMap[country] = 'none';
            }

            $(path.node).click({
                rObj: path
            },

            function (e) {
                colorAttributeMap[path.node.id] = choosenColor;
                clearObjects(e.data.rObj.paper);
                drawOnPaper(e.data.rObj.paper);

            });
            console.log("Path " + country + " Color " + colorAttributeMap[country]);
            path.attr({
                cursor: 'pointer',
                fill: choosenColor
            })
        }
        if (drawn == false) {
            drawn = true;
        }

    }


function clearObjects(r){
           r.clear();
    }

jQuery(function($) {
        var r = Raphael(document.getElementById("map"), 1550, 750);
        r.setViewBox(0, 0, 612, 792);
        drawOnPaper(r);
        $('body').delegate( '.Color',"click",function(){
                var a=$(this).html();       
                choosenColor    = a;
        });

    });

HTML:

<body>
    <div id="main">
        <div id="left">
            <table id="table">
                <tr>
                    <td>Click on label of red area and then clcik on the path </td>
                </tr>
                <tr>
                    <td>Fill it with following image</td>
                    <td bgcolor="red"><a class="Color" value="url(http://media.balenciaga.com/images/10x10/SWATCH_D94J4_1000_A_10x10.jpg)">url(http://media.balenciaga.com/images/10x10/SWATCH_D94J4_1000_A_10x10.jpg)</a>


            </table>
        </div>
        <div id="map"></div>
    </div>
</body>

CSS:

body {
    margin: 1em;
    text-align: center
}
svg {
    background: #ffc;
    height: 800px
}
path {
    fill: transparent;
    stroke: black;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}
4

1 に答える 1

1

初め

パスをクリックしたい場合は、それを塗りつぶす必要があります。それ以外の場合は、ストロークのみを押すことができます。

var choosenColor = '#ffc';

2番

参照ではなく、ノードの塗りつぶし属性を設定する必要があります。

$(path.node).attr({
    cursor: 'pointer',
    fill: choosenColor
})

三番

CSS から塗りつぶしを削除する

path {
    fill: transparent;
}

第4

長方形の後に円を描きます。あなたは上に円を描きたいです。

例

http://jsfiddle.net/bGrB7/14/

これがあなたの望むものであることを願っています。

于 2013-04-10T11:41:05.240 に答える