文章/答案/技术大牛

发布

社区首页 >问答首页 >JS画布: Konva bezier问题

问JS画布: Konva bezier问题
EN

Stack Overflow用户

提问于 2020-03-27 10:37:13

回答 2查看 730关注 0票数 3

我想用这样的圆角画折线：

设置点以与Konva图书馆保持一致存在问题。

我试图使用bezier属性来模拟没有张力的平滑角，就像doc说的：

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

但是如果我设置了bezier: true，它只接收3对point the，y，而忽略点数组的其余部分，然后只削减polyline。

代码开放示例

我不知道如何用圆角画直线，没有bezier选项，只有tension。

有什么方法可以用Konva或其他JS画布库来实现这样的图形呢？

konvajs

konva

javascript

canvas

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-27 12:31:07

实际上，只有使用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',
      });

利用svg路径规则中的二次曲线bezier (Q)算子，我们可以得到这样的结果：

这是一个关于Codepen的示例。

票数 2

Stack Overflow用户

发布于 2021-02-07 15:59:58

这是函数的源代码，它允许你用弯曲的弯角画出相当漂亮的线条。您可以创建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);
    }
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60884302

复制

相似问题

问JS画布: Konva bezier问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS画布: Konva bezier问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS画布: Konva bezier问题
EN