1

ユーザーが画像の周りに形を描いて選択できるキャンバスがあります。そのため、キャンバスには複数の形状が存在する可能性があります

今私が欲しいのは、マウスオーバーシェイプで、カスタムシェイプ(マウスオーバーがある場所)以外のキャンバスの不透明度を変更したいときです。

http://davidlynch.org/projects/maphilight/docs/demo_simple.html (ここでは逆効果)

4

1 に答える 1

0

あなたの質問を正しく理解できれば、Canvas へのデータ モデル アプローチを採用する必要があります。基本的に、キャンバスに表示される情報を保存する必要があります。次に、その情報を使用してキャンバスをレンダリングする関数があります。

ユーザーがキャンバス上にマウスを移動すると、キャンバスに相対的な x、y を決定し、データを見て、x、y の位置を確認します。データの状態を変更し、キャンバスを再構築します。

これは、私がすぐにまとめた非常に大雑把な例です。JavaScript をより適切に構成することを強くお勧めしますが、これは概念実証です。実際には、データをインデックス形式で保存し、mousemove() 関数呼び出しをより適切に実行します。これは、ユーザーがマウスを移動すると打撃を受けるためです (通常はsetTimeout後続の呼び出しで実行され、無視されます)。

$(function() {
    function renderCanvas() {
        for(var i = 0; i < data.length; i++) {              
          context.fillRect(data[i].x, data[i].y, data[i].width, data[i].height);
        }        
    }

    var context = $(".myCanvas").get(0).getContext("2d");

    var data = [];

    data.push({ x : 25, y : 25, height : 100, width : 100 });

    renderCanvas();

    $(".myCanvas").mousemove(function(e) {
        for(var i = 0; i < data.length; i++) {
            if (e.pageX > data[i].x && e.pageX < data[i].x + data[i].width && e.pageY > data[i].y && e.pageY < data[i].y + data[i].height) {
               data[i].height = 200;
               renderCanvas();
            }                        
        }
    });
});

フィドル形式: http://jsfiddle.net/wUnDu/1/

于 2012-10-29T07:05:16.107 に答える