css - 用 fabricjs 在 Canvas 中心画一条垂直线？

Question

我正在尝试在 Canvas 的正中心画一条线。现在我正在使用一种 hacky 方法。

// Centered Line
fabric.Image.fromURL('https://i.imgur.com/zM63v6J.png', function(myImg) {
  var img1 = myImg.set({
    left: 306,
    selectable: false,
  });
  canvas.add(img1);
});

这样可以完成工作，但我确信有一种更轻松的方法可以做到这一点。

如有任何帮助，我们将不胜感激。提前致谢

Answer 1

var canvas = new fabric.Canvas('c');
var line = new fabric.Line([canvas.width/2,0,canvas.width/2,canvas.height],{
  strokeWidth:2,
  stroke: 'red',
});
canvas.add(line);

canvas{
 border: 2px dotted black;
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>

您可以使用此线坐标 [canvas.width/2,0,canvas.width/2,canvas.height] 作为垂直中心线。