Question

我正在尝试在UI元素（矩形）上使用操作，并且可以毫无问题地旋转和翻译它。我想要实现的是使另一个UI元素（例如椭圆）跟随第一个（矩形）。

如果我应用相同的变换组 - 我用于矩形到椭圆，在平移操作期间它工作正常但在旋转期间椭圆不跟随矩形。

我想我必须找到一个合适的复合变换中心Point来提供椭圆，但我无法弄清楚如何。

以下是相应的示例代码。

    public MainPage()
    {
        this.InitializeComponent();

        rectMy.ManipulationMode = ManipulationModes.None | ManipulationModes.TranslateX | ManipulationModes.TranslateY | ManipulationModes.Rotate;
        rectMy.ManipulationStarted += rectMy_ManipulationStarted;
        rectMy.ManipulationDelta += rectMy_ManipulationDelta;
        rectMy.ManipulationCompleted += rectMy_ManipulationCompleted;

        transformGroup.Children.Add(previousTransform);
        transformGroup.Children.Add(compositeTransform);

        rectMy.RenderTransform = transformGroup;
    }

    void rectMy_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        e.Handled = true;
    }

    void rectMy_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        previousTransform.Matrix = transformGroup.Value;

        Point center = previousTransform.TransformPoint(new Point(rectMy.Width / 2, rectMy.Height / 2));
        compositeTransform.CenterX = center.X;
        compositeTransform.CenterY = center.Y;

        compositeTransform.Rotation = e.Delta.Rotation;
        compositeTransform.ScaleX = compositeTransform.ScaleY = e.Delta.Scale;
        compositeTransform.TranslateX = e.Delta.Translation.X;
        compositeTransform.TranslateY = e.Delta.Translation.Y;
    }

    void rectMy_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        e.Handled = true;
    }

Answer 1

行。我现在更了解它并找到了解决方案。这完全是关于复合变换的中心点（正如我最初猜测的那样）。对于椭圆的中心，我不得不喂食矩形的中心。但是，需要相对于椭圆给出坐标。在我的例子中，椭圆位于矩形的右上角，所以下面是我给出的复合变换中心。

Point centerE = previousTransformE.TransformPoint(new Point(-rectMy.Width / 2 + ellipseMy.Width / 2, rectMy.Height / 2 + ellipseMy.Height / 2));

对于矩形，复合变换的中心点为：

Point center = previousTransform.TransformPoint(new Point(rectMy.Width / 2, rectMy.Height / 2));

Stackoverflow不允许我发布图像以更好地可视化事物。遗憾！

整个代码：

previousTransform.Matrix = transformGroup.Value;
previousTransformE.Matrix = transformGroupE.Value;

Point center = previousTransform.TransformPoint(new Point(rectMy.Width / 2, rectMy.Height / 2));
compositeTransform.CenterX = center.X;
compositeTransform.CenterY = center.Y;

compositeTransform.Rotation = e.Delta.Rotation;
compositeTransform.TranslateX = e.Delta.Translation.X;
compositeTransform.TranslateY = e.Delta.Translation.Y;

Point centerE = previousTransformE.TransformPoint(new Point(-rectMy.Width / 2 + ellipseMy.Width / 2, rectMy.Height / 2 + ellipseMy.Height / 2));
compositeTransformE.CenterX = centerE.X;
compositeTransformE.CenterY = centerE.Y;

compositeTransformE.Rotation = e.Delta.Rotation;
compositeTransformE.TranslateX = e.Delta.Translation.X;
compositeTransformE.TranslateY = e.Delta.Translation.Y;

WinRT UI元素在操作期间跟随另一个元素

1 个答案: