如何强制画布FabricJS刷新 [英] How to force the canvas fabricJS to refresh

问题描述

我当前正在使用fabricJS(版本1.4.0 )画布，并且我在画布上手动添加了100个对象，但是对象仅在我单击画布上的任何位置时才会出现，是否有一种方法可以强制画布刷新自身?如果可以以某种方式提供帮助，这是我的一种情况.

I am currently using fabricJS(version 1.4.0) canvas and i have 100 objects that i manually add on the canvas, however objects only appear when i click anywhere on the canvas, is there a way of forcing the canvas to refresh itself ? Here is kind of scenario i have if it can help somehow.

  ....
 initComplete: function (settings, json) {

   let clients = json;
   if(clients.length !== 0)
   {
       //clients is an array of length 100
       for (client of clients)
        {
             let icone = new Image;
              if (client.ProfileId !== '')
              {

                   //..Codes pour afficher les client wifi sur le canvas
                   client_real_left = (client.MapCoordinate.x * baseWidth) / widthFloor;
                   client_real_top = (client.MapCoordinate.y * baseHeight) / lengthFloor;
                   client_left = client_real_left;
                   client_top = client_real_top;

                   if (client.IconName === 'default.png' || client.IconName === null) {
                        icone.src = '/Icones/wifi.png';
                   }
                   else {
                          icone.src = '/Icones/' + client.IconName;
                        }

                          const wifiClient = new fabric.Image(icone,
                          {

                                    id: client.ProfileId,
                                    class: 'img_wifiClient',
                                    left: (transX + client_left) * canvasFabric.scale,
                                    top: (transY + client_top) * canvasFabric.scale,
                                    selectable: true,
                                    hasBorders: false,
                                    hasControls: false,
                                    padding: 0,
                                    perPixelTargetFind: true,
                                    width: 24,
                                    height: 24,
                                    originX: 'center',
                                    originY: 'center'
                                });


                            canvasFabric.add(wifiClient);

                        }
   } //end if

}

initComplete 是jQuery DataTable的回调函数

the initComplete is a callback function of jQuery DataTable

推荐答案

使用图像#setSrc 并在回调方法上调用renderAll.

Use image#setSrc and call renderAll on callback method.

演示

DEMO

var canvas = new fabric.Canvas('c',{
  width:400,
  height:400
});
var image = new fabric.Image('');
canvas.add(image);

image.setSrc('https://picsum.photos/200/300',function(){
  image.setCoords();
  canvas.renderAll();
})

canvas{
  border:1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.2.0/fabric.js"></script>
<canvas id='c'></canvas>

这篇关于如何强制画布FabricJS刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！