放大画布，点击事件窗口c#

本文关键字：事件 窗口 放大 | 更新日期: 2023-09-27 17:49:23

当我点击一个元素时，我试图放大画布。这是我的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>

这是我的c#代码当Tap方法被触发时:

 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();

它只是一个使用缩放和转换转换的故事板。但结果并不令人满意。被点击的元素不是中心。

我该怎么做呢?谢谢你！

放大画布，点击事件窗口c#

我要用

  • rW为矩形的宽度
  • rH为矩形的高度
  • rL是画布。矩形的左侧
  • rT是画布。矩形的顶部
  • cW为画布宽度
  • cH为画布高度

首先，Scale (S)由cW/rW和cH/rH中较小的一个决定，以适应屏幕，或较大的一个来填充屏幕。

然后你希望矩形的中心在缩放+平移画布后位于画布的中心，因此假设画布的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 for

中验证
  • rW: 500
  • rH: 250
  • rL: 300
    • rT:
  • 200
  • 连续波:1366

  • cH: 768

  • S: 2.732

  • tX: cW/2 - (rL + rW/2) * S = 683 - 550 * 2.732 = -819.6
  • 泰: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>
相关文章：