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