在画布上跟踪形状

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); 

我对此的想法如下。 由于典型的座位计划可以容纳数百个座位（即使不是数千个），因此我可以选择输入一个座位的行和列，并让用户删除不需要的座位（也不知道如何这样做），但现在我手动输入行和列。

我的问题是，如何分配创建的每个新形状的ID？ 某种方式使每个形状存储一个唯一的数字以标识其位置？

提前加油以寻求帮助。

我应该提一下，我已经看过使用现有的库，但是似乎无法正确安装它们（总是只使用标题中的链接）。

Answer 1

如果元素必须是交互式的，那么使用SVG（ http://raphaeljs.com/是一个很好的兼容性库，利用SVG）会更好。 画布无法在绘制后识别绘制的元素，因此您要么必须为每个项目使用单独的画布，要么必须在进行更改后重新绘制整个画布。