跟蹤畫布上的形狀

Question

我正試圖找到一種合適的方法來識別畫布上的各個形狀。我正在創建一個座位預訂工具，允許用戶在網格上定位矩形，以便以某種方式保存座位位置信息（座位號碼以開始）。

目前，我有一個形狀功能：

function Shape(x, y, w, h, fill) { 
    this.x = x || 0; 
    this.y = y || 0; 
    this.w = w || 1; 
    this.h = h || 1; 
    this.fill = fill || '#AAAAAA'; 
} 

與原型給上下文

Shape.prototype.draw = function(ctx) { 
    ctx.fillStyle = this.fill; 
    ctx.fillRect(this.x, this.y, this.w, this.h); 
} 

現在，因爲我純粹是在測試和努力學習如何做這，我建立了一個doubleclick事件監聽器來運行以下內容

canvas.addEventListener('dblclick', function(e) { 
var mouse = myState.getMouse(e); 
    for(var i=0; i <= 180; i += 20){ 
     for(var j = 0; j <= 225; j += 25){    
      myState.addShape(new Shape(mouse.x + i, mouse.y + j, 15, 20, 'rgba(0,255,0,.6)'));  
    }} 
}, true); 

我的思維behi nd這是如下。由於一個典型的座位計劃可以包含數百個座位，如果不是數千個座位，我可以選擇輸入座位塊的行和列，並讓用戶刪除他們不需要的座位（也沒有真正的想法如何那樣做），但現在我手動輸入行和列。

我的問題是，我如何分配每個新形狀創建一個id的種類？爲了讓每個形狀存儲一個唯一的數字來確定它的位置？

提前爲任何幫助而歡呼。

我應該提到我已經看過使用預先存在的庫，但似乎無法正確安裝它們（始終只是使用標頭中的鏈接）。

Answer 1

如果元素必須是交互式的，那麼使用SVG（http://raphaeljs.com/是一個利用SVG的優秀兼容性庫）會嘗試做到這一點。 Canvas在繪製後無法識別繪製的元素，因此您必須爲每個項目使用單獨的畫布，或者在進行更改時必須重畫整個畫布。