Draw and move lines

Fabric.js

by id0

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<div class="b-layout">
  <button class="js-select">выбор</button>
  <button class="js-draw" disabled>рисование</button>
  <canvas id="c" width="500" height="500"></canvas>
</div>

SCSS

.b-layout {
  padding: 10px;
}

#c {
  border: 1px solid #ccc;
}

JavaScript

var canvas = new fabric.Canvas('c', {
  selection: false,
  perPixelTargetFind: true,
  targetFindTolerance: 10
});

var mode = 'draw';

$('.js-select').click(function() {
  $(this).prop('disabled', true);
  $('.js-draw').prop('disabled', false);

  mode = 'select';
  canvas.selection = true;
  canvas.renderAll();
});
$('.js-draw').click(function() {
  $(this).prop('disabled', true);
  $('.js-select').prop('disabled', false);

  mode = 'draw';
  canvas.selection = false;
});

var line, isDown, points;

canvas.on('mouse:down', function(o) {
  isDown = true;

  var pointer = canvas.getPointer(o.e);

  points = [pointer.x, pointer.y, pointer.x, pointer.y];

  if (mode === 'draw') {
    line = new fabric.Line(points, {
      strokeWidth: 2,
      fill: '#222',
      stroke: '#222',
      originX: 'left',
      originY: 'center'
    });
    canvas.add(line);
  }
});

canvas.on('mouse:move', function(o) {
  if (!isDown) return;

  var pointer = canvas.getPointer(o.e);

  if (mode === 'draw') {
    var startX = points[0];
    var startY = points[1];
    var x2 = pointer.x - startX;
    var y2 = pointer.y - startY;
    var r = Math.sqrt(x2 * x2 + y2 * y2);
    var angle = (Math.atan2(y2, x2) / Math.PI * 180);

    angle = (angle) % 360 + 180;

    if (angle <= 45 || angle >= 315) {
      angle = 0;
    } else if (angle <= 135) {
      angle = 90;
    } else if (angle <= 225) {
      angle = 180;
    } else if (angle <= 315) {
      angle = 270;
    }
    angle -= 180;

    var cosx = r * Math.cos(angle * Math.PI / 180);
    var sinx = r * Math.sin(angle * Math.PI / 180);

    line.set({
      x2: cosx + startX,
      y2: sinx + startY
    });
    canvas.renderAll();
  }
});

canvas.on('mouse:up', function(o) {
  isDown = false;
  line.setCoords();
});