织物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（）