本文介绍了面料js调整大小旋转控件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我有一个简单的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调整大小旋转控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 20:51