Невозможно соединить конечные точки по линии в Fabric Js - PullRequest
Новая
       41

Невозможно соединить конечные точки по линии в Fabric Js

0 голосов
/ 28 июня 2019

Я пытаюсь соединить конечные точки (круги в моем случае) линией, используя 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>

Здесь также вывод enter image description here

Есть ли что-то, что мне не хватает в моих кодах по порядкусделать 3 окружности, соединенные линиями (в данном случае 2 линии).Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 28 июня 2019

В вашем объекте круга нет свойства с именем x или y, которое дает вам неопределенное значение, вместо этого используйте left или 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>
0 голосов
/ 28 июня 2019

Каждый элемент [circle1.x, circle1.y, circle2.x, circle2.y] равен undefined. Пожалуйста, проверьте фрагмент ниже. ( ссылка ) 

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