JS Холст: Konva Безье выпуск

Question

Я хочу нарисовать ломаную линию с закругленными углами, как это:

Существует проблема с установкой точек для выравнивания с Библиотека Konva .

Я пытаюсь использовать свойство bezier для имитации гладких углов без натяжения и, как делает c, говорит:

if no tension is provided but bezier=true, we draw the line as a bezier using the passed points

Но если Я установил bezier: true, он получает только 3 пары точек [x, y] и игнорирует остальную часть массива точек, а затем просто обрезает ломаную линию.

Пример на codeopen

Я не знаю, как нарисовать прямую полилинию с закругленными углами без опции bezier только с tension.

Есть ли какой-нибудь подход для реализации такой фигуры с помощью Konva или других JS Библиотека холста?

Answer 1

На самом деле, есть способ рисовать закругленные углы только с помощью Konva.Path:

var path = new Konva.Path({
        x: 20,
        y: 20,
        data: 'm0 0 h 90 q 10 0 10 10 v 80 q 0 10 10 10 h 90',
        stroke: 'red',
      });

Используя квадратичный c оператор кривой Безье (Q) из правил пути SVG мы можно достичь такого результата:

Это пример на Codepen.