Fabric set('src',url) 不工作，但 setSrc(url) 工作

Question

所以我有这两行代码-

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 两次然后它就会显示。有什么问题吗？

Answer 1

使用image#setSrc更改图像对象的源，该对象接受回调，然后渲染画布。所以你不需要setSrc再打电话了。

演示版

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>