angularjs - 如何修复具有动态背景位置的移动设备上的滞后/剪辑？

Question

我正在开发一个小应用程序，用户可以在其中用手指在屏幕上移动背景。

background-position 由手指的位置定义。

我用的是angular，所以我有这种标签:

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

在我的 Controller 中:

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

但是，我在移动设备上有明显的滞后，背景是“剪辑”。这个问题似乎很普遍，人们经常建议在 background-position 上使用 transform。

但是如果位置是基于用户的移动，我怎么能使用transform呢？在全局范围内，我如何才能避免这些滞后？

Answer 1

我想你会想要这个:

$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} 或类似内容。)

如果您不想使用 main-container 裁剪图像，您可能还需要在 .main-container 和 .image 之间添加另一个 html 元素.有点像

.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/clip-path)。