Я работаю над небольшим приложением, где пользователь перемещает фон пальцем по экрану.
background-position
определяется положением пальца.
Я использую угловой, поэтому у меня есть такие теги:
<div class="main-container" ng-touchmove="onTouchmove($event)">
<div class="image" ng-style="{ 'background-position': bgPosition }"></div>
</div>
И в моем контроллере:
$scope.onTouchmove = function (e) {
$scope.bgPosition = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';
};
Тем не менее, у меня есть значительные задержки на мобильном телефоне, а фон - "отсечение". Проблема, похоже, распространена, и люди часто предлагают использовать transform
сравнению с background-position
.
Но как я могу использовать transform
если позиция основана на движениях пользователя? В глобальном масштабе, как я могу избежать этих лагов?
Я думаю, вы захотите этого:
$scope.bgPosition = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';
быть чем-то вроде
$scope.transform = 'translate(' + e.touches[0].pageX + 'px, ' + e.touches[0].pageY + 'px)';
(и измените { 'background-position': bgPosition }
на { 'transform': transform}
или аналогичный.)
Вам также может потребоваться добавить еще один элемент html между .main-container
и .image
если вы не хотите использовать основной контейнер для обрезки изображения. Что-то вроде
.crop-image {
overflow: hidden;
}
или
.crop-image {
clip: rect(/* dimensions offset from top and left. */)
}
(переполнение может работать для ваших нужд, но если не проверить https://developer.mozilla.org/en-US/docs/Web/CSS/clip и https://developer.mozilla.org/en-US/docs/Web/CSS/клип-путь).