二维图形旋转公式的推导(逆时针、顺时针)

2023-10-13 11:40

本文主要是介绍二维图形旋转公式的推导(逆时针、顺时针),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    关于二维图形旋转可能在很多计算机图形学相关的书籍上都会介绍,然而真正理解公式推导过程的却讲得不多。那么如何推导出二维图形绕某一点旋转的公式呢?我在这里就将其推导过程简要的说明一下。

其实推导过程比较简单,首先我们来看一幅图,看看如何推导出二维图形绕原点进行旋转的公式。

上图画的比较粗略,不过能说明问题就够了。假设旋转前的点位于P处,旋转之后的点位于P'处。如何求旋转之后的点P'坐标?

在图中,旋转之前P的方向角是a,旋转之后P'的方向角就变为a+b,这里b就是旋转的角度,所谓方向角是改点和原点连线与X轴正向的夹角。旋转的正方向是逆时针

在图中,从P'点向X轴引垂线,垂足为B点,根据三角形的基础知识,可以写出如下的等式。

公式1中的R就是点P以及P'到原点的距离

由公式1,根据高中三角函数的知识,即和差公式得到如下等式2

通过观察上式,Rcos(a)=x,Rsin(a)=y,所以上式进一步花间可以得到下面的等式。

这个公式就是我们经常看到的二维图形旋转的公式,这样绕原点的旋转公式推导出来了,那么嗨经常碰到的绕某一点旋转的,比如绕着矢量图形的中心旋转的。在这种情况下,首先需要平移,然后旋转,最后平移回去,具体过程如下。

由上图可知,(x0,y0)是旋转的顶点,那么先将图形平移到原点,然后绕着原点旋转b角度,最后平移到(x0,y0)上去。

那么很容易可知绕任意一点(x0,y0)旋转的公式为

 

 

是不是比较简单,我觉得还行。

 先介绍一个公式,即点(x,y)绕原点逆时针旋转α得到(x',y')的公式
x'=xcosα-ysinα
y'=xsinα+ycosα

现在顺时针旋转α,即逆时针旋转-α,用-α代替上面的α,并根据公式cos(-α)=cosα,sin(-α)=-sinα得
x'=xcosα+ysinα
y'=-xsinα+ycosα

最后如果旋转中心为(a,b),在利用上面的公式时,需要把(a,b)沿向量(-a,-b)移动到原点,此时(x,y)变成(x-a,y-b),(x',y')变成(x'-a,y'-b),整理得
x'=(x-a)cosα+(y-b)sinα+a
y'=-(x-a)sinα+(y-b)cosα+b

转载于:https://www.cnblogs.com/azbane/p/7306614.html

这篇关于二维图形旋转公式的推导(逆时针、顺时针)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/202976

相关文章

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

使用Python开发Markdown兼容公式格式转换工具

《使用Python开发Markdown兼容公式格式转换工具》在技术写作中我们经常遇到公式格式问题,例如MathML无法显示,LaTeX格式错乱等,所以本文我们将使用Python开发Markdown兼容... 目录一、工具背景二、环境配置(Windows 10/11)1. 创建conda环境2. 获取XSLT

C++中初始化二维数组的几种常见方法

《C++中初始化二维数组的几种常见方法》本文详细介绍了在C++中初始化二维数组的不同方式,包括静态初始化、循环、全部为零、部分初始化、std::array和std::vector,以及std::vec... 目录1. 静态初始化2. 使用循环初始化3. 全部初始化为零4. 部分初始化5. 使用 std::a

利用Python实现添加或读取Excel公式

《利用Python实现添加或读取Excel公式》Excel公式是数据处理的核心工具,从简单的加减运算到复杂的逻辑判断,掌握基础语法是高效工作的起点,下面我们就来看看如何使用Python进行Excel公... 目录python Excel 库安装Python 在 Excel 中添加公式/函数Python 读取

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06