JS Canvas: вопрос о Конве Безье

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

введите описание изображения здесь

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

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

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 Canvas?

Всего 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',
      });

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

введите описание изображения здесь

Это пример на codeopen, надеюсь, он кому-нибудь поможет.


Есть идеи?

10000