面料js调整大小旋转控件 [英] Fabric js displaced resize rotate controls

问题描述

我有一个简单的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（）; 
}）; 
  

解决方案

我有twitter上的答案。 >

我在改变了画布的宽度和高度并添加图片之后添加了一个canvas.calcOffset（）。

效果很好。

I have a simple fabric.canvas element which has a background and I have set its width and height equal to that of the above image. and then added the cap image. the problem is that the resize controls are displaced. I have made this clear in the image too.

This is how I am adding the canvas to the page

    $('#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();
    });

And this is how I am adding the image

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

解决方案

I have got the answer on twitter.

I added a canvas.calcOffset() right after changing the width and height of the canvas and also adding the image.

It worked.

这篇关于面料js调整大小旋转控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！