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

125
Vistas
Ability to draw lines with snap to angle KonvaJs

Is there any ability to draw lines with snap to angle? I want to allow draw lines only with following angles: 0, 45, 90, 135, 180...

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

0

function checkAngle(shape) {
if (data.attrs.type === 'line') {
    var points = shape.points();
    // [x1, y1, x2, y2]
    var dy = points[3] - points[1];
    var dx = points[2] - points[0];

    var angle = Math.atan2(dy, dx);
    angle *= 180 / Math.PI;

    console.log('Angle is: ' + angle);
    if ((-5 <= angle && angle <= 5) || (175 <= angle && angle <= 185) || (-175 >= angle && angle >= -185)) {
        shape.attrs.points = [points[0], points[1], points[2], points[1]];
    } else if ((85 <= angle && angle <= 95) || (-85 >= angle && angle >= -95)) {
        shape.attrs.points = [points[0], points[1], points[0], points[3]];
    }
    return shape;
  }
}

This function checks angle of line and then according to angle value changed X and Y points to draws straight vertical or horizontal line

about 4 years ago · Juan Pablo Isaza Denunciar

0

No. There is nothing built-in to Konva to snap lines when they are being drawn. I am assuming these are straight lines ? You would have to do the math yourself to work where to snap to. Then you could apply that in the appropriate mouseevents to get you what you need.

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