0

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...

bohdan shvahuliak
  • 11
  • 3

2 Answers2

1
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

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
bohdan shvahuliak
  • 11
  • 3
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.

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
  • I found solution how to calculate lines angle by points(https://stackoverflow.com/questions/9614109/how-to-calculate-an-angle-from-points), but now I try to find solution how to snap line, for example if angle 5deegres then snap line to 0deegres(straight horizontal line) – bohdan shvahuliak Feb 07 '22 at 19:31