我正在开发一个小应用程序,用户可以在其中用手指在屏幕上移动背景。
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
呢?在全局范围内,我如何才能避免这些滞后?
最佳答案
我想你会想要这个:
$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)。
关于angularjs - 如何修复具有动态背景位置的移动设备上的滞后/剪辑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37616450/