Как нарисовать кривую Безье с переменной толщиной на холсте HTML? - PullRequest
Новая
       28

Как нарисовать кривую Безье с переменной толщиной на холсте HTML?

2 голосов
/ 30 ноября 2011

Я хочу сделать визуализацию с помощью кривых Безье, соединяющих коробки. Более важные края должны быть толще. Каждый блок имеет один выход, но много входов. Поэтому я хочу сохранить постоянную толщину некоммерческих ребер (чтобы сэкономить место) и изменять только толщину исходящих ребер (из которых только один на блок).

Вот почему я хочу рисовать безье отверждения с различной толщиной на каждом конце. Они должны отображаться на элементе HTML-холста. Я знаю context.bezierCurveTo(), но это допускает только одну толщину кривой.

Кто-нибудь может мне помочь?

Ответы [ 2 ]

3 голосов
/ 30 ноября 2011

предположим, что вы рисуете кривую толщиной 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();
2 голосов
/ 30 ноября 2011

Если кто-то еще захочет сделать что-то подобное, вот мой код: 

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