c# - 放大Canvas Tap Event winrt C#

当我单击一个元素时，我试图放大画布。
这是我的XAML代码：

<Canvas Grid.Row="1" x:Name="MapCanvas" Width="{Binding ElementName=This, ath=ActualWidth}"
                RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="{Binding ElementName=Row1, Path=ActualHeight}">
            <Canvas.RenderTransform>
                <CompositeTransform x:Name="CompositeTransform" CenterX="0.5" CenterY="0.5"></CompositeTransform>
            </Canvas.RenderTransform>
            <Rectangle Fill="Red" Width="40" Height="40" Tap="UIElement_OnTap" Canvas.Left="417" Canvas.Top="186"/>
            <Rectangle Fill="Blue" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="333" Canvas.Top="135"/>
            <Rectangle Fill="Yellow" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="333" Canvas.Top="223"/>
            <Rectangle Fill="Green" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="498" Canvas.Top="135"/>
            <Rectangle Fill="White" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="498" Canvas.Top="223"/>
        </Canvas>

这是触发Tap方法时的C＃代码：

 var mpos = e.GetPosition(MapCanvas);
        var parentcenter = new Point(((FrameworkElement)MapCanvas.Parent).ActualWidth / 2, ((FrameworkElement)MapCanvas.Parent).ActualHeight / 2);

        var sb1 = new Storyboard {Duration = TimeSpan.FromMilliseconds(800)};

        var scaleX = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = parentcenter.X - mpos.X };
        Storyboard.SetTarget(scaleX, MapCanvas);
        Storyboard.SetTargetProperty(scaleX, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.ScaleX)"));
        sb1.Children.Add(scaleX);

        var scaleY = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = parentcenter.Y - mpos.Y };
        Storyboard.SetTarget(scaleY, MapCanvas);
        Storyboard.SetTargetProperty(scaleY, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.ScaleY)"));
        sb1.Children.Add(scaleY);

        var centerX = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = 5 };
        Storyboard.SetTarget(centerX, MapCanvas);
        Storyboard.SetTargetProperty(centerX, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
        sb1.Children.Add(centerX);

        var centerY = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = 5 };
        Storyboard.SetTarget(centerY, MapCanvas);
        Storyboard.SetTargetProperty(centerY, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));
        sb1.Children.Add(centerY);
        sb1.Begin();

这只是一个使用缩放和平移变换的情节提要。
但是结果并不令人满意。单击的元素不是中心。

我怎样才能做到这一点？
谢谢！

最佳答案

我会做的方法是

rW是矩形的宽度
rH是矩形的高度
rL是矩形的Canvas.Left
rT是Canvas。矩形的顶部
cW是画布宽度
cH是画布高度

首先，比例（S）由cW / rW和cH / rH中较小者决定，以适合屏幕显示，或较大者填满它。

然后，在缩放和平移画布之后，您希望矩形的中心在画布的中心，因此，为简单起见，假设在不进行平移的情况下缩放后，画布的RenderTransformOrigin设置为0,0为简单起见。矩形将在

（rL + rW / 2）* S，
（rT + rH / 2）* S

在你想要的时候

cW / 2，
2小时

所以你需要翻译

tX = cW / 2-（rL + rW / 2）* S
tY = cH / 2-（rT + rH / 2）* S

这些（S，tX，tY）是To的ScaleX, ScaleY, TranslateX, TranslateY值。

在Blend中验证

净重：500
相对湿度：250
升：300
吨数：200
连续波：1366
时长：768
S：2.732
tX：cW / 2-（rL + rW / 2）* S = 683-550 * 2.732 = -819.6
tY：cH / 2-（rT + rH / 2）* S = 384-325 * 2.732 = -503.9

XAML

<Page
    x:Class="App40.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App40"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2.732"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2.732"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-819.6"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-503.9"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid
    >
    <Grid.Clip>
        <RectangleGeometry
        Rect="0,0,1366,768"/>
    </Grid.Clip>

        <Canvas x:Name="canvas" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0,0" Height="768" Width="1366">
            <Canvas.RenderTransform>
                <CompositeTransform/>
            </Canvas.RenderTransform>
            <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="250" VerticalAlignment="Top" Width="500" Canvas.Left="300" Canvas.Top="200"/>

        </Canvas>
    </Grid>
</Page>

rh

c# - 放大Canvas Tap Event winrt C#