Question

我想在画布上画框。但我希望这些盒子成为我可以分配更多事件，方法和属性的对象。有人可以告诉我一些我能做到的事情吗？

Answer 1

我试着做些什么，但它变得有点冗长......

归结为创建Box函数，实例代表这些函数。在绘制时，您迭代它们并绘制它们。 select实例的unselect和Box函数可用于选择它;然后您可以使用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;
    }
}

在dblclick上的画布上绘制框对象，在singleClick on boxobjects上想要做其他事情吗？

1 个答案: