在 Silverlight/WP7 应用程序中使用 MultiTouchBehavior 时，如何以编程方式查找缩放、旋转和平移值？

Question

好吧，这似乎是一个非常愚蠢的问题，但我还不太习惯 Silverlight 领域。我正在开发一个引用 Multitouch.Behaviors.WP7 codeplex 项目的 Silverlight / WP7 应用程序 (http://multitouch.codeplex .com/）。

<Canvas x:Name="MyCanvas">
      <Image Source="Images/image.png"
           x:Name="MyImage" Width="120" 
           Canvas.Left="240" Canvas.Top="235">
            <i:Interaction.Behaviors>
                <tb:MultiTouchBehavior
        AreFingersVisible="True" 
        IsDebugModeActive="True" 
        IsMockActive="True" 
        IsRotateEnabled="True" 
        IsScaleEnabled="True" 
        IsTranslateXEnabled="True" 
        IsTranslateYEnabled="True" 
        MaximumScale="100"  
        MinimumScale="0.5"/>
       </i:Interaction.Behaviors>
  </Image>

显然，用户可以使用多点触控功能拖动图像、旋转图像并缩放图像。如何以编程方式访问图像缩放/旋转/平移的值？

Answer 1

MultitouchBehavior 使用 CompositeTransform 作为 RenderTransform对于与其关联的对象。因此，您可以使用类似于以下的代码来访问转换后的值：

var transform = this.MyImage.RenderTransform as CompositeTransform;
var currentScaleX = transform.ScaleX;
var angle = transform.Rotation;
var offsetX = transform.TranslateX;

Answer 2

您需要使用 Image.RenderTransform。
请参阅这篇文章（特别是 GestureHelper 部分 - http://timheuer.com/blog/archive/2010/09/16/silverlight-toolkit-for-windows-phone-7-released.aspx）。

<Image x:Name="GesturedImage" Source="dividbyzero.jpg" 
       HorizontalAlignment="Center" VerticalAlignment="Center" 
       Width="450" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform x:Name="ImageScaling" ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener PinchDelta="OnPinchDelta" />
  </toolkit:GestureService.GestureListener>
</Image>

然后使用 DistanceRatio 获取平移值：

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
   ImageScaling.ScaleX = e.DistanceRatio;
   ImageScaling.ScaleY = e.DistanceRatio;
}