Canvas绘制混合直曲图形时的二次贝塞尔控制点计算咨询

首先纠正你的绘制逻辑：当前代码中quadraticCurveTo的参数顺序和遍历逻辑有误，quadraticCurveTo的正确用法是ctx.quadraticCurveTo(控制点x, 控制点y, 终点x, 终点y)，而你当前把终点设为了当前点p1，这会导致绘制方向错误。正确的循环逻辑应该是从第一个点开始，依次处理到下一个点的线段。

接下来针对你的需求，分两种场景解决控制点计算问题：

场景1：使用二次贝塞尔曲线（单控制点） #

二次贝塞尔曲线的起点切线方向指向控制点，终点切线方向由控制点指向终点。若已知p1（起点）的切线角度r1和p2（终点）的切线角度r2，控制点是这两条切线的交点，计算步骤如下：

1. 用参数方程表示两条切线：

   • p1的切线：x = p1.x + t*cos(r1), y = p1.y + t*sin(r1)（t为任意实数，正方向对应切线方向）
   • p2的切线：x = p2.x + s*cos(r2), y = p2.y + s*sin(r2)（s为任意实数，负方向对应切线指向曲线内部）

2. 联立方程求解参数t和s：

   const denominator = Math.sin(r1 - r2);
   if (Math.abs(denominator) < 1e-6) {
       // 切线平行，无法用二次贝塞尔，降级为直线或改用三次贝塞尔
       return { x: (p1.x + p2.x)/2, y: (p1.y + p2.y)/2 };
   }
   const s = ((p1.x - p2.x) * Math.sin(r1) + (p2.y - p1.y) * Math.cos(r1)) / denominator;
   const t = ((p2.x - p1.x) * Math.sin(r2) + (p1.y - p2.y) * Math.cos(r2)) / Math.sin(r2 - r1);
   

3. 计算控制点坐标：

   const controlPoint = {
       x: p1.x + t * Math.cos(r1),
       y: p1.y + t * Math.sin(r1)
   };
   

场景2：使用三次贝塞尔曲线（更灵活，推荐） #

如果需要完全独立控制两端的切线角度（避免二次贝塞尔的平行限制），推荐使用三次贝塞尔曲线（bezierCurveTo），它有两个控制点，分别对应起点和终点的切线：

1. 定义切线长度比例（比如取线段长度的1/3，可根据需求调整）：

   const segmentLength = Math.hypot(p2.x - p1.x, p2.y - p1.y);
   const handleLengthRatio = 1/3;
   const handleLength = segmentLength * handleLengthRatio;
   

2. 计算两个控制点：

   • 起点p1的控制点：沿r1方向延伸handleLength
   • 终点p2的控制点：沿r2反方向延伸handleLength（因为三次贝塞尔终点切线由该控制点指向终点）

   const controlPoint1 = {
       x: p1.x + Math.cos(r1) * handleLength,
       y: p1.y + Math.sin(r1) * handleLength
   };
   const controlPoint2 = {
       x: p2.x - Math.cos(r2) * handleLength,
       y: p2.y - Math.sin(r2) * handleLength
   };
   

修正后的完整绘制代码 #

const parts = [ 
    {x: 359, y: 187, r1: 0.4, r2: 0},
    {x: 214, y: 184, r1: 0, r2: 0.5}
    // ...其他点
];

ctx.beginPath();
ctx.moveTo(parts[0].x, parts[0].y);

for (let j = 0, len = parts.length; j < len; j++) {
    const p1 = parts[j];
    const p2 = parts[j < len - 1 ? j + 1 : 0]; // 闭合图形的话最后一个点连回第一个点

    if ('r1' in p1 && p1.r1 > 0 && 'r2' in p2 && p2.r2 > 0) {
        // 这里选择使用三次贝塞尔（推荐）
        const segmentLength = Math.hypot(p2.x - p1.x, p2.y - p1.y);
        const handleLength = segmentLength * (1/3);
        
        const cp1X = p1.x + Math.cos(p1.r1) * handleLength;
        const cp1Y = p1.y + Math.sin(p1.r1) * handleLength;
        const cp2X = p2.x - Math.cos(p2.r2) * handleLength;
        const cp2Y = p2.y - Math.sin(p2.r2) * handleLength;

        ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, p2.x, p2.y);
    } else {
        ctx.lineTo(p2.x, p2.y);
    }
}
ctx.closePath(); // 如果是闭合图形
ctx.stroke(); // 或fill()

注意事项 #

• 角度r1/r2默认按Canvas的坐标系规则：0为x轴正方向，逆时针为角度增大方向
• 如果你的角度是顺时针定义的，需要将Math.cos(r1)改为Math.cos(-r1)，Math.sin(r1)改为Math.sin(-r1)
• 切线长度比例可根据设计需求调整，通常1/3到1/4是比较自然的曲线效果

内容的提问来源于stack exchange，提问作者Igor Shmukler