javascript - 返回大小图像放大缩小

Question

我想用手指放大和缩小截面图像，然后再恢复到原始图像大小。

目前图片放大后，图片不会变回原来的样子。

所需的订单列表。1.放大和缩小图像->确定2. 将图像调整回原始大小。 -> 失败3.图片坐标居中->失败

var canvas;	

var gMarginWidth = 0;
var gMarginHeight = 0;
var gImageWidth = 0;
var gRatio = 0;

$(document).ready(function() {
   canvas_result();
   });
   
function canvas_result(){
  
	   //canvas
    canvas = new fabric.Canvas('c', 
    		{
    			selection : false,
    	        controlsAboveOverlay:true,
    	        centeredScaling:true,
    	        allowTouchScrolling: false
    		}
    );
  
    gRatio = 0;
    gMarginWidth = 0;
    gMarginHeight = 0;

	function resizeCanvas(imageWidth) {
	    canvas.setHeight(window.innerHeight*0.5);
	    canvas.setWidth(imageWidth);
	    canvas.renderAll();
	}
  
  
	fabric.Image.fromURL("http://59.25.178.93:8080/homesys/rest/testservice/0/imgLoadAdm.do?fileId=HF201801221742200845&fileSn=2", function(img) {

		var xRatio = $('#canvasWrapper').width()/img.width;
		var yRatio = (window.innerHeight*0.5)/img.height;
		gRatio = xRatio < yRatio ? xRatio : yRatio;//길이에 맞게 조절할 배율
		
		gImageWidth = img.width * gRatio;
		gMarginWidth = ($('#canvasWrapper').width() - img.width * gRatio) / 2;
	
		gMarginHeight = (600- img.height * gRatio)/2;
		
		resizeCanvas($('#canvasWrapper').width());
		
		
		canvas.setBackgroundImage(img);
		canvas.setZoom(gRatio);//평면도 가로 길이가 canvas에 꽉 차도록 zoom
		canvas.renderAll();
		
    }); 	
	
	
 	//캔버스 마우스 클릭 이벤트
 	canvas.on({
 		'mouse:up': function(event) {
 			self.canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), 0.305);
 		},
 		
 		
 		//캔버스 터치 이벤트 확대, 축소
 		'touch:gesture': function(event) {
 		      
 			  // Handle zoom only if 2 fingers are touching the screen
 			  if (event.e.touches && event.e.touches.length == 2) {
 			    // Get event point
 			  
 				var point = new fabric.Point(event.self.x, event.self.y);
 				
 			    // Remember canvas scale at gesture start
 			    if (event.self.state == "start") {
 			      zoomStartScale = self.canvas.getZoom();
 			 
 			    }
 			   var delta = zoomStartScale * event.self.scale ;
			    // Zoom to pinch point
    		  // self.canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), delta);
 			  self.canvas.zoomToPoint(point, delta);
 	         }
    	 }
    });
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="card" style="background-color: #fff;">
  <label style="margin-bottom:5px; margin-top:25px;">
      <font size="3" style="margin-left: 10px">Zoom in/ out</font>
      <font id="clocks" style="margin-left: 10px" size="1"></font>
  </label>

  <hr class="style1" style="margin-bottom: 20px; margin-left: 30px; margin-right: 30px;  margin-top: 0px;">
      <div id="canvasWrapper">
           <canvas class="img-responsive img-rounded" id="c"></canvas>
      </div>
  </div>

片段还行

https://jsfiddle.net/6kjL3xe4/6/

Answer 1

我解决了问题的答案。

正确答案是console.log(self.canvas)；分别。viewportTransform 发现那里是我的 gem 。

'mouse:up': function(event) { [zoomStartScale,0,0,zoomStartScale,0,0];
    },

    //캔버스 터치 이벤트 확대, 축소
    'touch:gesture': function(event) {

          // Handle zoom only if 2 fingers are touching the screen
          if (event.e.touches && event.e.touches.length == 2) {
            // Get event point

            var point = new fabric.Point(event.self.x, event.self.y);

            //point_x = -1 * event.self.x;
            //point_y = -1 * event.self.y;

            // Remember canvas scale at gesture start
            if (event.self.state == "start") {
              zoomStartScale = self.canvas.getZoom();

            }
           var delta = zoomStartScale * event.self.scale ;
            // Zoom to pinch point
          // self.canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), delta);
           self.canvas.zoomToPoint(point, delta);

         }
     }
});