холст для увеличения не работает для области клипа

Question

Я использую следующий код для увеличения и уменьшения эффекта. Проблема в том, что я выполняю клип [предположим, что клип для круга с цветом штриха] на холсте, а затем выполнил этот zoomIn. Что произошло, все элементы увеличены, но область клипа не увеличена. Как сделать область клипа для увеличения?

Метод зажима ::

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);