如何渲染画布上的对象

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;