CODEWITHSUNDEEP
javascriptcanvasfabricjs
Kenzo
Kenzo

Reputation: 1837

Unable to connect endpoints by line in Fabric Js

I am trying to connect the endpoints(circles in my case) by line using canvas Fabric Js. I am able to draw the circles but unable to connect them by lines. Here is the source code :

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>

Here also is the output enter image description here

Is there anything that i am missing in my codes in order to make the 3 circles connected by lines(2 lines in this case). Any help would be appreciated.

Upvotes: 0

Views: 138

Answers (2)

Durga
Durga

Reputation: 15614

There is no property called x or y in your circle object, which gives you undefined, instead use left or top.

DEMO

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>

Upvotes: 1

shrys
shrys

Reputation: 5960

Each of [circle1.x, circle1.y, circle2.x, circle2.y] element is undefined. Please check the snippet below. (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>

Upvotes: 0

Related Questions