带手势的Fabric JS如何防止触摸设备放大

Question

I'm using fabric js with gestures, but i want to prevent zooming, if zoom is getting more than 4x in and less than 1x out

I've tried to call preventDefault() and stopPropogation() functions on the event, but it doesn't stop the zooming

event.e.stopPropagation();

Answer 1

Get the deltaY & getZoom then you can limit the zoom as below.

 var canvas = new fabric.Canvas('c'); var dia1 = new fabric.Circle({ radius: 12, originX: 'center', originY: 'center', fill: 'transparent', strokeWidth: 5, stroke: "red", }); var dia2 = new fabric.Circle({ radius: 5, originX: 'center', originY: 'center', fill: 'red', }); var targetEl = new fabric.Group([dia1, dia2], { originX: 'center', originY: 'center', }); canvas.centerObject(targetEl); canvas.add(targetEl); canvas.renderAll(); //mouse zoom canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; var pointer = canvas.getPointer(opt.e); var zoom = canvas.getZoom(); zoom = zoom - delta / 200; // limit zoom to 4x in if (zoom > 4) zoom = 4; // limit zoom to 1x out if (zoom < 1) { zoom = 1; canvas.setViewportTransform([1, 0, 0, 1, 0, 0]); } canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom); opt.e.preventDefault(); opt.e.stopPropagation(); }); //touch zoom canvas.on({ 'touch:gesture': function(e) { if (eetouches && eetouches.length == 2) { pausePanning = true; var point = new fabric.Point(e.self.x, e.self.y); if (e.self.state == "start") { zoomStartScale = canvas.getZoom(); } var delta = zoomStartScale * e.self.scale; canvas.zoomToPoint(point, delta); pausePanning = false; // limit zoom to 4x in if (delta > 4) delta = 4; // limit zoom to 1x out if (delta < 1) { delta = 1; canvas.setViewportTransform([1, 0, 0, 1, 0, 0]); } } } }); 

 canvas { border: 1px solid #ccc; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script> <canvas id="c" width="600" height="300"></canvas>