时间戳

首页 > 解决方案 > 为什么 Fabricjs 中的线条和矩形不匹配

fabricjs - 为什么 Fabricjs 中的线条和矩形不匹配

问题描述

为什么以下 rect 和 lines 不匹配？ 偏心矩形

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

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

运行小提琴

我是否缺少线条？

标签： fabricjs

解决方案

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>

推荐阅读