클립 영역에서 캔버스가 작동하지 않습니다.

Question

확대/축소 효과에 다음 코드를 사용하고 있습니다. 문제는 캔버스에서 클립을 스트로크 색상으로 동그라미로 찍은 다음이 줌 인을 수행하는 것입니다. 모든 요소가 확대되었지만 클립 영역이 확대되지 않았습니다. 확대/축소 할 클립 영역은 어떻게 만들 수 있습니까?

클립 방법 ::

canvas.clipTo = function(ctx) { 
         var shp = new fabric.Rect({ 
          top : top_Pos, 
          left : left_Pos, 
          width : c_width, 
          height : c_height, 
          fill:'', 
          stroke : 'red', 
          strokeWidth : 5 

         }); 
         shp.render(ctx); 
        }; 

확대 방법 ::

// Zoom In 
    function zoomIn() { 
     // TODO limit the max canvas zoom in 
     console.log('zoom in called'); 
     if (zoomEffect == false) { 

      canvasScale = canvasScale * SCALE_FACTOR; 

      canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); 
      canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); 

      var objects = canvas.getObjects(); 
      for (var i in objects) { 
       var scaleX = objects[i].scaleX; 
       var scaleY = objects[i].scaleY; 
       var left = objects[i].left; 
       var top = objects[i].top; 

       var tempScaleX = scaleX * SCALE_FACTOR; 
       var tempScaleY = scaleY * SCALE_FACTOR; 
       var tempLeft = left * SCALE_FACTOR; 
       var tempTop = top * SCALE_FACTOR; 

       objects[i].scaleX = tempScaleX; 
       objects[i].scaleY = tempScaleY; 
       objects[i].left = tempLeft; 
       objects[i].top = tempTop; 

       objects[i].setCoords(); 
      } 

      canvas.renderAll(); 
      zoomEffect = true; 
     } 
    } 

    // Zoom Out 
    function zoomOut() { 
     // TODO limit max cavas zoom out 
     console.log('zoom out called'); 
     if (zoomEffect == true) { 

     canvasScale = canvasScale/SCALE_FACTOR; 

     canvas.setHeight(canvas.getHeight() * (1/SCALE_FACTOR)); 
     canvas.setWidth(canvas.getWidth() * (1/SCALE_FACTOR)); 

     var objects = canvas.getObjects(); 
     for (var i in objects) { 
      var scaleX = objects[i].scaleX; 
      var scaleY = objects[i].scaleY; 
      var left = objects[i].left; 
      var top = objects[i].top; 

      var tempScaleX = scaleX * (1/SCALE_FACTOR); 
      var tempScaleY = scaleY * (1/SCALE_FACTOR); 
      var tempLeft = left * (1/SCALE_FACTOR); 
      var tempTop = top * (1/SCALE_FACTOR); 

      objects[i].scaleX = tempScaleX; 
      objects[i].scaleY = tempScaleY; 
      objects[i].left = tempLeft; 
      objects[i].top = tempTop; 

      objects[i].setCoords(); 
     } 
      } 
     canvas.renderAll(); 
      zoomEffect = false; 
    } 

Answer 1

사용 canvas.zoomToPoint(point,zoomFactor);