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



Solution 1:[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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vanquished Wombat
Solution 2 Vanquished Wombat