在Konva.js中通过Path2D创建自定义形状时fillStrokeShape不生效问题

问题根因 #

• sceneFunc 传入的 ctx 是 Konva 自行封装的上下文对象，并非原生 Canvas 2D 上下文。你直接调用原生 stroke() 方法传入 Path2D 绘图时，路径不会被 Konva 封装的上下文捕获，fillStrokeShape 读取不到当前有效路径，自然无法应用你在 Shape 实例上定义的填充、描边等样式。
• 你在代码中提前调用了 ctx.stroke() 手动完成了路径绘制，使用的是默认上下文样式，后续 fillStrokeShape 即使拿到有效路径也不会覆盖之前的绘制结果，反而可能出现重复绘制的问题。

解决方案 #

方案1：直接使用 Konva.Path（推荐） #

Konva 内置的 Konva.Path 原生支持传入 SVG 路径字符串，不需要自定义 sceneFunc 即可自动处理样式应用：

let res = 'M-258.4308858485627,28.5215223914706A260,260,0,0,1,-241.23905423140914,-96.97277305272468Q0,0,-258.4308858485627,28.5215223914706Z'
let path = new Konva.Path({
  data: res,
  stroke: 'blue',
  fill: 'green',
  strokeWidth: 1,
  rotation: 90
})

方案2：自定义 sceneFunc 中使用 Path2D #

如果必须在自定义 sceneFunc 中使用 Path2D 实现逻辑，调整代码顺序：先定义路径不提前绘制，再调用 fillStrokeShape 应用样式：

let shape = new Konva.Shape({
  stroke: 'blue',
  fill: 'green',
  strokeWidth: 1,
  rotation: 90,
  sceneFunc: function (ctx, shape) {   
    const nativeCtx = ctx.getNativeContext()
    const path = new Path2D(res)
    nativeCtx.beginPath()
    nativeCtx.path(path)
    ctx.fillStrokeShape(shape)
  }
})

内容的提问来源于stack exchange，提问作者Ivan Bacher