我想用手指放大和缩小剖面图像,然后再次返回原始图像尺寸。
目前,放大图像后,图像将不会恢复原始图像。
所需的订单清单。 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>
片段确定
答案 0 :(得分:1)
我解决了我的问题的答案。
正确的答案是console.log(self.canvas);分别。 并且viewportTransform发现有我的宝石。
'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);
}
}
});