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

目前，由于我纯粹是在测试并试图学习如何做到这一点，我已经设置了一个双击事件监听器来运行以下

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的强大兼容性库），如果元素必须是交互式的，那么尝试这样做。画布无法在绘制后识别绘制的元素，因此您必须为每个项目使用单独的画布，或者在进行更改时必须重绘整个画布。

跟踪画布上的形状

1 个答案: