Почему линии и линии не совпадают в Fabricjs

Question

Почему следующие прямоугольник и линии не совпадают?

Строки расположены на расстоянии 1px, длина 5px, начиная с (0,0)

Прямоугольник top: 0, left: 0, width: 1, height: 1

Бегущая скрипка

Я что-то пропускаю со строками?

Answer 1

Нет проблем:

[http://jsfiddle.net/odwg3nsq/]

Вы можете установить отступ / отступ внешнего контейнера, но на холсте все в порядке с прямоугольником.

Answer 2

Заполнение, которое вы получили из-за strokeWidth объекта Rect, установите его равным нулю, он будет работать как положено. jsfiddle

DEMO

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

var gridLine = function(at, stroke, canvas, length) {
  var horizontal = [0, at, length, at];
  var vertical = [at, 0, at, length];

  let hLine = new fabric.Line(horizontal, {
    strokeWidth: 0.02,
    stroke,
  });
  let vLine = new fabric.Line(vertical, {
    strokeWidth: 0.02,
    stroke,
  });
  canvas.add(hLine);
  canvas.add(vLine);
}

var showGrid = function(fabric) {
  var count = 5;
  var separationPx = 1;
  for (var i = 0; i < count; i++) {
    gridLine(i * separationPx, "silver", fabric, count);
  }
}

var rect = new fabric.Rect({
  top: 0,
  left: 0,
  width: 1,
  height: 1,
  fill: "red",
  strokeWidth: 0
});

showGrid(canvas);
canvas.add(rect);

canvas.setZoom(50);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

Answer 3

Я новичок в Fabricjs, поэтому может быть более простой ответ. Для меня это выглядит как "padding" (?) Является причиной проблемы. Посмотрите на контрольные границы, когда вы выбираете прямоугольник, они выравниваются, но больше, чем ваш прямоугольник.

Я мог бы исправить это, установив прямоугольник на (-0,5, -0,5, 1, 1), однако я думаю, что это не лучший обходной путь, и вам, вероятно, следует попытаться отрегулировать заполнение вашего прямоугольника.

Надеюсь, это поможет.

Ура!

Редактировать: Это не отступ, это ширина хода, как указала Дурга в комментариях к вопросу.