Question

我正在使用fabricJS setSrc函数在编辑后替换画布上的图像。我需要在更换之后保持原始图像的宽度，但它似乎并不像我认为的那样工作。这是我的功能：

function replace_current_img(src){
    if(selected_object){
         //Get current object width
         var current_width=selected_object.getWidth();

         selected_object.setSrc(src, function(){
              selected_object.scaleToWidth(current_width);
              canvas.renderAll();
         });
     }
 }

我已经验证正确设置 current_width 变量，但似乎没有任何东西可以在加载后调整替换后的图像大小。另一个奇怪的是，我可以在控制台中输入这个确切的代码（手动设置current_width），它可以正常工作。

我甚至尝试使用setTimeout来消除任何加载问题，但这也不起作用。

使用setSrc后是否有一种特殊的方法来设置图像对象的宽度？

Answer 1

这可以通过以下两种方式之一完成......

▸ 添加

selected_object.scaleToHeight(current_height);

后面是

行

selected_object.scaleToWidth(current_width);

▸ 使用 setWidth和setHeight方法

selected_object.setWidth(current_width);
selected_object.setHeight(current_height);

<强>ᴅᴇᴍᴏ

＆＃13;

var canvas = new fabric.Canvas('canvas')
var replace_img = document.querySelector('#replace_img');

fabric.Image.fromURL('http://lorempixel.com/100/100/', function (img) {
    img.set({
        top: 40,
        left: 40
    })
    canvas.add(img);
});

function replace_current_img(src) {
    selected_object = canvas.getActiveObject();
    if (selected_object) {
        //Get current object width
        var current_width = selected_object.getWidth();
        var current_height = selected_object.getHeight();
        selected_object.setSrc(src, function () {
            // method#1
            selected_object.scaleToWidth(current_width);
            selected_object.scaleToHeight(current_height);
            // method#2
            // selected_object.setWidth(current_width);
            // selected_object.setHeight(current_height);
            canvas.renderAll();
        });
    }
}

replace_img.onclick = function () {
    replace_current_img('http://lorempixel.com/100/100/');
}

＆＃13;

canvas{border: 1px solid #ccc}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<button id="replace_img">Replace Image</button>
<canvas id="canvas" width="180" height="180"></canvas>

＆＃13;

使用setSrc后，FabricJS无法缩放图像

1 个答案: