Лучший выбор линии, чем с использованием алгоритма Брезенхэма?

Я рисую линии на холсте HTML и использую менее точный 2D-массив (представляющий блоки размером 10x10 пикселей), в котором я «рисую» линии с помощью алгоритма Брезенхэма для хранения идентификаторов строк, поэтому я могу использовать этот массив, чтобы увидеть, какие линия выбрана.

Это работает, но я хотел бы, чтобы это было более точно - не в размере 10x10, который я использую (мне нравится, что мне не нужно точно нажимать на строку), а когда я рисую представление этого массива поверх моего фактического canvas я вижу, что многие блоки 10x10 не заполнены, хотя линия их пересекает:

введите здесь описание изображения

Есть ли лучшее решение для этого? Я хочу поймать ВСЕ блоки сетки, через которые проходит фактическая линия.


person Eindbaas    schedule 18.01.2015    source источник


Ответы (2)


Не видя вашего кода, я думаю, что вы сделали ошибку округления при заполнении таблицы поиска с использованием алгоритма Брезенхема или вы масштабировали координаты перед запуском алгоритма.

Этот jsFiddle показывает, что я придумал, и квадраты идеально выровнены.

введите здесь описание изображения

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas {
    width: 250px;
    height: 250px;
}

JavaScript

var $canvas = $("#myCanvas"),
    ctx = $canvas[0].getContext("2d");

ctx.canvas.width = $canvas.width();
ctx.canvas.height = $canvas.height();

function Grid(ctx) {
    this._ctx = ctx;
    this._lines = [];
    this._table = [];
    this._tableScale = 10;
    this._createLookupTable();
}
Grid.prototype._createLookupTable = function() {
    this._table = [];
    for (var y = 0; y < Math.ceil(ctx.canvas.height / this._tableScale); y++) {
        this._table[y] = [];
        for (var x = 0; x < Math.ceil(ctx.canvas.width / this._tableScale); x++)
            this._table[y][x] = null;
    }
};
Grid.prototype._updateLookupTable = function(line) {
    var x0 = line.from[0],
        y0 = line.from[1],
        x1 = line.to[0],
        y1 = line.to[1],
        dx = Math.abs(x1 - x0),
        dy = Math.abs(y1 - y0),
        sx = (x0 < x1) ? 1 : -1,
        sy = (y0 < y1) ? 1 : -1,
        err = dx - dy;
    while(true) {
        this._table[Math.floor(y0 / 10)][Math.floor(x0 / 10)] = line;
        if ((x0 == x1) && (y0 == y1)) break;
        var e2 = 2 * err;
        if (e2 >- dy) { err -= dy; x0 += sx; }
        if (e2 < dx) { err += dx; y0 += sy; }
    }    
};
Grid.prototype.hitTest = function(x, y) {
    var ctx = this._ctx,
        hoverLine = this._table[Math.floor(y / 10)][Math.floor(x / 10)];
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    this._lines.forEach(function(line) {
        line.draw(ctx, line === hoverLine ? "red" : "black");
    });
};
Grid.prototype.drawLookupTable = function() {
    ctx.beginPath();
    for (var y = 0; y < this._table.length; y++)
        for (var x = 0; x < this._table[y].length; x++) {
            if (this._table[y][x])
                ctx.rect(x * 10, y * 10, 10, 10);
        }
    ctx.strokeStyle = "rgba(0, 0, 0, 0.2)";
    ctx.stroke();
};
Grid.prototype.addLine = function(line) {
    this._lines.push(line);
    this._updateLookupTable(line);
};
Grid.prototype.draw = function() {
    var ctx = this._ctx;
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    this._lines.forEach(function(line) {
        line.draw(ctx);
    });
};

function Line(x0, y0, x1, y1) {
    this.from = [ x0, y0 ];
    this.to = [ x1, y1];
}
Line.prototype.draw = function(ctx, style) {
    ctx.beginPath();
    ctx.moveTo(this.from[0], this.from[1]);
    ctx.lineTo(this.to[0], this.to[1]);
    ctx.strokeStyle = style || "black";
    ctx.stroke();
};

var grid = new Grid(ctx);
grid.addLine(new Line(80, 10, 240, 75));
grid.addLine(new Line(150, 200, 50, 45));
grid.addLine(new Line(240, 10, 20, 150));
grid.draw();
grid.drawLookupTable();

$canvas.on("mousemove", function(e) {
    grid.hitTest(e.offsetX, e.offsetY);
    grid.drawLookupTable();
});
person huysentruitw    schedule 18.01.2015
comment
Я думаю, что это я уменьшал масштаб при запуске розыгрыша в Брезенхэме, а не уменьшал масштаб только непосредственно перед сохранением значения в таблице. Спасибо! - person Eindbaas; 19.01.2015

Ваш лучший вариант — рассматривать положение курсора мыши как небольшой круг (например, с радиусом 5 пикселей) и проверять, пересекается ли линия с кругом.

Используйте математику, как описано в этом Q&A.

JavaScript

Простая функция для обнаружения пересечения:

function lineCircleIntersects(x1, y1, x2, y2, cx, cy, cr) {
    var dx = x2 - x1,
        dy = y2 - y1,
        a = dx * dx + dy * dy,
        b = 2 * (dx * (x1 - cx) + dy * (y1 - cy)),
        c = cx * cx + cy * cy,
        bb4ac;

    c += x1 * x1 + y1 * y1;
    c -= 2 * (cx * x1 + cy * y1);
    c -= cr * cr;
    bb4ac = b * b - 4 * a * c;

    return bb4ac >= 0;  // true: collision, false: no collision
}

Посмотрите, как это работает в этом jsFiddle, но обратите внимание, что эта функция также вернет true, если курсор находится на наклон линии вне [x1, y1], [x2, y2]. Я оставлю это на ваше усмотрение :)

Вы также можете попробовать библиотеку line-circle-collision на github, которая должна дать вам то, что вы хотеть.

person huysentruitw    schedule 18.01.2015
comment
Спасибо за пример, буду пробовать. Хотя это намного дороже (тем более, что я называю это на mousemove), мне понравился мой подход, заключающийся в простой и быстрой таблице поиска без каких-либо вычислений в ней. - person Eindbaas; 18.01.2015
comment
Если я прочитаю ваш ответ, вам нужно будет сделать расчеты только на click. Я просто использовал mousemove в демонстрационных целях. - person huysentruitw; 18.01.2015