如何“软化”折线的边缘？

Question

给定一条由多个点组成的线，如何通过添加中间点使线更平滑/更加曲线/柔和 - 同时保持原始点完整无损并且无法移动？

为了说明问题，我想从上面去下面这个例子：

注意如何在上面的图片，如果我们开始在底部将有一个更清晰的右转。然而，在底部图像中，通过添加位于两个点中间的中间点并使用其他线的角度的平均值，使得这个尖锐的右转变得更“柔和”。 （不同的是，想象一下赛车会驾驶的路线，因为它不会突然改变方向。）但是请注意，原始点没有被“触及”，我只是增加了更多的点。

谢谢！对于它的价值，我正在使用JavaScript和Canvas来实现它。

Answer 1

下面的代码中发现elsewhere here做这项工作对我来说，在JavaScript的画布的具体情况我使用的 - 但请参见安格斯答案更普遍做法：

var max = points.length; 
context.beginPath(); 
var i = 0; 
context.moveTo(points[i].x, points[i].y); 
for (i = 1; i < max - 2; i++) { 
    var xc = (points[i].x + points[i + 1].x) * .5; 
    var yc = (points[i].y + points[i + 1].y) * .5; 
    context.quadraticCurveTo(points[i].x, points[i].y, xc, yc); 
} 
context.quadraticCurveTo(points[max - 2].x, points[max - 2].y, points[max - 1].x,points[max - 1].y); 
context.closePath(); 
context.stroke(); 

Answer 2

与每个边缘（E1 & E2）相邻的 '中间' 边缘（我）做的 '我'

发现超出端部的2点X距离

• 设X =一半长度触摸e1和e2的'me'（见下文）
• 让这2个点变成更加卑鄙的控制点。
• 使用DeCasteljau算法（example here）找到的三次Bezier的中点（2个控制点和“我”的每一端）
• 插入我的两个坐标之间新的“中点”。

FloatPoint ExtendLine(const FloatPoint A, const FloatPoint B, single distance) 
{ 
    FloatPoint newB; 
    float lenAB = sqrt((A.x - B.x) * (A.x - B.x) + (A.y - B.y) * (A.y - B.y)); 
    newB.X = B.x - (B.x - A.x)/lenAB * distance; 
    newB.Y = B.Y - (B.Y - A.Y)/lenAB * distance; 
    return newB; 
}