添加新形狀后，畫布未呈現形狀

Question

我對fabric.js有問題。 我可以使用fabric.version，但是使用新的fabric.Rect {top：100，left：100，width：120，height：30，fill：'red'}並使用canvas .add它，rect不顯示，但是mouseEvent是好。 我的fabric.js版本是3.4.0

@ angular / core“：”〜7.2.0“，” fabric“：” ^ 3.4.0“

  ngOnInit() {
    let canva1 = new fabric.Canvas('myCanvas');
    console.log(fabric.version);
    let rect = new fabric.Rect({
      top : 100,
      left : 100,
      width : 120,
      height : 30,
      fill : 'red'
  });
  canva1.add(rect);
  }

我希望在畫布上有個表演，但沒有表演

Answer 1

您的canvas元素上有style="background: white" ，它只與背景融合在一起。

https://github.com/zhangManGod/canvas/blob/master/src/app/right/right.component.html#L3

Answer 2

除非您使用renderOnAddRemove = true （ http://fabricjs.com/docs/fabric.Canvas.html#renderOnAddRemove ）創建畫布， renderOnAddRemove = true添加或刪除項目后，您將需要在畫布上調用requestRenderAll 。

（ http://fabricjs.com/docs/fabric.Canvas.html#requestRenderAll ）

ngOnInit() 
{
    let canva1 = new fabric.Canvas('myCanvas');
    console.log(fabric.version);
    let rect = new fabric.Rect(
    {
        top : 100,
        left : 100,
        width : 120,
        height : 30,
        fill : 'red'
    });
    canva1.add(rect);
    canva1.requestRenderAll()
}