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

Question

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

文档说：

We can use the renderer to access the HTML5 Canvas context, and to use special methods like context.fillStrokeShape(shape) which automatically handles filling, stroking, and applying shadows.

我猜是这种情况，因为路径是使用 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 路径字符串转换为 canvas 指令，然后使用 context.moveTo，等等...绘制路径。但是使用 Path2D 应该已经为你做到了。

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

Answer 1

查看 konvajs 文档：

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

我认为不需要Path2D。

将你的资源插入 Konva.Path.data

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

Creating a custom shape in konva.js using path2d?

javascript

konvajs

konva