Pincer pour zoomer avec CSS3
Je suis en train de mettre en œuvre de zoom par pincement des gestes exactement comme dans Google Maps. J'ai regardé d'un discours de Stephen Bois - "La création de Responsive HTML5 Interfaces Tactiles” - sur la question et utilisé la technique mentionné. L'idée est de définir la transformation de l'origine de la cible de l'élément (0, 0) et de l'échelle au point de le transformer. Alors traduire l'image de sorte qu'il reste centré sur le point de se transformer.
Dans mon code de test de mise à l'échelle fonctionne très bien. L'image zoom avant et arrière fine entre la suite des traductions. Le problème est que je ne suis pas le calcul de la traduction des valeurs correctement. Je suis à l'aide de jQuery et Hammer.js les événements tactiles. Comment puis-je régler mon calcul dans la transformation de rappel afin que l'image soit centrée sur le point de transformer?
La CoffeeScript (#test-resize
est un div
avec une image d'arrière-plan)
image = $('#test-resize')
hammer = image.hammer ->
prevent_default: true
scale_treshold: 0
width = image.width()
height = image.height()
toX = 0
toY = 0
translateX = 0
translateY = 0
prevScale = 1
scale = 1
hammer.bind 'transformstart', (event) ->
toX = (event.touches[0].x + event.touches[0].x) / 2
toY = (event.touches[1].y + event.touches[1].y) / 2
hammer.bind 'transform', (event) ->
scale = prevScale * event.scale
shiftX = toX * ((image.width() * scale) - width) / (image.width() * scale)
shiftY = toY * ((image.height() * scale) - height) / (image.height() * scale)
width = image.width() * scale
height = image.height() * scale
translateX -= shiftX
translateY -= shiftY
css = 'translateX(' + @translateX + 'px) translateY(' + @translateY + 'px) scale(' + scale + ')'
image.css '-webkit-transform', css
image.css '-webkit-transform-origin', '0 0'
hammer.bind 'transformend', () ->
prevScale = scale
Vous devez vous connecter pour publier un commentaire.
J'ai réussi à le faire fonctionner.
jsFiddle démo
Dans le jsFiddle démo, en cliquant sur l'image représente un geste de pincement centré sur le point sur lequel vous cliquez. Les clics suivants augmenter le facteur d'échelle par une valeur constante. Pour faire de cette utile, vous voulez faire de l'ampleur et de traduire les calculs beaucoup plus souvent sur une transformation de l'événement (hammer.js fournit un).
La clé pour faire le travail a été correctement calculer le point de l'échelle des coordonnées par rapport à l'image. J'ai utilisé
event.clientX/Y
pour obtenir les coordonnées de l'écran. Les lignes suivantes convertir d'un écran à l'image de coordonnées:Ensuite, nous calculons une nouvelle taille de l'image et de trouver les distances de traduire par. La traduction de l'équation est pris de Stephen Bois " talk.
Enfin, nous avons échelle et translation
Nous faisons toutes nos traductions sur un élément wrapper pour s'assurer que la traduction de l'origine des séjours en haut à gauche de notre image.
J'ai utilisé avec succès que l'extrait de redimensionner les images sur phonegap, à l'aide du marteau et de jquery.
Si il intéresse quelqu'un, j'ai traduit ce JS.
$(imgID).hammer().on("pinch", function(event)[...] function attachPinch(wrapperID,imgID)[...]"
J'ai regardé partout sur internet, et outernet que ce soit, jusqu'à ce que je suis tombé sur le seul travail plugin/bibliothèque - http://cubiq.org/iscroll-4
où wrapper est votre id id="wrapper"
C'est quelque chose que j'ai écrit y a quelques années en Java et récemment converti à JavaScript
La
this.Zoom = function(delta,x,y)
prend:delta
= zoom avant ou arrièrex
= x de la position du zoom originey
= y de la position du zoom origineUn petit exemple:
Cela a été fait avec l'intention d'être utilisé avec une toile et des graphiques, mais il devrait fonctionner parfaitement normal de mise en page HTML
Pas une vraie réponse, mais un lien vers une fiche=dans qui fait tout pour vous. Magnifique travail!!!
https://github.com/timmywil/jquery.panzoom
(Merci 'Timmywil', qui-jamais-vous)