1
I have an element that uses ui dragagble, which works when drag element, but I wish I could call the methods zoomIn()
/ zoomOut()
, when you were on the phone, through that pincer event: Pinch Event.
Example image of the event:
How could I capture this inside the draggable event? I put more or less as I imagine it should be...
$('#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) {
}
});
These are the methods that zoom in on the element:
$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);
The scaling arrow 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;
How would html be basically:
<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>
Additional details:
The viewport is currently this:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no, viewport-fit=cover">
I know there’s a way to do this with CSS, with the attribute touch-action
, but it’s not working:
.area-livre {
position:relative;
top:0;
left:0;
z-index: 15;
width: 98%;
height: 98%;
overflow: scroll;
touch-action: auto;
}