跟踪 canvas 上的形状

Question

我正在尝试找到一种合适的方法来识别 canvas 上的各个形状。我正在创建一个座位预订工具，允许用户在网格上放置矩形，该网格将以某种方式保存座位位置信息（座位号开头）。

目前我有一个形状函数：

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

目前，由于我纯粹是在测试和尝试学习如何执行此操作，因此我已经为运行以下

设置了一个双击事件侦听器

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？以某种方式让每个形状存储一个唯一的数字来标识它的位置？

提前为任何帮助干杯。

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

Answer 1

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

跟踪 canvas 上的形状

Keeping track of shapes on a canvas

html

javascript

canvas