キャンバスにオブジェクトがレンダリングされる方法

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;