gpt4 book ai didi

javascript - Fabric js 置换调整大小旋转控件

转载 作者:行者123 更新时间:2023-11-29 22:23:26 30 4
gpt4 key购买 nike

http://i.stack.imgur.com/MeJAo.jpg

我有一个简单的 fabric.canvas 元素,它有一个背景,我将它的宽度和高度设置为与上图相同。然后添加帽子图像。问题是调整大小控件被替换了。我也已经在图片中清楚地说明了这一点。

这就是我将 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();
});

最佳答案

我在推特上得到了答案。

我在更改 Canvas 的宽度和高度并添加图像后立即添加了一个 canvas.calcOffset() 。

成功了。

关于javascript - Fabric js 置换调整大小旋转控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10926572/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com