¿Cómo dibujar una curva Bezier con un grosor variable en un lienzo HTML?

Question

Quiero hacer una visualización con curvas Bezier que conecten cajas. Los bordes más importantes deben ser más gruesos. Cada cuadro tiene una salida pero muchas entradas. Por lo tanto, quiero mantener constantes el grosor de los bordes de la incómetro (para ahorrar espacio) y alterar solo el grosor de los bordes salientes (de los cuales solo hay uno por caja).

Es por eso que quiero dibujar Bezier Cureves con un grosor diferente en cada extremo. Se representarán en un elemento de lona HTML. lo sé context.bezierCurveTo() Pero eso solo permite un grosor de la curva.

¿Alguien puede ayudarme?

Answer 1

Supongamos que está dibujando una curva, que es gruesa 2 veces r En X1, Y1 y el punto de control 1 están en X-Driection, entonces puedes hacer algo como:

  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

En caso de que alguien más quiera hacer algo similar, aquí está mi código:

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();
    }
}