在Windows Phone 8上平滑缩放和平移
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Windows Phone 8上平滑缩放和平移相关的知识,希望对你有一定的参考价值。
通过连接到ManipulationDelta和ManipulationStarted事件(在图像控件上),我设法实现了捏缩放和平移:
private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
var transform = (CompositeTransform)image.RenderTransform;
// pan
transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X;
transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y;
// zoom
if (e.PinchManipulation != null)
{
transform.CenterX = e.PinchManipulation.Original.Center.X;
transform.CenterY = e.PinchManipulation.Original.Center.Y;
transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale;
transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale;
}
}
private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
// the user has started manipulating the screen, set starting points
var transform = (CompositeTransform)image.RenderTransform;
_scaleX = transform.ScaleX;
_scaleY = transform.ScaleY;
_translationX = transform.TranslateX;
_translationY = transform.TranslateY;
}
但是与Windows Phone UI其余部分的平滑度相比,它感觉非常平静和僵硬。机芯没有惯性。
是否有一种方法可以使动作更流畅?使用动画和情节提要板可以解决此问题吗?我已经尝试过使用ScrollView至少获得平滑的平移,但是随后ManipulationDelta事件无法正确触发。
[我知道您在谈论8,我将发布与7相关的文章的链接,但是在使用Windows Phone时它非常有用,因此在这里:
https://www.wintellect.com/building-touch-interfaces-for-windows-phones-part-3/
我不认为那个从那以后没有太大变化...
我想从数学角度解决这个问题。结果在正确性上类似于Telerik的PanAndZoomImage。如果您不感兴趣,请直接跳至此gist(它适用于WP7.1 +)。您需要引用System.Windows.Interactivity和Windows Phone工具箱。
用法:
<Image Source="http://i.imgur.com/ZbKlRzK.jpg">
<i:Interaction.Behaviors>
<phoneApp1:PanAndZoomBehavior MaxZoom="10" />
</i:Interaction.Behaviors>
</Image>
Math
平移和缩放使用CompositeTransform的4种转换中的2种,即平移和缩放。关键是要了解如何组成两个比例缩放和平移变换。我将使用haskellish表示法,因为这样可以减轻打字和阅读的负担。我们的“原始人”是
- [
scale s
=围绕(s.x,s.y)缩放,在x方向上缩放因子s.x,在y方向上缩放s.y - [
translate t
=将所有点在x方向上偏移t.x,在y方向上偏移t.y
CompositeTransform围绕中心点缩放,表示为
scaleAround c s = translate c . scale s . translate -c
以下规则成立(如果您不相信我,请算一下,所有运算符都是按分量计算的:]
translate a . translate b = translate (a+b)
scale a . scale b = scale (a*b)
translate t . scale s = scale s . translate (t/s)
一个CompositeTransform就像
transform s c t = translate t . scaleAround c s
= translate (t+c) . scale s . translate -c
[当组合其中两个变换时,我们必须绕过基元,直到我们到达上面的这种形式为止。令a
和b
为这两个CompositeTransforms。这样我们得到:
transform' = b . a
= translate bt . scaleAround bc bs . translate at . scaleAround ac as
= translate bt . translate bc . scale bs . translate -bc . translate at . translate ac . scale as . translate -ac
= translate (bt+bc) . scale bs . translate (ac+at-bc) . scale as . translate -ac
= translate (bt+bc) . translate (ac+at-bc)*bs . scale bs . scale as . translate -ac
= translate (bt+bc+(ac+at-bc)*bs) . scale (as*bs) . translate -ac
= translate (bt+bc-ac+(ac+at-bc)*bs) . scaleAround ac (as*bs)
= translate (bt+at*bs+(bs-1)*(ac-bs)) . scaleAround ac (as*bs)
这仅仅是因为我对为什么某些人做某些事情的大量文献感到沮丧。
有关实际组成代码,请查找here
我知道这是一个较晚的答案,但这是另一个示例项目,可以帮助解决此问题http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7
以上是关于在Windows Phone 8上平滑缩放和平移的主要内容,如果未能解决你的问题,请参考以下文章
带有缩放和平移功能的 Windows 窗体的 PictureBox