2

jQuery Map Hilighterプラグインを使用していますが、各領域の暗いパッチをフェードする代わりに、これを逆にして周囲の領域を暗くし、ホバーした領域を同じ色に保ちたいと考えています。

プラグインのコードを調べたところ、強調表示を行うために canvas 要素 (および私が推測する MS の同等物) を使用しているようです。ただし、Firebug は、形状が定義されている正確な場所についてはあまり公開していません。上記のデモでは、次のようになっています。

 <canvas style="border: 0pt none ; padding: 0pt; width: 960px; height: 593px; position: absolute; left: 0pt; top: 0pt; opacity: 1;" height="593" width="960"></canvas>

また、ホバーする要素の形状を指定するものは何も表示されません。これは、形状を作成しているように見える JS の一部です。

add_shape_to = function(canvas, shape, coords, options) {
    var i, context = canvas.getContext('2d');
    context.beginPath();
    if(shape == 'rect') {
        context.rect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
    } else if(shape == 'poly') {
        context.moveTo(coords[0], coords[1]);
        for(i=2; i < coords.length; i+=2) {
            context.lineTo(coords[i], coords[i+1]);
        }
    } else if(shape == 'circ') {
        context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, false);
    }
    context.closePath();
    if(options.fill) {
        context.fillStyle = css3color(options.fillColor, options.fillOpacity);
        context.fill();
    }
    if(options.stroke) {
        context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
        context.lineWidth = options.strokeWidth;
        context.stroke();
    }
    if(options.fade) {
        fader(canvas, 0);
    }
};
4

1 に答える 1

3

要素の形状は、HTML コードの<area>要素内の要素として定義されます。<map>

あなたの質問に対する簡単な答えは、このようなものを追加することです

  if (options.inverseFill) {
    context.rect(0,0, canvas.width,canvas.height);
  }

行の後にcontext.beginPath();defaults: のオプションをinverseFill: true,指定し、イメージ マップ内のすべての領域が同じ時計回りに宣言されていることを確認します。

何が起こるかというと、ダーク パッチを定義するパスに追加のサブパスを定義し、塗りつぶすと、サブパスの巻き数がキャンセルされる限り、オーバーラップ エリア (つまり、元のパッチ) がキャンセルされ、結果として次のようになります。あなたの望む逆の行動。

エリア ポリゴン定義が両方向に回転できる場合は、かなり複雑になります。たとえば、米国地図の元の MapHilight デモに対して上記を実行すると、形状が正しい時計回り方向に定義されているため、一部の州のみが正しく動作します。 .

画像マップの定義を完全に制御できる場合は、そのままにして、すべての領域が同じ方向になるようにすることをお勧めします (つまり、機能しない領域ごとに座標リストを逆にするだけです)。

そうでない場合は、初期化時に各形状の巻き数を事前に計算する必要があります。これには、ポイントのリストを調べて、atan2 を使用して計算された 2 つの連続するセグメントごとの角度を合計することが含まれる可能性が最も高いでしょう。次に add_shape_to 関数で、キャンバスの 4 つのコーナーを正しい方向にトラバースします。

とにかく、それが役立つことを願っています

アップデート：

申し訳ありませんが、あなたのコメントを以前に見ませんでした。円形領域の場合、add_shape_to 関数で、 } else if(shape == 'circ') {パーツを次のように置き換えます。

  } else if(shape == 'circ') {
    context.closePath();
    context.moveTo(coords[0] + coords[2], coords[1]);
    context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true);
    context.closePath(); 
  }

前後のサブパスを閉じ、正しい場所に移動して、上隅への厄介な赤い線を回避し、反時計回りのパラメーターをに変更してtrue、外側の長方形に一致させます。必要に応じて修正

于 2009-11-16T17:48:47.773 に答える