Lupe mit Touchmove funktion ? - Druckversion +- Javascript-forum (https://javascript-forum.de) +-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4) +--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6) +--- Thema: Lupe mit Touchmove funktion ? (/showthread.php?tid=2466) |
Lupe mit Touchmove funktion ? - oliver_z3 - 07.07.2023 Hallo, ich bin neu hier. Mein Name ist Oliver und ich komme aus Graz/Österreich. Ich bin in der IT tätig und zu meinen Hobbys zählt unter anderem das erstellen von Websiten mit Perl und Javascript etc. Jetzt hab ich hier ein kleines "Problem". Ich hab ein Javascript das mir eine Lupe über einer Bilddatei einblendet und den Bildauschnitt innerhalb der Lupe vergrössert. Das Script funktioniert eigentlich sehr gut, hab ich mehrere Bilder in der Webseite wird die Lupe über jedem Bild aufgebaut, verlässt man das Bild verschwindet die Lupe wieder. Auch auf einem Touchscreen lässt sich die Lupe beim antippen eines Bildes einblenden. Fährt man mit der Maus über das Bild so folgt die Lupe auch dem Mauszeiger. ABER: Hier ist genau mein Problem, mit der Maus funktioniert das bewegen der Lupe perfekt nur auf einem Touchscreen lässt sich die Lupe nicht bewegen sondern nur neu positionieren durch tippen auf ein Bild. Ich hab schon mit Touchevents heruzmgespielt komme aber auf keinen grünen Zweig. Vielleicht ist hier jemand der mir den Code ergänzen könnte damit ein touchmove mit dem Finder auf einem Touchscreen auch klappt ? Anbei der Code vom Script: Für Hilfe wäre ich unendlich dankbar !!! LG Oliver PS: In Javascript bin ich leider nicht wirklich so fit :-(. ------------------------------------------------------------------------------------------------ 'use strict'; class imageLoupe { constructor(image) { // Original Image this.originalImage = image; // Enlarged Image this.enlargedImage = document.createElement('img'); this.enlargedImage.src = this.originalImage.src; this.enlargedImage.setAttribute('data-loupe-enlarged-image', ''); // Wrapper this.wrapper = document.createElement('div'); this.wrapper.setAttribute('data-loupe-wrapper', ''); // Loupe this.loupe = document.createElement('div'); this.loupe.setAttribute('data-loupe', ''); // Add elements to the DOM this.wrapper.appendChild(this.loupe); this.loupe.appendChild(this.enlargedImage); this.originalImage.parentNode.insertBefore(this.wrapper, this.originalImage); this.wrapper.appendChild(this.originalImage); // Pass `this` through to methods this.showLoupe = this.showLoupe.bind(this); this.hideLoupe = this.hideLoupe.bind(this); this.moveLoupe = this.moveLoupe.bind(this); this.addEventListeners(); } addEventListeners() { this.originalImage.addEventListener('mouseenter', this.showLoupe); this.originalImage.addEventListener('mouseleave', this.hideLoupe); this.originalImage.addEventListener('mousemove', this.moveLoupe); this.originalImage.addEventListener('touchmove', this.moveLoupe); } showLoupe() { this.wrapper.style.zIndex = 1; this.loupe.style.opacity = 1; } hideLoupe() { this.wrapper.style.zIndex = 0; this.loupe.style.opacity = 0; } moveLoupe(event) { window.requestAnimationFrame(() => { // Get the size and position of the original image this.originalImageBCR = this.originalImage.getBoundingClientRect(); // Get the cursor coordinates on the original image this.cursorX = event.x - this.originalImageBCR.left + this.originalImage.offsetLeft; this.cursorY = event.y - this.originalImageBCR.top + this.originalImage.offsetTop; // Determine the corresponding coordinates on the enlarged image this.enlargedImageX = -((this.cursorX - this.originalImage.offsetLeft) / this.originalImageBCR.width * this.enlargedImage.width - this.loupe.offsetWidth / 2); this.enlargedImageY = -((this.cursorY - this.originalImage.offsetTop) / this.originalImageBCR.height * this.enlargedImage.height - this.loupe.offsetHeight / 2); // Center the loupe on the cursor this.loupeX = this.cursorX - this.loupe.offsetWidth / 2; this.loupeY = this.cursorY - this.loupe.offsetHeight / 2; // Apply the translate values this.enlargedImage.style.transform = `translate3d(${this.enlargedImageX}px, ${this.enlargedImageY}px, 0)`; this.loupe.style.transform = `translate3d(${this.loupeX}px, ${this.loupeY}px, 0)`; }); } } // Create a new loupe for each image document.querySelectorAll('[data-loupe-image]').forEach(function(img) { new imageLoupe(img); }); RE: Lupe mit Touchmove funktion ? - rzscout - 10.07.2023 Hi Oliver, es wäre super wenn du uns den ganzen Code zusenden kannst damit man das ganze nachstellen könnte. PS: Zu Perl: Warum arbeitest du noch mit Perl? Perl wird nicht mehr weiter entewickelt und könnte in Zukunft Fehler oder sicherheitsrelevante Probleme mit sich führen. Ich rate die Weiternutzung von Perl ab und empfehle dem Nachfolger Raku zu verwenden oder auf PHP oder Python umzusteigen. RE: Lupe mit Touchmove funktion ? - oliver_z3 - 10.07.2023 Hallo rzscout, herzlichen Dank für Deinen Post, anbei mal ein ZIP-File mit allem was man bracht (ist das "Gerüst)", einfach das Verzeichnis "loupe_demo" auspacken und ins root-Verzeichnis von Deinem Webserver kopieren. Vielleicht kannst Du mir weiter helfen, ich probier hier schon seit Tagen herzum, komm aber nicht weiter, bin aber auch kein Javascript-Programmierer. Warum Perl: ist aus meinem Werdegang so, ich hab in den 90ern mit Perl unter AIX und SGI angefangen. DANKE für HILFE !!!!!!!! LG Oliver PS: Ich hatte mit dem Programmierer des Ursprungscodes Kontakt, er hat kein Problem damit wenn ich oder jemand Anderes seinen Code verändert/bearbeitet, im Gegenteil, er würde sich sogar darüber freuen. Er selbst hat leider keine Zeit mehr die touchmove Funktion zu implementieren :-( RE: Lupe mit Touchmove funktion ? - Sempervivum - 12.07.2023 Hallo @"oliver_z3", weil ich das Thema interessant finde, dachte ich, ich registriere mich Mal um antworten zu können. Bekomme jedoch die Meldung "Willkommen zurück" - ganz vergessen, dass ich mich früher schon mal registriert hatte. Ich dachte zunächst, es liege daran, dass Du bei "touchstart" und "touchend" nichts tust um die Lupe sichtbar zu machen und zu verbergen aber das hat noch nicht zum Erfolg geführt. Mit "touchmove" warst Du natürlich schon auf dem richtigen Wege. Das funktioniert dann ein wenig anders als ein einfaches event.target und berücksichtigt auch, dass mehrere Finger den Bildschirm berühren. Man kann das bei MDN nachlesen. Diese Javascript funktioniert dann bei mir, ich kann die Lupe durch Ziehen mit dem Finger bewegen: Code: 'use strict'; RE: Lupe mit Touchmove funktion ? - oliver_z3 - 13.07.2023 Hallo Sempervivum, Du bist ein Gott !!!!!!!!!! Genau das wollte ich haben, zwei Kleinigkeiten hab ich bei Deinem Source geändert: this.originalImage.addEventListener('touchend', this.hideLoupe); ....hab ich raus genommen damit die Lupe dort stehen bleibt wo ich mit dem Finger die Touchfläche verlasse und nicht verschwindet this.enlargedImage.style.transform = `scale(1) translate3d(${this.enlargedImageX}px, ${this.enlargedImageY}px, 0)`; ....scale(2) hab ich auf 1 geändert damit die Lupenfunktion nicht so gross ist und die Touch-Position am Originalimage genau ist, bei 2 wird das Originakimage doppelt so gross und die Touchposition passt nicht mehr. Die Lupenvergrösserung ist dadurch zwar nicht so gross passt bei mir aber besser. Ich danke Dir 100000 mal, genau das wollte ich haben. GlG Oliver RE: Lupe mit Touchmove funktion ? - Sempervivum - 13.07.2023 Hallo Oliver, freut mich, dass es auch bei dir funktioniert. Das mit dem scale war nur eine Notlösung von mir weil ich überhaupt keine Vergrößerung feststellen konnte. Möglicher Weise fehlte mir da noch etwas im CSS. Wenn Du den Faktor auf 1 setzt, kannst Du das scale auch weg lassen. Vielleicht interessiert sich der Urheber auch für diese Erweiterung? Beste Grüße, Ulrich RE: Lupe mit Touchmove funktion ? - oliver_z3 - 13.07.2023 Hallo Ulrich, ich hab das scale mal weg gelassen und das funktioniert bei mir dann auch perfekt (hab es aber wieder mit scale(1) rein gegeben, dann kann ich das immer ändern wenn ich möchte ;-)). Warum das Vergrössern bei Dir nicht so geklappt hat mit scale(1) kann das an der Image-Grösse hängen. Bei mir ist es so das ich ein Image in einem DIV auf eine fixe Grösse setze, wenn diese Grösse gleich der Imagegrösse ist dann hab ich keine vergrösserung, ist das Image aber grösser als die grösse im DIV dann wird vergrössert, ist das Image kleiner als die Grösse des DIV dann wird das Image schon im DIV vergrössert, die Lupe verkleinert das Image dann. Man kann da dann ganz lustige Effekte erziehlen. Ich gebe Deinen Code dem ursprünglichen Entwickler weiter, der freut sich sicher darüber dass das Teil weiter entwickelt wurde und Verwendung findet. Danke Dir nochmals für Deine Bemühungen und Hilfe, Du hast mich richtig "glücklich" gemacht :-). GlG Oliver |