2016-05-19 36 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); 
      } 
     }); 

如果我想限制的運動是什麼我定義的主對象區域內的選定對象(不包括邊界區域)?在您的縮放功能

在此先感謝

+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();  
}