dblclick의 캔버스에 상자 객체를 그립니다. boxobjects의 singleClick에 다른 작업을 원하십니까?

Question

상자를 캔버스에 그려야합니다. 그러나 나는이 상자들을 더 많은 이벤트, 메소드 및 속성을 할당 할 수있는 객체로하고 싶습니다. 누군가 내가 어떻게 이걸 이룰 수 있을지 제안 해 줄 수 있니?

Answer 1

내가 뭔가를 만들려고하지만

그것은 아래로 인스턴스가 상자를 대표하는의 Box 기능을 만드는 온다 ... 조금 자세한되었다. 그림을 그릴 때 반복해서 그릴 수 있습니다. Box 인스턴스의 select 및 함수를 사용하여 선택할 수 있습니다. selectedBox을 사용하여 현재 선택된 상자에 액세스하고 특성을 설정할 수 있습니다. 실질적으로, 그것은 꽤 무의미한 예입니다. 그러나 그것이 당신을 올바른 길로 인도하기를 바랍니다.

http://jsfiddle.net/pimvdb/eGjak/82/

var cv = $('#cv'); 
var ctx = cv.get(0).getContext('2d'); 

var Box = function(x, y, w, h) { 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.color = 'red'; 
}; 

Box.prototype.select = function() { 
    if(selectedBox === this) { 
     selectedBox = null; 
     $('#status').html('unselected'); 
    } else { 
     selectedBox = this; 
     $('#status').html('selected'); 
    } 
}; 

Box.prototype.unselect = function() { 
    selectedBox = null; 
    $('#status').html('unselected'); 
}; 

var boxes = []; 

var downCoords = []; 
var isMoving = false; 
var selectedBox; 

cv.mousedown(function(e) { 
    downCoords = [e.offsetX, e.offsetY]; 
    isMoving = false; 
}).mousemove(function() { 
    isMoving = true; 
}).mouseup(function(e) { 
    var minx = Math.min(downCoords[0], e.offsetX); 
    var maxx = Math.max(downCoords[0], e.offsetX); 
    var miny = Math.min(downCoords[1], e.offsetY); 
    var maxy = Math.max(downCoords[1], e.offsetY); 

    boxes.push(new Box(minx, miny, maxx - minx, maxy - miny)); 

    draw(); 
}).click(function(e) { 
    if(isMoving) return; 

    isMoving = false; 

    var x = e.offsetX, 
     y = e.offsetY; 

    for(var i = boxes.length - 1; i >= 0; i--) { 
     var box = boxes[i]; 

     if(between(x, box.x, box.x + box.w) 
     && between(y, box.y, box.y + box.h)) { 

      box.select(); 

      break; 
     } 
    } 

    draw(); 
}); 

$('button').click(function() { 
    if(!selectedBox) return; 

    selectedBox.color = 'blue'; 
    selectedBox.unselect(); 

    draw(); 
}); 

function between(x, a, b) { 
    return x > a && x < b; 
} 

function draw() { 
    ctx.clearRect(0, 0, 400, 400); 

    for(var i = 0; i < boxes.length; i++) { 
     var box = boxes[i]; 
     ctx.beginPath(); 
     ctx.rect(box.x, box.y, box.w, box.h); 
     if(selectedBox && box != selectedBox) { 
      ctx.globalAlpha = 0.25; 
     } 
     ctx.fillStyle = box.color; 
     ctx.fill(); 
     ctx.stroke(); 
     ctx.globalAlpha = 1; 
    } 
}