RenderTransformOrigin和RotateAt一起作用会怎样

本文探讨了在WPF中,当RenderTransformOrigin和RotateAt同时应用于元素时,旋转中心点的理解和实际效果。通常,设置RenderTransformOrigin为0.5,0.5可以使元素在中点旋转。然而,通过RotateAt可以指定一个绝对坐标进行旋转,但需要注意, RotateAt的坐标是相对于元素自身的。示例代码展示了如何在非中心点旋转元素,以及如何正确理解旋转中心的计算方式。了解这些知识有助于更精确地控制元素的视觉效果。" 107160068,8224417,小程序文章列表超过1024KB加载策略,"['小程序开发', 'javascript', 'js']
摘要由CSDN通过智能技术生成

我们都知道RotateTransform会受到旋转中心RenderTransformOrigin的影响


因此我们如果期望在中点旋转,我们可以选择设置RenderTransformOrigin=0.5,0.5

        <Rectangle Width="100" Height="100" Fill="Teal" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>

在这里插入图片描述
和期望相符合。

但是智能提示告诉我们,在旋转的时候还能够设置一些其他东西。比如CenterXCenterY

在这里插入图片描述

我们看到CenterX的智能提示是“获取或者设置旋转中心点的X坐标”。

这个功能类似于RotateAt能够使我们绕非RenderTransformOrigin

好的,下面是一个简单的示例,可以通过鼠标拖拽旋转机械臂的关节。 首先,在XAML中创建一个包含机械臂的控件。这个控件由多个部分组成,每个部分都是一个矩形,代表机械臂的一个关节。这些矩形通过旋转变换连接在一起,形成一个完整的机械臂。 ```xaml <UserControl x:Class="MechanicalArm.Views.MechanicalArmControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:MechanicalArm.Views" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800" Cursor="Hand"> <Canvas Background="White"> <!-- 机械臂关节1 --> <Rectangle x:Name="Joint1" Width="30" Height="80" Fill="Gray" Canvas.Left="100" Canvas.Top="100"> <Rectangle.RenderTransform> <TransformGroup> <TranslateTransform X="-15" Y="0"/> <RotateTransform x:Name="Joint1Rotation" Angle="0" /> <TranslateTransform X="15" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.RenderTransformOrigin> <Point X="0.5" Y="0.5"/> </Rectangle.RenderTransformOrigin> </Rectangle> <!-- 机械臂关节2 --> <Rectangle x:Name="Joint2" Width="30" Height="80" Fill="Gray" Canvas.Left="130" Canvas.Top="100"> <Rectangle.RenderTransform> <TransformGroup> <TranslateTransform X="-15" Y="0"/> <RotateTransform x:Name="Joint2Rotation" Angle="0"/> <TranslateTransform X="15" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.RenderTransformOrigin> <Point X="0.5" Y="0.5"/> </Rectangle.RenderTransformOrigin> </Rectangle> <!-- 机械臂关节3 --> <Rectangle x:Name="Joint3" Width="30" Height="80" Fill="Gray" Canvas.Left="160" Canvas.Top="100"> <Rectangle.RenderTransform> <TransformGroup> <TranslateTransform X="-15" Y="0"/> <RotateTransform x:Name="Joint3Rotation" Angle="0"/> <TranslateTransform X="15" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.RenderTransformOrigin> <Point X="0.5" Y="0.5"/> </Rectangle.RenderTransformOrigin> </Rectangle> <!-- 机械臂关节4 --> <Rectangle x:Name="Joint4" Width="30" Height="80" Fill="Gray" Canvas.Left="190" Canvas.Top="100"> <Rectangle.RenderTransform> <TransformGroup> <TranslateTransform X="-15" Y="0"/> <RotateTransform x:Name="Joint4Rotation" Angle="0"/> <TranslateTransform X="15" Y="0"/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.RenderTransformOrigin> <Point X="0.5" Y="0.5"/> </Rectangle.RenderTransformOrigin> </Rectangle> <!-- 机械臂末端 --> <Rectangle x:Name="EndEffector" Width="30" Height="40" Fill="Red" Canvas.Left="220" Canvas.Top="100"/> </Canvas> </UserControl> ``` 在ViewModel中,我们需要处理鼠标拖拽事件,以实现机械臂关节的旋转。为了方便起见,我们将所有的旋转角度都保存在一个数组中,然后根据数组中的值更新每个关节的旋转角度。 ```csharp using System.Windows; using System.Windows.Input; using System.Windows.Media; namespace MechanicalArm.ViewModels { public class MechanicalArmViewModel : ViewModelBase { private Point _previousMousePosition; private double[] _jointAngles = new double[4]; public MechanicalArmViewModel() { // 初始化关节角度 for (int i = 0; i < _jointAngles.Length; i++) { _jointAngles[i] = 0; } } public double Joint1Angle { get => _jointAngles[0]; set { _jointAngles[0] = value; OnPropertyChanged(nameof(Joint1Angle)); } } public double Joint2Angle { get => _jointAngles[1]; set { _jointAngles[1] = value; OnPropertyChanged(nameof(Joint2Angle)); } } public double Joint3Angle { get => _jointAngles[2]; set { _jointAngles[2] = value; OnPropertyChanged(nameof(Joint3Angle)); } } public double Joint4Angle { get => _jointAngles[3]; set { _jointAngles[3] = value; OnPropertyChanged(nameof(Joint4Angle)); } } public void OnMouseDown(object sender, MouseButtonEventArgs e) { _previousMousePosition = e.GetPosition((IInputElement)sender); Mouse.OverrideCursor = Cursors.Hand; Mouse.Capture((IInputElement)sender); } public void OnMouseMove(object sender, MouseEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed) { var currentMousePosition = e.GetPosition((IInputElement)sender); var delta = currentMousePosition - _previousMousePosition; _previousMousePosition = currentMousePosition; // 计算旋转角度 var angle = delta.Y / 5; // 更新关节角度 Joint1Angle += angle; Joint2Angle += angle; Joint3Angle += angle; Joint4Angle += angle; } } public void OnMouseUp(object sender, MouseButtonEventArgs e) { Mouse.OverrideCursor = null; Mouse.Capture(null); } } } ``` 最后,在MainWindow中将机械臂控件添加到界面上,并将ViewModel与控件绑定。 ```xaml <Window x:Class="MechanicalArm.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MechanicalArm" xmlns:viewmodels="clr-namespace:MechanicalArm.ViewModels" xmlns:views="clr-namespace:MechanicalArm.Views" mc:Ignorable="d" Title="Mechanical Arm" Height="450" Width="800"> <Window.DataContext> <viewmodels:MechanicalArmViewModel /> </Window.DataContext> <Grid> <views:MechanicalArmControl MouseDown="OnMouseDown" MouseMove="OnMouseMove" MouseUp="OnMouseUp"/> </Grid> </Window> ``` 现在,我们就可以通过鼠标拖拽旋转机械臂的关节了!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值