Usando d3 para algunos cálculos de formas, luego dibujando con Konva.js. Creando una nueva forma a partir de una cadena de ruta svg. La forma está dibujada, pero parece que fillStrokeShape no aplica ningún estilo.
La documentación dice:
Podemos usar el renderizador para acceder al contexto HTML5 Canvas y usar métodos especiales como context.fillStrokeShape(shape) que maneja automáticamente el relleno, el trazo y la aplicación de sombras.
Supongo que este es el caso porque la ruta se dibuja usando stroke() o 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) } }) La posible solución sería convertir la cadena de ruta svg en instrucciones de lienzo, luego usar context.moveTo, etc... dibujar la ruta. Pero usar Path2D ya debería hacer esto por ti.
¿Alguien sabe por qué fillStrokeShape no funciona?
Ver documentos de konvajs:
https://konvajs.org/docs/shapes/Path.html https://konvajs.org/docs/shapes/Custom.html
Creo que Path2D no es necesario.
Inserte su res en Konva.Path.data