Question

我使用fabricJS将一组线渲染到我的画布，这些线来自相同的坐标，具有相同的设置（笔画宽度除外）。我用来绘制4行的代码看起来像这样

this.canvas.add(new fabric.Line([50, 50, 100, 100], {
  stroke: 'blue',
  strokeWidth: 40,
  selectable: true,
  originY: 'top',
  originX: 'left'
}))

this.canvas.add(new fabric.Line([50, 50, 100, 100], {
  stroke: 'red',
  strokeWidth: 20,
  selectable: true,
  originY: 'top',
  originX: 'left'
}))

this.canvas.add(new fabric.Line([50, 50, 100, 100], {
  stroke: 'orange',
  strokeWidth: 5,
  selectable: true,
  originY: 'top',
  originX: 'left'
}))

this.canvas.add(new fabric.Line([50, 50, 100, 100], {
  stroke: 'green',
  strokeWidth: 1,
  selectable: true,
  originY: 'top',
  originX: 'left'
}))

导致以下输出： Draw lines result

正如您所看到的那样，它们的行程宽度偏移到左侧和底部，导致它们无法正确渲染。有没有办法自动删除所述偏移量或我是否需要手动计算偏移量？对于像线条这样的简单形状，这不是一个真正的问题，但是对于复杂的多边形，这会变得很麻烦。

我在codepen which can be viewed here

中添加了示例

奇怪的部分是在使用本机canvas实现时，所有内容都按照this codepen

中所示的那样进行。

FabricJS线具有不同的笔划偏移

0 个答案: