如何在 HTML 画布上绘制可变厚度的贝塞尔曲线？

Question

我想用贝塞尔曲线连接框进行可视化。更重要的边缘应该更厚。每个盒子都有一个输出，但有多个输入。因此，我想保持传入边缘的厚度不变（以节省空间）并仅更改传出边缘的厚度（每个盒子只有一个）。

这就是为什么我想在每一端绘制不同厚度的贝塞尔曲线。它们应呈现在 HTML canvas 元素上。我知道 context.bezierCurveTo() ，但这只允许曲线的一种厚度。

有人可以帮我吗？

Answer 1

假设您正在绘制一条曲线，其厚度是 x1,y1 处 r 的 2 倍，并且控制点 1 位于 x 方向，那么您可以执行以下操作：

  canvas.fillStyle = "red";  

  canvas.beginPath();  
  canvas.moveTo(x1, y1-r);  
  canvas.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2);
  canvas.bezierCurveTo(cpx2, cpy2, cpx1, cpy1, x1, y1+r);
  canvas.lineTo(x1, y1+r);  
  canvas.fill(); 

Answer 2

如果其他人想做类似的事情，这是我的代码：

function plotFlow(context, centerLeft, centerRight, thicknessLeft, thicknessRight) {
    var leftUpper = {x: centerLeft.x, y: centerLeft.y - thicknessLeft / 2};
    var leftLower = {x: centerLeft.x, y: leftUpper.y + thicknessLeft};
    var rightUpper = {x: centerRight.x, y: centerRight.y - thicknessRight / 2};
    var rightLower = {x: centerRight.x, y: rightUpper.y + thicknessRight};

    var center = (centerRight.x + centerLeft.x) / 2;
    var cp1Upper = {x: center, y: leftUpper.y};
    var cp2Upper = {x: center, y: rightUpper.y};
    var cp1Lower = {x: center, y: rightLower.y};
    var cp2Lower = {x: center, y: leftLower.y};

    context.beginPath();
    context.moveTo(leftUpper.x, leftUpper.y);
    context.bezierCurveTo(cp1Upper.x,cp1Upper.y, cp2Upper.x,cp2Upper.y, rightUpper.x,rightUpper.y);
    context.lineTo(rightLower.x, rightLower.y);
    context.bezierCurveTo(cp1Lower.x,cp1Lower.y, cp2Lower.x,cp2Lower.y, leftLower.x,leftLower.y);
    context.lineTo(leftUpper.x, leftUpper.y);
    context.fill();

    if (typeof context.endPath == 'function') {
        context.endPath();
    }
}