canvas 添加新形状后不渲染形状

Question

我对 fabric.js 有疑问。我可以使用 fabric.version，但在 new fabric.Rect{top : 100,left : 100,width : 120,height : 30, fill : 'red'} 之后使用 canvas 。添加它，矩形不显示但 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);
  }

我希望在 canvas 上显示直角，但没有直角显示

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) 创建了 canvas，否则您需要在添加后在 canvas 上调用 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()
}

canvas 添加新形状后不渲染形状

canvas not rendering shape after adding new shape

javascript

canvas

fabricjs

angular