Question

我已经调整了一些代码，使用Fabric.js将线条捕捉到网格，如下面的代码所示。我想要的是它取而代之的是箭头。我似乎无法让箭头（三角形）正确移动。我通过尝试添加三角形作为箭头来不断破坏代码，因此我删除了所有尝试添加它的代码。请帮我添加箭头，谢谢!!

var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;
for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}

var line, isDown;

canvas.on('mouse:down', function(o){
  canvas.remove(line);
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, 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);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
var pointer = canvas.getPointer(o.e);
  isDown = false;
  line.set({ x2: Math.round(pointer.x/ grid) * grid, y2: Math.round(pointer.y/ grid) * grid });
  canvas.renderAll();
});

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

Answer 1

得到了他们！对我来说，诀窍是在这个小提琴的方法之后定义三角形的中心：http://jsfiddle.net/ug2gskj1/

    left: line.get('x1') + deltaX;
    top: line.get('y1') + deltaY;

其中

    centerX = (line.x1 + line.x2) / 2;
    centerY = (line.y1 + line.y2) / 2;
    deltaX = line.left - centerX;
    deltaY = line.top - centerY;

＆＃13;

window.onload = function() {
  var canvas = new fabric.Canvas('c', {
    selection: false
  });
  var grid = 50;
  for (var i = 0; i < (600 / grid); i++) {
    canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], {
      stroke: '#ccc',
      selectable: false
    }));
    canvas.add(new fabric.Line([0, i * grid, 600, i * grid], {
      stroke: '#ccc',
      selectable: false
    }))
  }

  var line, triangle, isDown;

  function calcArrowAngle(x1, y1, x2, y2) {
    var angle = 0,
      x, y;

    x = (x2 - x1);
    y = (y2 - y1);

    if (x === 0) {
      angle = (y === 0) ? 0 : (y > 0) ? Math.PI / 2 : Math.PI * 3 / 2;
    } else if (y === 0) {
      angle = (x > 0) ? 0 : Math.PI;
    } else {
      angle = (x < 0) ? Math.atan(y / x) + Math.PI : (y < 0) ? Math.atan(y / x) + (2 * Math.PI) : Math.atan(y / x);
    }

    return (angle * 180 / Math.PI + 90);
  }

  canvas.on('mouse:down', function(o) {
    canvas.remove(line, triangle);
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    var points = [Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, pointer.x, pointer.y];
    line = new fabric.Line(points, {
      strokeWidth: 5,
      fill: 'red',
      stroke: 'red',
      originX: 'center',
      originY: 'center'
    });

    centerX = (line.x1 + line.x2) / 2;
    centerY = (line.y1 + line.y2) / 2;
    deltaX = line.left - centerX;
    deltaY = line.top - centerY;

    triangle = new fabric.Triangle({
      left: line.get('x1') + deltaX,
      top: line.get('y1') + deltaY,
      originX: 'center',
      originY: 'center',
      hasBorders: false,
      hasControls: false,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: true,
      pointType: 'arrow_start',
      angle: -45,
      width: 20,
      height: 20,
      fill: 'red'
    });

    canvas.add(line, triangle);

  });

  canvas.on('mouse:move', function(o) {
    //function angle(x1,y1,x2,y2){angle=Math.atan((y2-y1)/(x2-x1))*180/Math.PI+90; return angle;}

    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    line.set({
      x2: pointer.x,
      y2: pointer.y
    });
    triangle.set({
      'left': pointer.x + deltaX,
      'top': pointer.y + deltaY,
      'angle': calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
    });
    canvas.renderAll();
  });

  canvas.on('mouse:up', function(o) {
    var pointer = canvas.getPointer(o.e);
    isDown = false;
    snappedxCoordinate = Math.round(pointer.x / grid) * grid;
    snappedyCoordinate = Math.round(pointer.y / grid) * grid;
    snappedxCoordinateArrowhead = Math.round((pointer.x + deltaX) / grid) * grid;
    snappedyCoordinateArrowhead = Math.round((pointer.y + deltaY) / grid) * grid;

    line.set({
      x2: snappedxCoordinate,
      y2: snappedyCoordinate
    });
    triangle.set({
      'left': snappedxCoordinateArrowhead,
      'top': snappedyCoordinateArrowhead,
      'angle': calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
    });
    canvas.renderAll();
  });
}

＆＃13;

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

＆＃13;

fabric.js箭头捕捉到网格

1 个答案: