Tenho um elemento que usa ui dragagble, que funciona quando arrasto elemento, mas gostaria de poder chamar os métodos zoomIn()
/ zoomOut()
, quando estivesse no celular, através daquele evento de pinça: pinch event.
Imagem de exemplo do evento:
Como eu poderia capturar isso dentro do evento draggable? Eu coloquei mais ou menos como imagino que deve ser...
$('#area_livre').draggable({
// stack: 'img',
cursor: 'move',
// revert: true,
// revertDuration: 250,
zIndex: 3,
start: function (event, ui) {
},
drag: function (event, ui) {
var zoom = //COMO PODERIA CHAMAR OS EVENTOS ZOOM IN / ZOOM OUT AQUI?
var original = ui.originalPosition;
ui.position = {
left: (e.clientX - click.x + original.left) / zoom,
top: (e.clientY - click.y + original.top ) / zoom
};
},
stop: function (event, ui) {
}
});
Estes são os métodos que dão zoom no elemento:
$scope.scalePDF = 1.0;
var MIN_SCALE = 0.25;
var MAX_SCALE = 10.1;
function zoomIn() {
var newScale = $scope.scalePDF;
newScale += 0.5;
newScale = newScale.toFixed(2);
newScale = Math.ceil(newScale * 10) / 10;
newScale = Math.min(MAX_SCALE, newScale);
if(newScale < MAX_SCALE) {
$scope.scalePDF = newScale;
}
}
document.getElementById("zoomIn").addEventListener("click", zoomIn);
function zoomOut() {
var newScale = $scope.scalePDF;
newScale -= 0.5;
newScale = Math.max(MIN_SCALE, newScale);
newScale = newScale.toFixed(2);
newScale = Math.ceil(newScale * 10) / 10;
if (newScale > MIN_SCALE) {
$scope.scalePDF = newScale;
}
}
document.getElementById("zoomOut").addEventListener("click", zoomOut);
A escala seta o css transform scale:
var zoom_el = document.getElementById('area_livre');
var transformString = 'scale('+Math.abs($scope.scalePDF)+')',
transformOriginString = 'center 0';
zoom_el.style.transform = transformString;
zoom_el.style['-ms-transform'] = transformString;
zoom_el.style['-webkit-transform'] = transformString;
zoom_el.style['-moz-transform'] = transformString;
zoom_el.style['-o-transform'] = transformString;
zoom_el.style.transformOrigin = transformOriginString;
zoom_el.style['-ms-transform-origin'] = transformOriginString;
zoom_el.style['-webkit-transform-origin'] = transformOriginString;
zoom_el.style['-moz-transform-origin'] = transformOriginString;
zoom_el.style['-o-transform-origin'] = transformOriginString;
Como seria basicamente a html:
<div id="container"><div id="area_livre" class="area-livre"> conteúdo arrast
ável e expansível</div></div>
<button id="zoomIn" onclick="zoomIn()">+</button><br>
<button id="zoomOut" onclick="zoomOut()">-</button>
Detalhes adicionais:
O viewport atualmente é esse:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no, viewport-fit=cover">
Sei que existe uma forma de fazer isso com CSS, com o atributo touch-action
, mas não está funcionado:
.area-livre {
position:relative;
top:0;
left:0;
z-index: 15;
width: 98%;
height: 98%;
overflow: scroll;
touch-action: auto;
}