javascript - FabricJS 光学外观线条

Question

我正在从事一个使用 Fabric js 的项目。我试图最小化我的问题，所以我希望代码不会太困惑。我正在创建一些相互链接的对象:

• 一条线，包含起点和终点
• 一个圆，即1条线的起点和另一条线的终点

通过这种组合，我可以创建不同的形状(如多边形)并修改它们的移动功能。

当拖动圆时，相关的线也会缩放和移动。 (在我的代码中，您也可以移动线条，然后调整形状大小，但我没有将其放入此示例中，因为这个简短的摘录应该足以显示我的问题是什么。)

我在jsfiddle中有一个小例子:https://jsfiddle.net/bxgox7cr/

当你看线条的末端时，你可以清楚地看到一个切口，所以眼睛很快就会意识到，这不是一个连接的形状，而是一些彼此靠近的线条。有没有办法修改线条的外观，使形状看起来“闭合”？

这是我的代码，我尝试添加一些注释，以便于阅读:

var canvas = new fabric.Canvas('canvas');

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
document.getElementById("canvas").tabIndex = 1000;

/** ------------creating a Line Object, which contains a start and an endpoint ------------**/
fabric.LineWithPoints = fabric.util.createClass(fabric.Line, {
  initialize: function(points, options) {
    options || (options = {});
    this.callSuper('initialize', points, options);
    options &&
      this.set('type', options.type),
      this.set('name', options.name),
      this.set('start_point', options.start_point),
      this.set('end_point', options.end_point),
      this.set('current_x', options.current_x),
      this.set('current_y', options.current_y)
  },
  setStartPointAndEndPoint: function(start_point, end_point) {
    this.set({
      start_point: start_point,
      end_point: end_point
    });
  },
  setValues: function(new_x1, new_y1, new_x2, new_y2) {
    //     console.log(this);
    this.set({
      x1: new_x1,
      x2: new_x2,
      y1: new_y1,
      y2: new_y2
    });
    this.setCoords();
  }
});

/**--- modifie the circle element, adding new functions for the movement of the object-------*/
fabric.LinePoint = fabric.util.createClass(fabric.Circle, {
  initialize: function(options) {
    options || (options = {});
    this.callSuper('initialize', options);
    options &&
      this.set('subtype', 'line_point'),
      this.set('x', this.left),
      this.set('y', this.top)
  },
  setPointCoordinates: function(new_left, new_top) {
    this.set({
      x: new_left,
      y: new_top,
      left: new_left,
      top: new_top
    });
    this.setCoords();
  },
  move: function(new_left, new_top) {
    var wall_1 = this.line1;
    var wall_2 = this.line2;

    this.setPointCoordinates(new_left, new_top);
    wall_1.setValues(wall_1.x1, wall_1.y1, this.getLeft(), this.getTop());
    wall_2.setValues(this.getLeft(), this.getTop(), wall_2.x2, wall_2.y2);
    canvas.renderAll();
  },
});

/**------------------- Moving Function------------------------------------------------- */

canvas.on('object:moving', function(event) {
  var object = event.target;

  if (object.subtype == "line_point") {
    object.move(object.getLeft(), object.getTop());
  }
});


/**------------------------------ create functions for the objects -----------------------*/

function newCircleObject(left, top, wall_1, wall_2) {
  var circle = new fabric.LinePoint({
    left: left,
    top: top,
    strokeWidth: 2,
    radius: 15,
    fill: 'grey',
    stroke: 'black',
    opacity: 0.1,
    perPixelTargetFind: true,
    subtype: 'line_point',
    includeDefaultValues: false
  });

  circle.hasControls = false;
  circle.hasBorders = false;
  circle.line1 = wall_1;
  circle.line2 = wall_2;

  return circle;
}

function newWallObject(coords) {
  var wall = new fabric.LineWithPoints(coords, {
    stroke: 'black',
    strokeWidth: 6,
    lockScalingX: true,
    lockScalingY: true,
    perPixelTargetFind: true,
    subtype: 'line',
    type: 'line',
    padding: 10,
    includeDefaultValues: false
  });

  wall.hasControls = false;
  wall.hasBorders = false;
  return wall;
}


/**------------------------------ adding the shapes--------------------------------*/

var wall_1 = newWallObject([100, 100, 100, 500]);
var wall_2 = newWallObject([100, 500, 500, 500]);
var wall_3 = newWallObject([500, 500, 500, 100]);
var wall_4 = newWallObject([500, 100, 100, 100]);

var end_point_1 = newCircleObject(wall_1.x1, wall_1.y1, wall_4, wall_1);
var end_point_2 = newCircleObject(wall_2.x1, wall_2.y1, wall_1, wall_2);
var end_point_3 = newCircleObject(wall_3.x1, wall_3.y1, wall_2, wall_3);
var end_point_4 = newCircleObject(wall_4.x1, wall_4.y1, wall_3, wall_4);

wall_1.setStartPointAndEndPoint(end_point_1.name, end_point_2.name);
wall_2.setStartPointAndEndPoint(end_point_2.name, end_point_3.name);
wall_3.setStartPointAndEndPoint(end_point_3.name, end_point_4.name);
wall_4.setStartPointAndEndPoint(end_point_4.name, end_point_1.name);

canvas.add(wall_1, wall_2, wall_3, wall_4, end_point_1, end_point_2, end_point_3, end_point_4);

Answer 1

添加strikeLineCap: 'round',:

function newWallObject(coords) {
  var wall = new fabric.LineWithPoints(coords, {
    stroke: 'black',
    strokeWidth: 6,
    lockScalingX: true,
    lockScalingY: true,
    perPixelTargetFind: true,
    strokeLineCap: 'round',
    subtype: 'line',
    type: 'line',
    padding: 10,
    includeDefaultValues: false
  });

  wall.hasControls = false;
  wall.hasBorders = false;
  return wall;
}

我查了一下:http://fabricjs.com/docs/fabric.Object.html#strokeLineCap