如何渲染畫布上的對象

Question

最初，我通過控制對象的頂部和左側值，使其超出畫布區域來實例化Rect對象，以便Rect對象不會呈現在畫布上。之後，改變Rect的頂部和左側值，使其在事件處理程序的畫布區域中，然後如何在畫布上渲染Rect對象。

下面的代碼是一個演示：

<canvas id="canvas" width="800" height="600"></canvas> 
<script src="js/fabric.js"></script> 
<script> 
    (function() { 
     var canvas = this.__canvas = new fabric.Canvas('canvas'); 
     fabric.Object.prototype.transparentCorners = false; 

     var targetLine = [], paramsG, paramsR; 

     for (var k = 0; k < 20; k++) { 
      paramsG = { 
       left: 200, 
       top: 530 - 100 * k, 
       width: 20, 
       height: 50, 
       visibile: false, 
       fill: '#62ab59', 
       hasBorders: false, 
       lockMovementX: true, 
       hasControls: false 
      }; 
      paramsR = { 
       left: 200, 
       top: 580 - 100 * k, 
       width: 20, 
       height: 50, 
       visibile: false, 
       fill: '#ed5d5d', 
       hasBorders: false, 
       lockMovementX: true, 
       hasControls: false 
      }; 
      canvas.add(new fabric.Rect(paramsG), new fabric.Rect(paramsR)); 
     } 


     canvas.on('mouse:down', function (e) { 
      if (e.target) { 
       targetLine = getMemberByLeft(canvas._objects, e.target); 
      } 
     }) 

     canvas.on('object:moving', function (e) { 
      targetLine.forEach(function (val) { 
       canvas._objects[val.index].set({top: e.e.movementY + canvas._objects[val.index].top}); 
      }) 
      canvas.renderAll(); 
     }) 

     function getMemberByLeft(arr, tar) { 
      var returnArr = []; 
      arr.forEach(function (value, key) { 
       if (value.left == tar.left && value != tar) { 
        returnArr.push({data: value, index: key}); 
       } 
      }) 
      return returnArr; 
     } 
    })(); 
</script> 

Answer 1

織物具有功能跳過，如果他們是不可見的對象在屏幕上呈現，得到一些更快的速度。

如果更改頂部和代碼左，面料不會明白該對象再次出現在屏幕上，除非你打電話object.setCoords()

如果你不希望有這種行爲自動使用

您可以禁用它

canvas.skipOffscreen = false;