Question

在HTML5画布对象上，我必须从目标点减去一个距离，以便在同一行上给出最终目的地。

所以，首先我用毕达哥拉斯定理计算了源点和目标点之间的距离，但我对泰勒斯定理的记忆太难以找到最终点（在同一条线上），右边x和y属性。

function getDistance (from, to){
    return Math.hypot(to.x - from.x, to.y - from.y);
}
function getFinalTo (from, to, distanceToSubstract){

    //with Pythagore we obtain the distance between the 2 points
    var originalDistance = getDistance(from, to);
    var finalDistance = originalDistance - distanceToSubstract;

    //Now, I was thinking about Thales but all my tries are wrong
    //Here some of ones, I need to get finalTo properties to draw an arrow to a node without

    var finalTo = new Object;
    finalTo.x = ((1 - finalDistance) * from.x) + (finalDistance * to.x);
    finalTo.y = ((1 - finalDistance) * from.y) + (finalDistance * to.y);

    return finalTo;
}

实际上，箭头被圆形节点隐藏，可以是大约100像素的半径，所以我试着得到最后一点。

非常感谢。的问候，

Answer 1

您可以使用简单的按比例比例：（我没有考虑圆帽）

ratio = finalDistance / originalDistance
finalTo.x = from.x + (to.x - from.x) * ratio;
finalTo.y = from.y + (to.y - from.y) * ratio;

你的方法是尝试使用线性插值，但你错误地将距离（像素，米等）与比率混合（无量纲 - 这个术语是对的吗？）

ratio = finalDistance / originalDistance
finalTo.x = ((1 - ratio) * from.x) + (ratio * to.x);
finalTo.y = ((1 - ratio) * from.y) + (ratio * to.y);

请注意，这两种方法实际上都是相同的公式。

Answer 2

取决于线路上限。对于"butt"，没有任何变化，对于"round"和"square"，您的行延伸了每端宽度的一半

以下功能会缩短线条以适应线帽。

drawLine(x1,y1,x2,y2){
    // get vector from start to end
    var x = x2-x1;
    var y = y2-y1;
    // get length
    const len = Math.hypot(x,y) * 2;  // *2 because we want half the width
    // normalise vector
    x /= len;
    y /= len;
    if(ctx.lineCap !== "butt"){
        // shorten both ends to fit the length
        const lw = ctx.lineWidth;
        x1 += x * lw;
        y1 += y * lw;
        x2 -= x * lw;
        y2 -= y * lw;
    }
    ctx.beginPath()
    ctx.lineTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
 }

对于斜接连接，以下答案将有助于https://stackoverflow.com/a/41184052/3877726

使用HTML5画布，如何使用偏移量计算最终点坐标？

2 个答案: