CODEWITHSUNDEEP
javascriptkonvajskonva
bohdan shvahuliak
bohdan shvahuliak

Reputation: 11

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

Upvotes: 0

Views: 555

Answers (2)

bohdan shvahuliak
bohdan shvahuliak

Reputation: 11

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

Upvotes: 1

Vanquished Wombat
Vanquished Wombat

Reputation: 9545

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.

Upvotes: 0

Related Questions