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