javascript來追蹤圖像並在圖像上放置多個圖像

我在這裏搜索了一個搜索，找不到任何適合這個答案的問題。javascript來追蹤圖像並在圖像上放置多個圖像

我正在寫一個曲棍球得分機會跟蹤器，基本上我想顯示曲棍球冰的圖像，並且每次點擊圖像時它會記住你點擊的位置，在你點擊一個數字時放一個小紅圈最佳。該號碼是一個自動遞增號碼。最終，我想跟蹤所有鼠標點擊的存儲位置。

到圖像的一邊將是一個窗體，每次單擊鼠標時它會向表中添加一個新行。這部分不是很難，我可以很容易地用jQuery來做到這一點。

我遇到的問題是試圖找到一種快速簡便的方法，以便在用戶點擊的另一圖像上多次放置相同的圖像。我一直在尋找HTML5/Canvas，以及只是簡單的JavaScript/jQuery來做到這一點。

我在這裏尋求簡單的方法來做到這一點的建議。

感謝

來源

2012-05-11 Reily Bourne

您是否有個人偏好進行canvas或DOM操作？無論哪種方式都應該很容易，這是您的選擇。選擇一個，我很樂意提供一些示例代碼... – JKing

沒有經驗的畫布，通過jQuery的DOM是我有經驗的地方。 –

克隆圖像元素並將其附加到DOM不起作用嗎？然後，你只需要獲得鼠標座標，並設置克隆節點的位置。你遇到什麼困難，克隆或定位？ – JKing

這裏與我怎麼可能去這樣做的開端一個超級簡單的jsfiddle - 讓我知道如果您有任何問題/顧慮/需要幫助作出進一步的改進，我會很高興更新！

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

（只是防止我的div是圖像，並且側邊欄是一個真正的形式...）

來源

2012-05-11 22:57:16 JKing

不，這有很大幫助，我認爲可以幫助我走上正軌。 –

這裏是我會怎麼做 - 簡單的，短的路，我不知道如何你想擴展它：

我會創建一個數組，並將事件監聽器綁定到您希望用戶單擊的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' 
}

而且你可以在一個陣列這個對象（-notation）存儲：

hitz.push(hit);

現在你應該「更新」你的用戶界面基於這個數組。只是遍歷一個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上。你也可以使用克隆以外的其他方法，它只是一個選項。

來源

2012-05-11 23:23:25 benqus

javascript來追蹤圖像並在圖像上放置多個圖像

回答

相關問題