RenderTransformOrigin和RotateAt一起作用会怎样

最新推荐文章于 2024-06-03 23:30:00 发布
最新推荐文章于 2024-06-03 23:30:00 发布
阅读量607 收藏
点赞数
分类专栏： wpf C# xaml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/htxhtx123/article/details/104013824
版权
本文探讨了在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>

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

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

在这里插入图片描述

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

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

最低0.47元/天 解锁文章
xinyue_htx
关注
专栏目录
【愚公系列】2023年10月 WPF+上位机+工业互联 053-路径动画和自定义帧动画
时光隧道
09-26 4万+
WPF中的路径动画是一种通过将元素沿着路径移动来创建动画效果的技术。具体来说，就是将元素沿着定义好的路径对象进行动画运动，可以模拟物体在现实生活中沿着某个路径运动的效果。路径动画是一种非常抢眼的动画效果，在WPF应用程序中广泛应用。动画类名称：类型名称+ AnimationUsingPath下面介绍几种常用的路径动画类型：PathAnimationUsingPath：使用路径对象来控制动画。通过指定起点、终点和路径控制点的方式，可以定义出任意形状的路径动画效果。
【愚公系列】2023年10月 WPF+上位机+工业互联 059-工业仪表和开关控件案例
热门推荐
时光隧道
08-25 2万+
工业仪表是指用于生产、制造、加工、输送等工业领域的测量、控制、调节和监测系统的仪器、设备和硬件。工业仪表包括：温度、压力、流量、液位、电气、化学分析等一系列测量仪器与控制元件，可对工业生产的各个方面进行测试、监控和控制，确保生产过程的稳定性和质量。工业仪表的应用领域广泛，包括化工厂、电力、炼油、制药、食品、水处理、纺织、机械加工、航空航天等多个领域。工业开关控件是一种用于工业控制系统中的开关，能够实现对电气设备、机器和自动化系统的控制。这些开关通常是由耐用的材料制成，如金属或塑料，并具有高度的可靠性和耐用性
RenderTransformOrigin 的作用
仓
11-17 1万+
 对象中心点用来定义所有RenderTransform变换中相对位置的的参考点,默认为图形的左上即(0,0),该属性值为相对值,即x和y方向的(0-1)分别指以本图形所在矩形(在Expression blend中可以看到 )的长和宽为参照的百分比,该属性以图形所在矩形默认状态下左上角为参考如    Roatetransform中的中心是相对于Render
UWP文字旋转的锚点 RenderTransformOrigin
遥远的心
10-19 512
在UWP中文字旋转不能再用LayoutTranform了，只能用RenderTransform。在文字旋转过程中，我们会问旋转的锚点在哪里，是在文字的中心，还是文字的左上角呢？这个其实是通过TextBlock的RenderTransformOrigin属性控制的，它的值是两个比率，表明锚点在文字的X,Y方向的什么地方。RenderTransformOrigin=“0，0” 代表旋转锚点在文字的左上角，RenderTransformOrigin=“0.5，0.5”表示旋转的锚点在文字的中心。看下面的例子就比较
RenderTransformOrigin使用说明 - [silverlight 开发]
weixin_34293141的博客
08-11 236
RenderTransformOrigin:获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界。 这是一个依赖项属性。 命名空间： System.Windows 程序集： PresentationCore（在 PresentationCore.dll 中）用于 XAML 的 XMLNS：http://schemas.microsoft...
WPF中使用RenderTransformOrigin来控制动画的起点
路虽远，行则必至！
05-17 1898
RenderTransformOrigin：渲染动画的起点 Render：渲染 Transform：动画 Origin：起点 取值为一个坐标的形式 取值范围： 0,0 到 1,1 取值 含义 0,0 表示左上角 0.5,0.5 表示中心 1,1 表示右下角 示例： RenderTransformOrigin="0,0"; 注意：动画默认会以左上角为基准点开始 ...
c#实现图片的平移和旋转示例代码
08-25
在C#中，实现图片的平移和旋转是常见的图像处理操作，这通常涉及到WPF（Windows Presentation Foundation）中的动画和转换技术。本教程将详细解释如何使用C#实现这一功能。 首先，我们需要创建一个新的WPF项目，并...
Csharp处理图片拖动和缩放功能
05-18
对于使用 C# 和 Windows Forms 开发的应用程序而言，实现这些功能可以显著提升用户体验。本文将详细介绍如何使用 C# 在 Windows Forms 应用程序中实现图片的拖动和缩放功能。 #### 图片拖动功能实现 首先，我们来...
WPF可视对象变换（RenderTransform）-----RotateTransform、TranslateTransform、ScaleTransform
weixin_30919235的博客
07-24 509
前言：对于可是元素，我们常见有三种变化，旋转、平移、面积 一、 旋转（RotateTransform） <RotateTransform CenterX="100" CenterY="50" Angle="180"></RotateTransform> CenterX和CenterY表示旋转中心，默认为原点及可视元素的左上角， Angle...
RotateTransform的CenterX和CenterY和元素的RenderTransformOrigin属性与
Susan_0401的博客
04-23 404
我们可以使用RotateTransform的CenterX和CenterY属性来定义元素的旋转中心，如下： <Button.RenderTransform><RotateTransformCenterX="20"CenterY="20"></RotateTransform></Button.RenderTransform>...
WPF中RenderTransform详解
鲤籽鲲的博客
03-23 5486
WPF中RenderTransform详解
UIElement.RenderTransformOrigin 使用详解
狂奔之林的博客
07-13 1549
对象中心点用来定义所有RenderTransform变换中相对位置的的参考点,默认为图形的左上即(0,0),该属性值为相对值,即x和y方向的(0-1)分别指以本图形所在矩形(在Expression blend中可以看到 )的长和宽为参照的百分比,该属性以图形所在矩形默认状态下左上角为参考RenderTransformOrigin 已使用某种程度上使用了非标准的 ...
【WPF编程宝典】第8讲：形状、画刷和变换
最新发布
qq_29794385的博客
06-03 1163
本讲介绍了WPF中的基本形状，包括矩形、椭圆形、直线、折线、多边形、点划线等。还介绍四类画刷的使用。介绍了形状的旋转及移动等变化，元素的旋转及移动等。最后介绍了透明。
RenderTransform特效
m0_56449543的博客
11-08 263
RenderTransform特效（变形） WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状 （比如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就 是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同 时变形特效也常用于辅助产生各种动画效果。 1. RenderTransform类： 该类成员如下： TranslateTransform：能够让某
使用wpf和MVVM制作一个可以旋转的机械手臂
05-12
好的，下面是一个简单的示例，可以通过鼠标拖拽旋转机械臂的关节。 首先，在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、付费专栏及课程。

余额充值