无法在 Fabric Js 中按行连接端点

Question

我正在尝试使用 canvas Fabric Js 通过线路连接端点（在我的例子中是圆圈）。我能够画出圆圈，但无法用线连接它们。这是源代码：

const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

document.addEventListener('DOMContentLoaded', function() {
  drawPath();
});

function makeLine(coords) {
  var l = new fabric.Line(coords, {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 1,
    originX: 'center',
    originY: 'center',
    selectable: false,
    hoverCursor: 'default'
  });


  return l;
}

function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 4,
    fill: 'white',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });

}


function drawPath() {

  const circle1 = makeCircle(52.69, 17.77);
  const circle2 = makeCircle(262.69, 120.77);
  const circle3 = makeCircle(272.69, 232.77);

  canvas.add(circle1, circle2, circle3);

  const line1 = makeLine([circle1.x, circle1.y, circle2.x, circle2.y]);
  const line2 = makeLine([circle2.x, circle2.y, circle3.x, circle3.y]);

  canvas.add(line1, line2);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>

这也是输出

为了使 3 个圆圈由线（在本例中为 2 条线）连接，我的代码中是否缺少任何内容。任何帮助将不胜感激。

Answer 1

每个 [circle1.x, circle1.y, circle2.x, circle2.y] 个元素都是 undefined。请检查下面的片段。 (ref)

const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

document.addEventListener('DOMContentLoaded', function() {
  drawPath();
});

function makeLine(coords) {
  var l = new fabric.Line(coords, {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 1,
    originX: 'center',
    originY: 'center',
    selectable: false,
    hoverCursor: 'default',
    evented: false
  });


  return l;
}

function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 4,
    fill: 'white',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });

}


function drawPath() {

  const circle1 = makeCircle(52.69, 17.77);
  const circle2 = makeCircle(262.69, 120.77);
  const circle3 = makeCircle(272.69, 232.77);

  canvas.add(circle1, circle2, circle3);

  const line1 = makeLine([circle1.left, circle1.top, circle2.left, circle2.top]);
  const line2 = makeLine([circle2.left, circle2.top, circle3.left, circle3.top]);

  canvas.add(line1, line2);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Answer 2

在你的圈子对象中没有叫 x 或 y 的属性，这给你未定义，而是使用 left 或 top。

演示版

const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

document.addEventListener('DOMContentLoaded', function() {
  drawPath();
});

function makeLine(coords) {
  var l = new fabric.Line(coords, {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 1,
    selectable: false,
    hoverCursor: 'default',
    originX: 'center',
    originY: 'center'
  });
  return l;
}

function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 4,
    fill: 'white',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });

}


function drawPath() {

  const circle1 = makeCircle(52.69, 17.77);
  const circle2 = makeCircle(262.69, 120.77);
  const circle3 = makeCircle(272.69, 232.77);

  

  const line1 = makeLine([circle1.left, circle1.top, circle2.left, circle2.top]);
  const line2 = makeLine([circle2.left, circle2.top, circle3.left, circle3.top]);
  
  canvas.add(line1, line2);
  canvas.add(circle1, circle2, circle3);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>

无法在 Fabric Js 中按行连接端点

Unable to connect endpoints by line in Fabric Js

javascript

canvas

fabricjs