Wie kann man Verzögerungen/Clipping auf dem Handy mit einer dynamischen Hintergrundposition beheben?

Question

Ich arbeite an einer kleinen App, wo der Benutzer den Hintergrund mit dem Finger auf dem Bildschirm bewegen.

Die background-position wird durch die Position des Fingers definiert.

Ich bin mit Winkel, so habe ich diese Art von tags:

<div class="main-container" ng-touchmove="onTouchmove($event)"> 
    <div class="image" ng-style="{ 'background-position': bgPosition }"></div> 
</div> 

Und in meinem Controller:

$scope.onTouchmove = function (e) { 
    $scope.bgPosition = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px'; 
}; 

Ich habe jedoch erhebliche Verzögerungen auf mobilen und der Hintergrund ist " Ausschnitt". Das Problem scheint häufig zu sein und die Leute empfehlen oft, transform über background-position zu verwenden.

Aber wie könnte ich transform verwenden, wenn die Position auf den Bewegungen des Benutzers basiert? Wie kann ich global diese Verzögerungen vermeiden?

Answer 1

Ich glaube, Sie würden dies tun: (. Und ändern { 'background-position': bgPosition } zu { 'transform': transform} oder ähnlich)

$scope.bgPosition = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px'; 

so etwas wie

$scope.transform = 'translate(' + e.touches[0].pageX + 'px, ' + e.touches[0].pageY + 'px)'; 

sein

Sie auch benötigen hinzufügen ein weiteres html-Element zwischen .main-container und .image, wenn Sie den Hauptcontainer nicht verwenden möchten, um das Bild zu beschneiden. So etwas wie

.crop-image { 
    overflow: hidden; 
} 

oder

.crop-image { 
    clip: rect(/* dimensions offset from top and left. */) 
} 

(Überlauf könnte für Ihre Bedürfnisse arbeiten, aber wenn nicht überprüfen https://developer.mozilla.org/en-US/docs/Web/CSS/clip und https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).