Набор фабрики ('src', url) не работает, но работает setSrc (url) - PullRequest
Новая
       17

Набор фабрики ('src', url) не работает, но работает setSrc (url)

0 голосов
/ 28 июня 2019

Итак, у меня есть эти две строки кода:

  1. canvas.item(0).set('src',url); canvas.renderAll();
  2. canvas.item(0).setSrc(url); canvas.renderAll();

Итак, существует существующий холст с изображениемзагружен на уровне 0. поэтому, когда я использую Solution1, он должен изменить изображение.но это не отражает.Когда я пытаюсь console.log(canvas.item(0)), он показывает url, установленный в атрибут src в object array, но он никогда не отражается.Затем, когда я использую Solution2, это работает.Но даже тогда это глючит.Я должен запустить Solution2 дважды, а затем он показывает.В чем проблема?

1 Ответ

1 голос
/ 28 июня 2019

Используйте image # setSrc , чтобы изменить источник объекта изображения, который принимает обратный вызов, там визуализирует холст.Поэтому вам не нужно снова звонить setSrc.

DEMO 

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  width: 300,
  height: 300
});
var imageObject;
fabric.Image.fromURL('https://picsum.photos/200/200', function(img) {
  img.set({width:200,height:200,scaleX:1,scaleY:1})
  imageObject = img;
  canvas.add(img);
},{crossOrigin:'annonymous'});
var i=0;

function changeSrc(){
  var url = 'https://picsum.photos/200/200?random='+ ++i;
  imageObject.setSrc(url,function(){
    canvas.requestRenderAll();
  },{crossOrigin:'annonymous'})
}
canvas{
  border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<button onclick='changeSrc()'>changeSrc</button>
<button onclick='addFilter()'>addFilter</button><br>
<canvas id="editorCanvas"></canvas>
...