Wie zeichne ich eine Bezier -Kurve mit variabler Dicke auf einer HTML -Leinwand?

Question

Ich möchte eine Visualisierung mit Bezier -Kurven machen, die Boxen verbinden. Wichtigere Kanten sollten dicker sein. Jedes Feld hat einen Ausgang, aber viele Eingänge. Daher möchte ich die Dicke der Einkommenskanten konstant halten (um Platz zu sparen) und nur die Dicke der ausgehenden Kanten (von denen es nur einen pro Box gibt) zu verändern.

Aus diesem Grund möchte ich an jedem Ende Bezier -Heilungen mit unterschiedlicher Dicke zeichnen. Sie sind auf einem HTML -Leinwandelement gerendert. Ich weiss context.bezierCurveTo() Das erlaubt jedoch nur eine Dicke der Kurve.

Kann mir jemand helfen?

Answer 1

Angenommen, Sie zeichnen eine Kurve, die 2 Mal dick ist r Bei x1 befindet sich Y1 und Controll-Point 1 in der X-Driktion, dann können Sie so etwas tun wie:

  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

Falls jemand etwas Ähnliches tun möchte, hier ist mein Code:

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