为什么行和矩形在Fabricjs中不匹配

Question

为什么以下rect和行不匹配？

从（0,0）开始，行距为1px，长为5px

矩形是top: 0, left: 0, width: 1, height: 1

Running fiddle

我缺少线条吗？

Answer 1

由于strokeWidth对象的Rect而获得的填充，将其设置为零，它将按预期工作。 jsfiddle

演示

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 2

我是Fabricjs的初学者，所以可能会有一个简单的答案。在我看来，“填充”（？）是导致问题的原因。选择矩形时，请查看控件边界，它们确实对齐，但大于矩形。

我可以通过将rect设置为（-0.5，-0.5，1，1）来解决此问题，但是我认为这不是最好的解决方法，您应该尝试调整rect的填充。

希望它会有所帮助。

干杯！

编辑：这不是填充，而是Durga在问题注释中指出的strokeWidth。

Answer 3

没问题：

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

您可以设置外部容器的填充/边距，但是在画布上，矩形就可以了。