Изменить fabric.Image.fromURL после начальной загрузки с помощью Fabric.js

#javascript #html5-canvas #fabricjs

#javascript #html5-холст #fabricjs

Вопрос:

Я использую theFabric.js библиотека, и я видел много примеров того, как загрузить изображение с URL-адреса с помощью Image.fromURL. Почти каждый пример присваивает изображение переменной, используя эту общую настройку:

 var bgnd = new fabric.Image.fromURL(bgndURL, function(oImg){
    oImg.hasBorders = false;
    oImg.hasControls = false;
    // ... Modify other attributes
    canvas.insertAt(oImg,0);
});

Я обнаружил, что атрибуты изображения могут быть изменены только в функции обратного вызова, когда загрузка изображения завершается. Есть ли способ изменить его атрибуты позже? Я попытался изменить атрибуты bgnd переменной напрямую, но это ничего не дает.

 bgnd.set({left: 20, top: 50});
canvas.renderAll();

или

 bgnd.rotation = 45;
canvas.renderAll();

они ничего не делают. Какой смысл назначать fabric.Объект изображения для bgnd переменной, если эта переменная не может быть доступна позже? Или я использую его неправильно?

Ответ №1:

После вставки изображения с помощью

 canvas.insertAt(oImg,0);

canvas.setActiveObject(oImg);
myImg= canvas.getActiveObject();

Вы должны иметь возможность изменить его с помощью

 myImg.rotation = 45;

Не забудьте создать переменную myImg в качестве глобальной переменной. За пределами функции image fromURL Изменить после загрузки скрипки

1. Это определенно не сработает, если вы хотите получить доступ к переменной сразу после fabric.Image.fromURL() (а не получить к ней доступ из функции). В то время как это не относится к fabric.Image() . [скрипка] ( jsfiddle.net/sinq/wdwtgsy7/28 )

2. «Есть ли способ изменить его атрибуты позже?» Доступ сразу после этого не является частью вопроса OP. В вашем примере оповещение происходит до фактической загрузки изображения. Я не уверен, почему вы хотели бы загрузить изображение с определенными атрибутами и изменить их непосредственно после без взаимодействия с пользователем. Вы также можете загрузить его с нужными атрибутами.

3. «Я не уверен, почему вы хотели бы загрузить изображение с определенными атрибутами и изменить их непосредственно после без взаимодействия с пользователем». Не изменять их, а использовать. Пример: загруженное изображение должно быть добавлено в группу, в которой есть другой объект. Теперь второй объект должен использовать размер изображения, которое должно было быть загружено сразу после его вызова. Почему? потому что его данные (такие как ширина и высота) необходимы сразу. Два способа сделать это: один, чтобы забыть image.fromURL, второй: ( jsfiddle.net/wdwtgsy7/30 )