캔버스에서 모양 추적

Question

캔버스에서 개별 모양을 식별하는 데 적합한 방법을 찾으려고합니다. 나는 좌석 위치 정보를 어떻게 든 보유 할 그리드에 직사각형을 배치 할 수있는 좌석 예약 도구를 만들고 있습니다 (좌석 번호부터 시작). 내가 테스트하고 수행하는 방법을 배우려고 노력하고 순수한 생각으로, 지금 상황을 들어

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

을주고

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

그리고 프로토 타입 : 나는 모양 기능이 순간

이 다음에 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를 사용하면 (SVG를 사용하는 훌륭한 호환성 라이브러리 인 http://raphaeljs.com/) 요소를 대화 형으로 사용해야 할 때 훨씬 편리합니다. 캔버스는 그려진 요소를 그린 후에 식별 할 수 없으므로 각 항목에 대해 개별 캔버스를 사용해야하거나 변경이있을 때 전체 캔버스를 다시 그려야합니다.