按扣织物。线成 45 度角

Question

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

Answer 1

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>

Answer 2

好的，这里我们知道线开始 X1 和 Y1 以及线结束 X2 和 Y2 点。我们也知道 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>