javascript - ファブリックjsが置き換えられたサイズ変更回転コントロール

Question

背景のある単純なfabric.canvas要素があり、その幅と高さを上の画像と同じに設定しました。次に、キャップ画像を追加しました。問題は、サイズ変更コントロールがずれていることです。私もこれを画像で明らかにしました。

これが私がページにキャンバスを追加する方法です

    $('#canvas_container').empty();
    canvas_el = document.createElement('canvas');
    canvas_el.id = "canvas";
    $('#canvas_container').append(canvas_el);
    canvas = new fabric.Canvas('canvas');

    var img = new Image();
    img.onload = function() {
      canvas.setWidth(this.width);
      canvas.setHeight(this.height);
      canvas.renderAll()
    }
    img.src =$(this).attr('picUrl');

    canvas.setBackgroundImage($(this).attr('picUrl'),function(){
      canvas.renderAll();
    });

そして、これは私が画像を追加する方法です

      fabric.Image.fromURL('img/hat.png', function(img) {
        oImg = img.set({ left: 50, top: 50, angle: 0 })
        canvas.add(oImg);
        canvas.renderAll();
      });

Answer 1

ツイッターで答えが出ました。

キャンバスの幅と高さを変更し、画像を追加した直後に、canvas.calcOffset（）を追加しました。

機能した。

Answer 2

canvas.add（oImg）;の後にoImg.setCoords（）を試してください。