0

ここで検索しましたが、これに適した回答の質問は見つかりませんでした。

私はホッケーの得点チャンストラッカーを書いています。基本的にはホッケーの氷の画像を表示したいと思います。画像をクリックするたびに、クリックした場所が記憶され、クリックした場所に小さな赤い円が表示されます。その番号は自動インクリメント番号になります。最終的には、データベースに保存するためにすべてのマウスクリックがどこにあるかを追跡したいと思います。

画像の横にはフォームがあり、マウスをクリックするたびにテーブルに新しい行が追加されます。この部分はそれほど難しくはありません。jqueryで簡単に実行できます。

私が抱えている問題は、ユーザーがクリックする別の画像の上に同じ画像を複数回重ね続けるためのすばやく簡単な方法を見つけようとしていることです。私はHTML5/Canvasと、これを行うための単なるjavascript/jqueryを調べてきました。

私はここでこれを行う簡単な方法についての提案を求めています。

ありがとう

4

2 に答える 2

1

これは、私がそれを行う方法の始まりを示す非常に単純な jsfiddle です。質問/懸念がある場合/さらに改善するために助けが必要な場合はお知らせください。喜んで更新します!

http://jsfiddle.net/jking/4dMJG/

（私のdivが画像で、サイドバーが実際のフォームであることを防ぐだけです...）

于 2012-05-11T22:57:16.200 に答える
1

これが私が行う方法です-簡単で短い方法です。あなたがそれをどのように拡張したいかわかりません:

配列を作成し、ユーザーにクリックしてもらいたい div にイベント リスナーをバインドします。

ユーザーがこの画像をクリックするたびに、イベント オブジェクトが渡され、レイアウトに応じて、マウスの X 座標と Y 座標を読み取ることができます - .position() または .offset()。これらの値を格納する JSON オブジェクトを作成します。

var hit = {
    id: 1,
    x: 250,
    y: 365,
    //add more attributes if you like/need
    //for this particular 'hit'
}

そして、このオブジェクト (-表記) を配列に格納できます。

hitz.push(hit);

この配列に基づいて UI を「更新」する必要があります。for...in ループでループして、画像を作成するだけです。

var hockeyIceClone= $("div.hockey-ice").clone(true);

for (var i in hitz) {
    var hit = hitz[i];
    hockeyIceClone.append(
        //assuming that your .hockey-ice div has position:relative at least
        var image = $(new Image('image/path.png'));
        //add more stuff for image if you like
        $(image).css({
            position: absolute,
            left: hit.x,
            top: hit.y
        })
    );
}

$("div.hockey-ice").replaceWith(hockeyIceClone);

クローンを作成する理由は、配列をループし、配置されて UI に表示される「コンテナ」に要素を追加すると、レンダリング中に点滅する可能性があるためです。したがって、最初に「収集」して、まとめて UI に配置することをお勧めします。また、クローン作成以外の方法を使用することもできますが、これはオプションにすぎません。

于 2012-05-11T23:23:25.680 に答える