用LayoutTransform将夹点对准缩放

Question

更新1我相信我需要根据操纵原点值设置ScrollViewer的垂直和水平偏移量，以将图像保持在“夹点”之下。然而，我在如何计算这些值时遇到了麻烦。

作为一个更大的应用程序的一部分，我们希望用户能够捏-缩放并拖动到滚动查看器内部的图像。我下面的内容将允许摇摄和按压放大。然而，缩放似乎发生在左上角，我希望它以“夹点”为中心。我如何修改这段代码来做到这一点呢？我已经找到了一些示例，这些例子可以很好地用RenderTransform完成，但是无法解决如何使用LayoutTransforms来完成这些任务。

以下是我的xaml设置：

   <ScrollViewer Name="MainScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"  >
        <Image Name="MainImage" Source="/test.jpg" Stretch="None" IsManipulationEnabled="True">
            <Image.LayoutTransform>
                <ScaleTransform x:Name="ScaleTrans"/>
            </Image.LayoutTransform>
        </Image>
    </ScrollViewer>

下面是代码：

Private Sub MainImage_ManipulationStarting(sender As Object, e As ManipulationStartingEventArgs) Handles MainImage.ManipulationStarting
    e.ManipulationContainer = MainScrollViewer
    e.Handled = True
End Sub


Private Sub MainImage_ManipulationDelta(sender As Object, e As ManipulationDeltaEventArgs) Handles MainImage.ManipulationDelta
    Dim delta = e.DeltaManipulation
    Dim element = TryCast(e.Source, FrameworkElement)
    If element IsNot Nothing Then
        'Apply Scale Value
        ScaleTrans.ScaleX *= delta.Scale.X
        ScaleTrans.ScaleY *= delta.Scale.Y

        'Panning
        MainScrollViewer.ScrollToHorizontalOffset(MainScrollViewer.HorizontalOffset + delta.Translation.X * -1)
        MainScrollViewer.ScrollToVerticalOffset(MainScrollViewer.VerticalOffset + delta.Translation.Y * -1)
    End If
End Sub

Answer 1

设置变换的中心点。

<ScrollViewer Name="MainScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"  >
    <Image Name="MainImage" Source="/test.jpg" Stretch="None" IsManipulationEnabled="True">
        <Image.LayoutTransform>
            <ScaleTransform x:Name="ScaleTrans" CenterX="0.5" CenterY="0.5" />
        </Image.LayoutTransform>
    </Image>
</ScrollViewer>

如果您需要它相对于夹点所在的位置，请在后面编写代码。与xaml版本一样，您可以更改CenterX和CenterY属性ScaleTransform。但是，请注意，这两个属性不是点值，而是相对于自身从0.0到1.0的值。CenterX = 0.0/CenterY = 0.0指左上角，而CenterX = 1.0/CenterY = 1.0为右下角。你需要自己计算一下。