Question

我在使用fabric js的项目工作。我试图最小化我的问题，所以我希望代码不会太乱。我正在创建一些彼此链接的对象：

包含开始和结束点的行
一个圆圈，它是1行的起始点和另一行的终点

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

拖动圆时，相关的线也在缩放和移动。（在我的代码中，你也可以移动线条，然后调整形状的大小，但我没有把它放到这个例子中，bc这个简短的提取应该足以显示我的问题。）

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

添加strokeLineCap: '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

线条

1 个答案: