Нарисуйте объекты box на холсте на dblclick, на singleClick на boxobjects хотите сделать что-то еще? - PullRequest
Новая
       10

Нарисуйте объекты box на холсте на dblclick, на singleClick на boxobjects хотите сделать что-то еще?

0 голосов
/ 18 августа 2011

Я хочу нарисовать коробки на холсте.Но я хочу, чтобы эти блоки были объектами, которым я могу назначать дальнейшие события, методы и свойства.Может кто-нибудь подсказать мне, как мне этого добиться?

1 Ответ

0 голосов
/ 18 августа 2011

Я пытался что-то придумать, но это стало немного многословно ...

Все сводится к созданию 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;
    }
}
...