캔버스 패브릭 클립 영역에서 오버플로 피하십시오

Question

저는 클립을 사용하여 캔버스에 드로잉 영역을 정의하고 있습니다. 사용자가 정의 된 영역 밖에서 객체를 움직이면 요소는 보이지 않지만 캔버스를 이미지로 저장하면 그림이 그려집니다. 나는 오버플로를 피할 수 있습니까? 또는 제한 요소 이동 ??

페이지의 스크린 샷 :

저장된 이미지 ::

Answer 1

이 두 가지 방법으로 사용하여 수행 할 수 있습니다 :

1) 캔버스 영역 내에서 클리핑을 a 직사각형

01 2,

2) 거주 지역의 t- 셔츠 응용 프로그램에서 다음을 사용했다

constrainToBounds = function (activeObject) { 
     if(activeObject) 
     { 
      var angle = activeObject.getAngle() * Math.PI/180, 
      aspectRatio = activeObject.width/activeObject.height, 
      boundWidth = getBoundWidth(activeObject), 
      boundHeight = getBoundHeight(activeObject); 
      if(boundWidth > bounds.width) { 
       boundWidth = bounds.width; 
       var targetWidth = aspectRatio * boundWidth/(aspectRatio * Math.abs(Math.cos(angle)) + Math.abs(Math.sin(angle))); 
        activeObject.setScaleX(targetWidth/activeObject.width); 
        activeObject.setScaleY(targetWidth/activeObject.width); 
        boundHeight = getBoundHeight(activeObject); 
       } 
       if(boundHeight > bounds.height) { 
        boundHeight = bounds.height; 
        var targetHeight = boundHeight/(aspectRatio * Math.abs(Math.sin(angle)) + Math.abs(Math.cos(angle))); 
        activeObject.setScaleX(targetHeight/activeObject.height); 
        activeObject.setScaleY(targetHeight/activeObject.height); 
        boundWidth = getBoundWidth(activeObject); 
       } 
       //Check constraints 
       if(activeObject.getLeft() < bounds.x + boundWidth/2) 
        activeObject.setLeft(bounds.x + boundWidth/2); 
       if(activeObject.getLeft() > (bounds.x + bounds.width - boundWidth/2)) 
        activeObject.setLeft(bounds.x + bounds.width - boundWidth/2); 
       if(activeObject.getTop() < bounds.y + boundHeight/2) 
        activeObject.setTop(bounds.y + boundHeight/2); 
       if(activeObject.getTop() > (bounds.y + bounds.height - boundHeight/2)) 
        activeObject.setTop(bounds.y + bounds.height - boundHeight/2); 
      } 
    } 

직사각형 경계에 객체를 제한 - http://www.riaxe.com/html5-tshirt-designer-application/

희망이 도움이 :)