3

mouseover イベントが発生したときにキャンバスにポリゴンを描画するには、次のようにします。

      $(document).ready(function() {

        $('#flam').mouseover(function() {

        context.fillStyle = '#f00';
        context.beginPath();
        context.moveTo(98,265);
        context.lineTo(197,240);
        context.lineTo(197,235);
        context.lineTo(227,220);
        context.lineTo(242,220);
        context.lineTo(245,209);
        context.lineTo(252,208);
        context.lineTo(252,200);
        context.lineTo(274,179);
        context.lineTo(277,179);
        context.lineTo(290,166);
        context.lineTo(191,72);
        context.lineTo(164,97);
        context.lineTo(166,112);
        context.lineTo(94,129);
        context.lineTo(105,170);
        context.lineTo(72,177);
        context.closePath();
        context.fill();

            $('#flam').mouseout(function() {
               //What do I need to do here to clear this on mouseout

            ;})
        ;})

または、これを行う別のより効率的な方法はありますか

4

1 に答える 1

6

わかりましたので、私の答えは完全に変わりました:-)。

あなたがする必要があること:
- 画像の上にキャンバスを設定します。
--> キャンバスと画像の両方に使用: position:absolute; 上:0px; 左：0px;
-IEを機能させるために（@Kerry Liuのコメントにthx）、IEのキャンバスでマウスイベントを無視できないようです。そのため、キャンバス+画像に別の空の画像を設定し、この最新の画像の領域をフックします。
- すべてのエリアにクラスを追加して、それらを選択できるようにします。「mapPart」を選択します。 -すべての mapParts に対して
マウス オーバーでキャンバスにポリゴンを描画するイベントをフックします。 - すべての mapPart のマウス アウトでキャンバスをクリアするイベントをフックします。

http://jsfiddle.net/gamealchemist/cmKsD/

(jQuery 1.9.1 を使用)

（ポリゴンの描画を盗んだ@enhzflepからのこの回答へのクレジット:-)
here : How to apply Hovering on html area tag?
彼が行っているように、他の領域タイプを処理したい場合があります。)

html (抜粋) :

<div id='myImage' class="map">
    <img src="http://www.linkparis.com/images/francemap.jpg" border="0"  
         style='position:absolute; top:0px; left:0px;' />
    <canvas id='myCanvas' height='494' width='494' style='position:absolute; top:0px; left:0px;'>Canvas is not supported by your browser.</canvas>
    <img border="0" usemap="#imgmap" style='position:absolute; top:0px; left:0px; width:100%; height:100%; ' usemap="#imgmap" />
</div>
<map id="imgmap" name="imgmap">
    <area shape="poly" id="flam" class="mapPart" coords="98,265,197,240,197,235,227,220,242,220,245,209,252,208,252,200,274,179,277,179,
        290,166,191,72,164,97,166,112,94,129,105,170,72,177" />
    <area shape="poly" id="ancaster" class="mapPart" coords=" 198,240,97,265,103,274,232,334,254,263,251,261,251,243,243,245,240,235,
        229,240,229,240,222,240,216,244,213,237" />
....

コード :

var cv = document.getElementById('myCanvas');
var context = cv.getContext('2d');

context.clearRect(0, 0, cv.width, cv.height);

$('.mapPart').mouseover(function () {
    var coordStr = this.getAttribute('coords');
    // draw
    drawPolygon(context, coordStr);
});

$('.mapPart').mouseout(function () {
    // clear
    context.clearRect(0, 0, cv.width, cv.height);
});

function drawPolygon(hdc, coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i = 2; i < n; i += 2) {
        hdc.lineTo(mCoords[i], mCoords[i + 1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);
    hdc.stroke();
}
于 2013-09-28T22:28:12.143 に答える