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

How to draw a bezier curve with variable thickness on an HTML canvas?

本文关键字：曲线 HTML 绘制      更新时间：2023-09-26

我想用贝塞尔曲线连接框进行可视化。更重要的边缘应该更粗。每个盒子有一个输出，但有很多输入。因此，我想保持输入边的厚度不变(为了节省空间)，只改变输出边的厚度(每个盒子只有一个)。

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

有人能帮我一下吗?

假设你正在画一条曲线，它的粗为2乘以r (x1,y1)控制点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();

如果有人想做类似的事情，下面是我的代码:

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();
    }
}
相关文章：