math - 给定两个点，如何通过它们画一条线？

Question

假设我有 {x:10, y:20} 和 {x:100, y:40}，如果我想画一条从 10,20 开始到 100,40 结束的线，我会这样做:

 context.beginPath();
 context.moveTo(10, 20);
 context.lineTo(100, 40);
 context.stroke();

但是如果我想在它们之间画一条线该怎么办？也就是说，这条线比两点之间的空间更长，但它跨越了两点？

Answer 1

您可以使用“逆”插值 - 我的意思是，您可以使用负值或值 > 1 来获得线“外部”，而不是用 [0.0, 1.0] 的分数来插值线:

来自this online demo :

代码很简单，您使用 x 和 y 集并用增量对它们进行插值，这里是 0 和 1 之间的小数值，其中 1 是其中一个点之外的双倍长度:

function extLine(x1, y1, x2, y2, delta) {

    var ox1 = x1 + (x2 - x1) * -delta,
        ox2 = x1 + (x2 - x1) * (1 + delta),
        oy1 = y1 + (y2 - y1) * -delta,
        oy2 = y1 + (y2 - y1) * (1 + delta);

    ctx.beginPath();
    ctx.moveTo(ox1, oy1);
    ctx.lineTo(ox2, oy2);

    /// for the demo a couple of markers for the original points        
    ctx.rect(x1 - 2, y1 - 2, 5, 5);
    ctx.rect(x2 - 2, y2 - 2, 5, 5);

    ctx.stroke();
}

您可以计算线条的长度，然后从该结果中获取一个分数，而不是用分数作为增量，这样您就可以以像素数来延长线条。

这是一个您提供像素数的版本:

function extLine2(x1, y1, x2, y2, pixels) {

    /// calc fraction based on line length and added pixels        
    var xd = x2 - x1,
        yd = y2 - y1,
        len = Math.sqrt(xd * xd + yd * yd),
        delta = pixels / len,

        /// as before
        ox1 = x1 + (x2 - x1) * -delta,
        ox2 = x1 + (x2 - x1) * (1 + delta),
        oy1 = y1 + (y2 - y1) * -delta,
        oy2 = y1 + (y2 - y1) * (1 + delta);

    ctx.beginPath();
    ctx.moveTo(ox1, oy1);
    ctx.lineTo(ox2, oy2);

    ctx.rect(x1 - 2, y1 - 2, 5, 5);
    ctx.rect(x2 - 2, y2 - 2, 5, 5);

    ctx.stroke();
}