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

Question

为什么下面的矩形和直线不匹配？

线条相距1px，长5px，从(0,0)开始

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

Running fiddle

我是不是漏掉了一些线条？

Answer 1

我是 Fabricjs 的初学者，所以可能会有更简单的答案。在我看来， "padding" (?) 是导致问题的原因。当您 select 矩形时，请查看控制边框，它们对齐但比您的矩形大。

我可以通过将矩形设置为 (-0.5, -0.5, 1, 1) 来解决这个问题，但是我认为这不是最好的解决方法，您应该尝试调整矩形的填充。

希望能有所帮助。

干杯！

编辑： 正如 Durga 在对问题的评论中指出的那样，这不是填充，而是 strokeWidth。

Answer 2

没问题:

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

您可以设置外部容器的 padding/margin，但在 canvas 中矩形一切正常。

Answer 3

由于 Rect 对象的 strokeWidth 而得到的填充，将其设为零，它将按预期工作。 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>

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

Why do lines and rects not match up in Fabricjs

fabricjs