2016-05-19 44 views
0

内に追加オブジェクトの移動領域を制限し、私はこのコードでキャンバス内のオブジェクトの動きを制限することができる:FabricJsファブリックを使用して、マスター・オブジェクト

canvas.observe('object:moving', function (e) { 
      debugger; 
      var obj = e.target; 
      obj.opacity = 0.5; 
      if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){ 
       obj.setScaleY(obj.originalState.scaleY); 
       obj.setScaleX(obj.originalState.scaleX); 
      } 
      obj.setCoords(); 
      if(obj.getBoundingRect().top - (obj.cornerSize/2) < 0 || 
       obj.getBoundingRect().left - (obj.cornerSize/2) < 0) { 
       obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize/2)); 
       obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize/2)); 
      } 
      if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) { 

       obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize/2); 
       obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2); 
      } 
     }); 

iは動きを制限したい場合はどのようなマスターオブジェクトiの領域内の選択されたオブジェクトの定義i(境界領域を除く)?

ありがとうございました

+0

こんにちはTorgia、私たちはフィドルができますか? – Mullainathan

答えて

0

スケーリング機能で次のようにお試しください。 Objは子オブジェクトを参照し、masterは親オブジェクトを参照します。

if(obj.getBoundingRect().top < master.top){ //Top boundary 
    obj.top = master.top; 
} 
master.bottom = master.top+master.height; 
if(obj.getBoundingRect().top+obj.getBoundingRect().height > master.top+master.height){ //Bottom boundary 
    obj.top = master.bottom-obj.getHeight(); 
} 
if(obj.getBoundingRect().left < master.left){ //Left boundary 
    obj.left = master.left; 
} 
master.right = master.left+master.width; 
if(obj.getBoundingRect().left+obj.getBoundingRect().width > master.left+master.width){ //Right boundary 
    obj.left = master.right-obj.getWidth();  
} 
関連する問題