使用 path2d 在 konva.js 中创建自定义形状？答案

【问题标题】：Creating a custom shape in konva.js using path2d?使用 path2d 在 konva.js 中创建自定义形状？
【发布时间】：2021-12-26 19:26:06
【问题描述】：

使用 d3 进行一些形状计算，然后使用 Konva.js 进行绘图。从 svg 路径字符串创建新形状。形状已绘制，但fillStrokeShape 似乎没有应用任何样式。

文件说：

我们可以使用渲染器来访问 HTML5 Canvas 上下文，并使用像 context.fillStrokeShape(shape) 这样的特殊方法自动处理填充、描边和应用阴影。

我猜是这种情况，因为路径是使用stroke() 或fill() 绘制的。

let res = 'M-258.4308858485627,28.5215223914706A260,260,0,0,1,-241.23905423140914,-96.97277305272468Q0,0,-258.4308858485627,28.5215223914706Z'

    let shape = new Konva.Shape({
        stroke: 'blue',
        fill: 'green',
        strokeWidth: 1,
        rotation: 90,
        sceneFunc: function (ctx, shape) {   
          ctx.beginPath()

          ctx.stroke(new Path2D(res))
        
    
          ctx.fillStrokeShape(shape)
        }
      })

可能的解决方案是将 svg 路径字符串转换为画布指令，然后使用 context.moveTo 等...绘制路径。但是使用Path2D 应该已经为您做到了。

有人知道为什么fillStrokeShape 不起作用吗？

【问题讨论】：

标签： javascript konvajs konva

【解决方案1】：

查看 konvajs 的文档：

https://konvajs.org/docs/shapes/Path.html https://konvajs.org/docs/shapes/Custom.html

我认为不需要 Path2D。

在 Konva.Path.data 中插入你的资源

【讨论】：