Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

195
Vistas
¿Creando una forma personalizada en konva.js usando path2d?

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?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda