Question

我在画布中有4个图表控件。当我单击图表控件时，它应相对于控件位置进行缩放。它的动力完美，但它走出画布的一侧。

代码

 <Canvas x:Name="SampleCanvas" Background="#F5F7F9" Height="530"    Width="1010">
                    <chartingToolkit:Chart  x:Name="mcChart" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="5" Canvas.Top="5" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                    <chartingToolkit:Chart  x:Name="mcChart2" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="410" Canvas.Top="5" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform2"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience2"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                    <chartingToolkit:Chart  x:Name="mcChart3" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="0" Canvas.Top="270" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform3"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience3"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                    <chartingToolkit:Chart  x:Name="mcChart4" Loaded="mcChart_Loaded"  Width="400" Height="250" Canvas.Left="410" Canvas.Top="270" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown"
                             Background="LightSteelBlue">
                        <chartingToolkit:Chart.RenderTransform>
                            <ScaleTransform x:Name="scaleTransform4"></ScaleTransform>
                        </chartingToolkit:Chart.RenderTransform>
                        <chartingToolkit:Chart.Series>
                            <chartingToolkit:ColumnSeries Title="Experience4"  IndependentValueBinding="{Binding Path=ModelName}" DependentValueBinding="{Binding  Path=SaleCount}">
                            </chartingToolkit:ColumnSeries>
                        </chartingToolkit:Chart.Series>
                    </chartingToolkit:Chart>
                </Canvas>

在后面的代码中我动态传递元素并执行缩放，如下所示。

            Storyboard storyBoard = new Storyboard();

            ///////// X Transform
            DoubleAnimation ds = new DoubleAnimation();
            storyBoard.Children.Add(ds);
            ds.From  = 1;
            ds.To = 1.5;
            ds.Duration = new Duration(TimeSpan.FromSeconds(2));
            Storyboard.SetTargetName(ds, "scaleTransform");
            Storyboard.SetTargetProperty(ds, new PropertyPath("(ScaleX)"));

            ////Y Transform

            DoubleAnimation dsy = new DoubleAnimation();
            storyBoard.Children.Add(dsy);
            dsy.From = 1;
            dsy.To = 1.5;
            dsy.Duration = new Duration(TimeSpan.FromSeconds(2));
            Storyboard.SetTargetName(dsy, "scaleTransform");
            Storyboard.SetTargetProperty(dsy, new PropertyPath("(ScaleY)"));
            LayoutRoot.Resources.Remove("unique_id");
            LayoutRoot.Resources.Add("unique_id",storyBoard);

            storyBoard.Begin();

我在画布外面获得了map2，cahrt3，chart4。

无论如何都要获得画布的缩放中心或图表的相对位置？

由于

Answer 1

将RenderTransformOrigin="0.5,0.5"添加到您要缩放的元素。

e.g。

<Canvas x:Name="SampleCanvas" RenderTransformOrigin="0.5,0.5"...

渲染变换原点中的共同点是大小的分数，所以0.5，0.5是中间。

在画布上放大？

1 个答案: