javascript - 将坐标外推到 Canvas 对象的边缘

Question

我正在编写一个浏览器应用程序，试图在图像中发现兴趣点。

一旦我计算出这些点，我就在它们之间画一条线。

我的应用程序需要将这些线外推到 Canvas 的边缘。

有没有人有在 javascript 中进行线性图计算的经验？

我搞了个示范

(function(){

    function drawLine(points){
        context.beginPath();
        points.forEach(function(point){
            context.lineTo(point.x, point.y);   
        });
        context.stroke();
    }

    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', 500);
    canvas.setAttribute('height', 300);
    document.body.appendChild(canvas);
    context = canvas.getContext("2d");

    // top
    drawLine([{x: 100, y: 40}, {x: 400, y: 10}]);
    // bottom
    drawLine([{x: 50, y: 220}, {x: 300, y: 290}]);
    // left
    drawLine([{x: 40, y: 20}, {x: 80, y: 260}]);
    // right
    drawLine([{x: 490, y: 60}, {x: 440, y: 290}]);

})();

https://jsfiddle.net/y87a0dec/

非常感谢。

Answer 1

p = (p.x, p.y) 和 q = (q.x, q.y) 之间的线段可以扩展为 y - p.y = a * (x - p.x)，其中 a 是斜率 (p.y - q.y)/(p.x - q.x)。 (如果p.x = q.x，这是无效的，但这是我们可以单独处理的特殊情况。)

通过求解 y 和 x，我们得到等效的公式:y = a * (x - p.x) + p.y 和x = (y - p.y)/a + p.x。将我们的 Canvas 边缘插入到这些方程式中，得到延长线与 Canvas 相交的点。

通过适当的案例分析，我们可以确定延长线与 Canvas 的四个边缘中的哪两个相交。下面是 p 和 q 之间的线段扩展到 Canvas [x0, x1] × 的一般情况的实现[y0, y1]:

function extend(p, q, x0, x1, y0, y1) {
    var dx = q.x - p.x;
    var dy = q.y - p.y;
    if (dx === 0) return [{x: p.x, y: y0}, {x: p.x, y: y1}];
    var slope = dy / dx;

    var y_at_x0 = slope * (x0 - p.x) + p.y;
    var y_at_x1 = slope * (x1 - p.x) + p.y;
    var x_at_y0 = (y0 - p.y) / slope + p.x;
    var x_at_y1 = (y1 - p.y) / slope + p.x;

    var r, s;
    if (y_at_x0 < y0) r = {x: x_at_y0, y: y0};
    else if (y_at_x0 <= y1) r = {x: x0, y: y_at_x0};
    else r = {x: x_at_y1, y: y1};

    if (y_at_x1 < y0) s = {x: x_at_y0, y: y0};
    else if (y_at_x1 <= y1) s = {x: x1, y: y_at_x1};
    else s = {x: x_at_y1, y: y1};

    return [r, s];
}

在下面的 jsfiddle 中，drawExtended 将 extend 的结果传递到您的 drawLine 中。顶部和左侧部分已扩展到 Canvas 边缘: https://jsfiddle.net/y87a0dec/1/