Offset the mouse position by an angle

Offset the mouse position by an angle

by Javier Cruz

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

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

var line, isDown;
var iniPoint;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  iniPoint = new THREE.Vector2(pointer.x, pointer.y);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  var vm = new THREE.Vector2(pointer.x,pointer.y);
  var vectDis = new THREE.Vector2();
  vectDis.sub(vm,iniPoint);
  
  var gamma = -Math.PI/4;
  var cs = Math.cos(gamma);
  var sn = Math.sin(gamma);
  var px = vectDis.x * cs - vectDis.y * sn;
  var py = vectDis.x * sn + vectDis.y * cs;
  vectDis.x = px;
  vectDis.y = py;
  vectDis.addSelf(iniPoint);
    
  line.set({ x2: vectDis.x, y2: vectDis.y });
  canvas.renderAll();
});

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