跟踪画布上的形状

我正试图找到一种合适的方法来识别画布上的各个形状。我正在创建一个座位预订工具，允许用户在网格上定位矩形，以便以某种方式保存座位位置信息（座位号码以开始）。跟踪画布上的形状

目前，我有一个形状功能：

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的种类？为了让每个形状存储一个唯一的数字来确定它的位置？

提前为任何帮助而欢呼。

我应该提到我已经看过使用预先存在的库，但似乎无法正确安装它们（始终只是使用标头中的链接）。

来源

2015-01-11 Penguin

如果元素必须是交互式的，那么使用SVG（http://raphaeljs.com/是一个利用SVG的优秀兼容性库）会尝试做到这一点。 Canvas在绘制后无法识别绘制的元素，因此您必须为每个项目使用单独的画布，或者在进行更改时必须重画整个画布。

来源

2015-01-11 14:13:02 unobf

哦！实际上看起来非常好。你可能可能ELI5如何工作？从我收集它仍然使用画布（？），但将每个形状作为一个对象？ – Penguin

不，它在支持SVML的平台上使用可伸缩矢量图形，而在不支持SVG的旧版IE平台上使用VML – unobf

跟踪画布上的形状

回答

相关问题