Javascript JS画布：Konva bezier问题

我想用圆角绘制多段线，如下所示：

设置要与之一致的点存在问题

我正在尝试使用

bezier

属性来模拟平滑的拐角，而不产生张力，正如doc所说：

如果未提供张力，但bezier=true，则使用传递的点将线绘制为bezier

但是如果我设置bezier:true，它只接收3对点[x，y]，忽略点阵列的其余部分，然后只剪切多段线


我不知道如何在不使用
贝塞尔
选项的情况下，仅使用
张力
绘制带圆角的直线多段线

有没有办法用Konva或其他JS Canvas库实现这样的图形？
实际上，有一种方法只能用
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',
      });

使用来自的二次曲线bezier（Q）算子，我们可以获得这样的结果：


这是一个代码笔。
这是函数的源代码，它允许你用弯曲的角画出漂亮的线。您可以创建
Konva.Line
对象，并向参数添加特殊的
sceneFunc
函数

const BORDER_RADIUS = 40;

let line = new Konva.Line({
    points:[0,0,100,0,100,100,200,100], // put you points array here
    stroke:'#000000',
    strokeWidth:2,
    sceneFunc: function(ctx,shape){
        let points = shape.points();

        ctx.beginPath();
        ctx.moveTo(points[0],points[1]);
        if (points.length == 4) {
            ctx.lineTo(points[2],points[3]);
        } else {
            let n = 0;

            while (n < points.length-4) {
                let deltaX1 = (points[n+2] - points[n+0]);
                let deltaY1 = (points[n+3] - points[n+1]);
                let br1 = Math.min(BORDER_RADIUS,Math.max(Math.abs(deltaX1/2),Math.abs(deltaY1/2)));

                let deltaX2 = (points[n+2+2] - points[n+0+2]);
                let deltaY2 = (points[n+3+2] - points[n+1+2]);
                let br2 = Math.min(BORDER_RADIUS,Math.max(Math.abs(deltaX2/2),Math.abs(deltaY2/2)));

                let br = Math.min(br1,br2);

                let oneX = points[n+0] + (Math.abs(deltaX1) - br)*Math.sign(deltaX1);
                let oneY = points[n+1] + (Math.abs(deltaY1) - br)*Math.sign(deltaY1);

                ctx.lineTo(oneX, oneY);
                n+=2;
                let twoX = points[n+0] + (br)*Math.sign(deltaX2);
                let twoY = points[n+1] + (br)*Math.sign(deltaY2);

                ctx.quadraticCurveTo(points[n+0], points[n+1],twoX, twoY);
            }
            ctx.lineTo(points[points.length-2],points[points.length-1]);        
        }
        ctx.strokeShape(shape);
    }
}

const BORDER\u RADIUS=40；
let line=新的Konva.line({
点数：[0,0100,010010020100]，//在此处放置点数数组
笔划：'#000000'，
冲程宽度：2，
sceneFunc:函数（ctx、形状）{
设点=shape.points（）；
ctx.beginPath（）；
ctx.moveTo（点[0]，点[1]）；
if（points.length==4）{
ctx.lineTo（点[2]，点[3]）；
}否则{
设n=0；
而（n<点长度-4）{
设deltaX1=（点[n+2]-点[n+0]）；
设deltaY1=（点[n+3]-点[n+1]）；
设br1=Math.min（边界半径，Math.max（Math.abs（deltaX1/2），Math.abs（deltaY1/2））；
设deltaX2=（点[n+2+2]-点[n+0+2]）；
设deltaY2=（点[n+3+2]-点[n+1+2]）；
设br2=Math.min（BORDER_半径，Math.max（Math.abs（deltaX2/2），Math.abs（deltaY2/2））；
设br=Math.min（br1，br2）；
设oneX=points[n+0]+（Math.abs（deltaX1）-br）*数学符号（deltaX1）；
设oneY=points[n+1]+（Math.abs（deltaY1）-br）*数学符号（deltaY1）；
ctx.lineTo（oneX，oneY）；
n+=2；
设twoX=点[n+0]+（br）*数学符号（deltaX2）；
设twoY=点[n+1]+（br）*数学符号（deltaY2）；
ctx.二次曲线（点[n+0]，点[n+1]，两点，两点）；
}
ctx.lineTo（点[points.length-2]，点[points.length-1]）；
}
冲程形状（形状）；
}
}
这回答了你的问题吗？AFAICS这个问题涵盖了相同的领域。我对答案的理解是，它与@Agersun-below-line+quad-bez+line+quad-bez+line的概念相同。谢谢你的回答。让我在一些代码沙盒中检查一下