bugfix> javascript > 投稿

fabric.jsに問題があります。 fabric.versionを使用できますが、新しいfabric.Rect {top:100、left:100、width:120、height:30、fill: 'red'}の後、canvas .addを使用すると、rectは表示されませんが、mouseEventはOK。 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);
  }

キャンバスでのレクタングルショーを期待していますが、レクタングルショーはありません

回答 2 件
  • あなたは style="background: white" を持っています  キャンバス要素で、背景とブレンドするだけです。

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

  • renderOnAddRemove = true でキャンバスを作成していない場合  (http://fabricjs.com/docs/fabric.Canvas.html#renderOnAddRemove)、 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()
    }
    
    

あなたの答え