对齐 fabric.Line 至 45 度角

Question

我正在尝试在 fabricJS 中使用 fabric.Line()，以便当用户开始绘制一条线时，它会捕捉到与起点成 45 度角的八个角度之一。这类似于在使用 Adobe 产品时按住 shift 键。 fabricJS 可以吗？

Answer 1

好的，这里我们知道起始 X1 和 Y1 的线以及终止 X2 和 Y2 的线 points.we 也知道 45 度角。

所以在这里我们应用一些数学来获得输出。

在X1和Y1点停留在那里，X2和Y2点要以45度角行进。

X2 = Math.cos(angle * Math.PI/180) * distence + startX Y2 = Math.sin(angle * Math.PI/180) * distence + startY tanks for this

此处

startX = x1
startY = y1 
angle=45
distence = current.mouse.x-x1

所以我们可以得到45度角的x2,y2

让我们在 fabricjs

上试试这个

var canvas = new fabric.Canvas('c', {
  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];
  line = new fabric.Line(points, {
    strokeWidth: 2,
    fill: 'red',
    stroke: 'red',
    originX: 'left',
    originY: 'center'

  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);

  var startX = points[0];
  var startY = points[1];
  var distence = pointer.x - points[0];
  var angle = -45

  x2 = Math.round(Math.cos(angle * Math.PI / 180) * distence + startX);
  y2 = Math.round(Math.sin(angle * Math.PI / 180) * distence + startY);
  console.log("x2 >>> " + x2 + " y2 >>>>> " + y2)

  line.set({
    x2: x2,
    y2: y2
  });
  canvas.renderAll();
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

<canvas id="c" width="300" height="200"></canvas>

Answer 2

编辑 2020 年 3 月

捕捉旋转现在是 fabric.js

原答案：

你必须检查你在鼠标移动过程中建立的角度并将其近似为 45° 度线。

var canvas = new fabric.Canvas('c', {
  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];
  line = new fabric.Line(points, {
    strokeWidth: 2,
    fill: 'red',
    stroke: 'red',
    originX: 'left',
    originY: 'center'

  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);

  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 <= 22.5 || angle >= 337.5) {
    angle = 0;
  } else if (angle <= 67.5) {
    angle = 45;
  } else if (angle <= 112.5) {
    angle = 90;  
  } else if (angle <= 157.5) {
    angle = 135  
  } else if (angle <= 202.5) {
    angle = 180
  } else if (angle <= 247.5) {
    angle = 225
  } else if (angle <= 292.5) {
    angle = 270
  } else if (angle < 337.5) {
    angle = 315
  }
  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;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

对齐 fabric.Line 至 45 度角

Snap fabric.Line to 45 degree angle

fabricjs

编辑 2020 年 3 月

原答案：