09 | 如何用仿射变换对几何图形进行坐标变换？
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。
前面两节课，我们学习了用向量表示的顶点，来描述曲线和多边形的方法。但是在实际绘制的时候，我们经常需要在画布上绘制许多轮廓相同的图形，难道这也需要我们重复地去计算每个图形的顶点吗？当然不需要。我们只需要创建一个基本的几何轮廓，然后通过仿射变换来改变几何图形的位置、形状、大小和角度。
仿射变换是拓扑学和图形学中一个非常重要的基础概念。利用它，我们才能在可视化应用中快速绘制出形态、位置、大小各异的众多几何图形。所以，这一节课，我们就来说一说仿射变换的数学基础和基本操作，它几乎会被应用到我们后面讲到的所有视觉呈现的案例中，所以你一定要掌握。
什么是仿射变换？
仿射变换简单来说就是“线性变换 + 平移”。实际上在平常的 Web 开发中，我们也经常会用到仿射变换，比如，对元素设置 CSS 的 transform 属性就是对元素应用仿射变换。
再说回到几何图形，针对它的仿射变换具有以下 2 个性质：
仿射变换前是直线段的，仿射变换后依然是直线段
对两条直线段 a 和 b 应用同样的仿射变换，变换前后线段长度比例保持不变
由于仿射变换具有这两个性质，因此对线性空间中的几何图形进行仿射变换，就相当于对它的每个顶点向量进行仿射变换。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了如何利用仿射变换对几何图形进行坐标变换。首先，文章解释了仿射变换的概念和性质，指出了其对直线段具有保持直线性和长度比例不变的特性。接着详细介绍了向量的平移、旋转和缩放操作，并给出了相应的数学推导和公式。特别强调了线性变换的叠加性质，是对图形进行变换的基础。随后，文章讨论了仿射变换的公式优化，引入了齐次坐标和齐次矩阵的概念，以便利用线性变换来表示仿射变换。最后，以实现粒子动画为例，说明了仿射变换在可视化中的应用，特别是在实现粒子动画中的重要性。文章内容涵盖了WebGL中uniform变量的设置以及使用requestAnimationFrame实现动画的方法，最终通过仿射变换实现了有趣的粒子动画。通过对顶点着色器和片元着色器中的代码解析，读者可以深入了解如何利用仿射变换实现动画效果。此外，文章还介绍了CSS中的transform属性，以及如何优化transform属性来提高性能。整体而言，本文对仿射变换的数学基础和应用进行了深入浅出的介绍，对读者快速了解和掌握仿射变换具有很高的参考价值。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(14)
- 最新
- 精选
廖熊猫3Blue1Brown 的数学和图形学基础课程，打不开的同学，在3B1B在B站也有账号，老师发的这个是《线性代数的本质》，搜索一下就能找到了，这个视频看完以后对矩阵的理解就能深入很多了作者回复: 👍
2020-07-10222
Thoughtful valiant.小伙伴可以康康我之前写的这两篇文章： 仿射变换理论篇：https://mp.weixin.qq.com/s/-aZ3tUgMv0uGOmbov-RRhw 仿射变换实操篇： https://mp.weixin.qq.com/s/LsDRJ6iJ5q1kNJA6xdADGQ作者回复: 棒棒哒
2020-09-072
白夜关于老师例子中vertex矩阵的一些笔记，帮助不太明白的同学： 首先，glsl中矩阵的定义是先列后行的，也就是我们理解的矩阵的转置矩阵（行列互换） 旋转： |cosA -sinA 0| |x| |xcosA-ysinA| |sinA cosA 0| * |y| = |xsinA+ycosA| = |x, y| 旋转A度 |0 0 1| |1| |1 | 位移： |1 0 A| |x| |x+A| |0 1 B| * |y| = |y+B| = |x, y| 位移 |A, B| |0 0 0| |1| |1 | 缩放： |A 0 0| |x| |x*A| |0 B 0| * |y| = |y*B| = |x, y| 中x缩放A，y缩放B |0 0 0| |1| |1 | 所以按照定义将矩阵转置一下，就得到代码中定义的三个Matrix作者回复: 赞������
2020-08-1322
Geek_frank请问关于 webgl绘图如何代码测试？我照着代码敲一遍，没有变换效果，也不报错。把github的代码复制过来就可以运行了。作者回复: 如果没报错，只是shader写的问题导致结果不对，调试起来是比较麻烦，只能有耐心地修改并测试结果了
2020-07-1422
kylin大佬，粒子系统中顶点着色器中的矩阵为啥是你前面讲的矩阵的转置呢？作者回复: 因为矩阵可以以行主序，也可以以列主序，在glsl中默认是以列主序
2020-07-30- Geek_frank。。。学了这么久的线性代数，现在终于知道一点某些概念在现实中的映射了！
作者回复: 哈哈，我觉得大学课程安排失败，大一大二基础课并不告诉你这些内容的实际用途，所以没动力学。大三大四开始应用的时候才发现基础没学好。
2020-07-13 
阿鑫数学知识全还给老师了2020-07-192
becky数学篇终于学完了，数学渣学哭，对以前学的向量和线性代数有了更多理解。跟着课程敲实现的效果：https://yeying0827.github.io/visualization-demos/#/transform/grain-animation，加了扭曲变换2023-11-24归属地：浙江
Leon two✌🏻请问老师，如果想要动态的改变顶点的数据，不知道要怎么做呢，比如实现粒子效果跟随鼠标点击/移动的位置2021-12-101
ih gwyc我想这就是为什么越学到后面人越少的原因了，都卡在数学这块了吧~~~~2021-10-111
收起评论