c# - 放大 Canvas 点击事件 winrt c#

Question

我试图在单击某个元素时放大 Canvas。这是我的 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();

它只是一个使用缩放和平移转换的 Storyboard。但结果并不尽如人意。单击的元素不是中心。

我该怎么做？谢谢!

Answer 1

我会这样做的方式是

• rW 是矩形的宽度
• rH 是矩形的高度
• rL 是矩形的 Canvas.Left
• rT 是矩形的 Canvas.Top
• cW 是 Canvas 宽度
• cH 是 Canvas 高度

首先，比例 (S) 由 cW/rW 和 cH/rH 中的较小者确定以适合屏幕，或较大以填充屏幕。

然后您希望在缩放和平移 Canvas 后矩形的中心位于 Canvas 的中心，因此为简单起见，假设 Canvas 的 RenderTransformOrigin 设置为 0,0，之后不平移缩放 - 矩形的中心将在

• (rL + rW/2)*S,
• (rT + rH/2)*S

当你想要的时候

• cW/2,
• cH/2

所以你需要翻译

• tX = cW/2 - (rL + rW/2)*S
• tY = cH/2 - (rT + rH/2)*S

这些 (S, tX, tY) 是 ScaleX、ScaleY、TranslateX、TranslateY 的 To 值。

在 Blend 中验证

• rW:500
• 相对湿度:250
• rL:300
• 时间:200
• cW:1366

• cH: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>